/* ============================================================================
   ATMS DESIGN TOKENS - v1 (Storefront Modernisation, Phase 1)
   ----------------------------------------------------------------------------
   THE single source of truth for colour, type, spacing, radius, shadow and
   motion across the storefront. Components consume the ROLE tokens; the
   brand book documents the ANCHOR tokens. Change a value here + bump
   get_atms_version() and the whole site moves at once.

   HOUSE RULE - NO NEUTRAL GREYS. Every "grey" in this system is tinted with
   the brand purple (ink, muted text, borders, page wash, shadows). This is
   deliberate: the purple IS the brand; a generic grey substrate would erase
   it. Do not introduce #333/#666/#EEE-style neutrals - pick the nearest
   tinted token instead.

   Palette anchors trace to the circulated storefront assessment
   (ATMS-storefront-assessment.pdf, 2026-06-26): refined purple + orange,
   replacing #6a2c99 / #FF470F at point of consumption. Legacy hexes remain
   valid until each component is migrated (Phase 2+).
   ========================================================================== */

:root {

    /* ---- BRAND ANCHORS (brand-book names) --------------------------------
       The colours the brand book prints. Prefer ROLE tokens in components. */
    --atms-purple: #6E2A7E;        /* primary brand purple (refines #6a2c99) */
    --atms-purple-deep: #45184E;   /* hovers/pressed on purple, rich fills   */
    --atms-ink: #2E1033;           /* purple-black text ink (replaces #222)  */
    --atms-orchid: #B89BBE;        /* mid lavender - secondary accents       */
    --atms-lavender: #E6D2EA;      /* light lavender - highlights, selection */
    --atms-lilac-mist: #F3E8F4;    /* faint lavender - tinted panels         */
    --atms-blush: #FAF6F8;         /* warm off-white - page wash             */
    --atms-orange: #FF5B38;        /* action orange (refines #FF470F)        */
    --atms-orange-bright: #FF7A5C; /* action hover                           */
    --atms-peach: #FFB59F;         /* focus ring, soft accents               */
    --atms-peach-mist: #FBE8E2;    /* faint orange - tinted chips/badges     */
    --atms-flame: #C5462B;         /* deep orange - links/text on light (AA) */
    --atms-jade: #1C8C6A;          /* success                                */
    --atms-jade-mist: #E4F2EC;     /* success tint                           */
    --atms-berry: #C22B3D;         /* danger/error (sits with purple family) */
    --atms-berry-mist: #F9E7EA;    /* danger tint                            */

    /* ---- COLOUR ROLES (what components consume) -------------------------- */
    --atms-color-action: var(--atms-orange);          /* solid CTAs (white bold text >= 15px: large-text AA) */
    --atms-color-action-hover: var(--atms-orange-bright);
    --atms-color-action-active: var(--atms-flame);
    --atms-color-link: var(--atms-flame);             /* orange TEXT on light must be flame, never #FF5B38 (4.9:1 vs 3.1:1) */
    --atms-color-link-hover: var(--atms-orange);
    --atms-color-brand: var(--atms-purple);           /* headings, brand moments (9.1:1 on white) */
    --atms-text: var(--atms-ink);
    --atms-text-muted: #7A6F7E;                       /* purple-warmed secondary text (4.6:1 on white) */
    --atms-text-invert: #FFFFFF;
    --atms-bg-page: var(--atms-blush);
    --atms-bg-panel: #F5EDF2;                         /* replaces the #F4F4F4 slab */
    --atms-bg-card: #FFFFFF;
    --atms-border: #E9E1EC;
    --atms-border-strong: #D3C0D8;

    /* ---- TYPE -------------------------------------------------------------
       DM Sans is already self-hosted; it becomes the tokenised face.
       Roboto stragglers migrate to this token in Phase 2+. */
    --atms-font-sans: 'DM Sans', 'DM Sans-fallback', Arial, sans-serif;

    --atms-text-xs: 12px;     /* legal, meta            */
    --atms-text-sm: 13px;     /* captions, helper text  */
    --atms-text-base: 15px;   /* body                   */
    --atms-text-md: 17px;     /* lead body, tile titles */
    --atms-text-lg: 20px;     /* card headings          */
    --atms-text-xl: 24px;     /* section headings       */
    --atms-text-2xl: 30px;    /* page titles            */
    --atms-text-3xl: 38px;    /* hero (mobile)          */
    --atms-text-4xl: 48px;    /* hero (desktop)         */

    --atms-leading-tight: 1.15;   /* display sizes  */
    --atms-leading-snug: 1.3;     /* headings       */
    --atms-leading-body: 1.5;     /* body copy      */

    --atms-weight-regular: 400;
    --atms-weight-medium: 500;
    --atms-weight-bold: 700;
    --atms-weight-extrabold: 800;
    --atms-weight-black: 900;

    /* Eyebrow: the small uppercase section label (born on the brands page). */
    --atms-eyebrow-tracking: 0.12em;

    /* ---- SPACING (4px rhythm) --------------------------------------------- */
    --atms-space-1: 4px;
    --atms-space-2: 8px;
    --atms-space-3: 12px;
    --atms-space-4: 16px;
    --atms-space-5: 20px;
    --atms-space-6: 24px;
    --atms-space-7: 32px;
    --atms-space-8: 40px;
    --atms-space-9: 56px;
    --atms-space-10: 80px;

    /* ---- RADIUS ------------------------------------------------------------
       10px is the established house radius - kept on purpose (continuity is
       part of the brand). */
    --atms-radius-sm: 6px;     /* inputs, chips        */
    --atms-radius: 10px;       /* cards, panels, tiles */
    --atms-radius-lg: 16px;    /* hero panels, modals  */
    --atms-radius-pill: 999px; /* pills, toggles       */

    /* ---- ELEVATION (ink-tinted, never black) ------------------------------- */
    --atms-shadow-1: 0 1px 3px rgba(46, 16, 51, 0.10);
    --atms-shadow-2: 0 4px 16px rgba(46, 16, 51, 0.14);
    --atms-shadow-3: 0 12px 32px rgba(46, 16, 51, 0.18);

    /* ---- MOTION ------------------------------------------------------------ */
    --atms-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
    --atms-duration-fast: 150ms;
    --atms-duration: 350ms;

    /* ---- FOCUS ------------------------------------------------------------- */
    --atms-focus-ring: 3px solid var(--atms-peach);
}

/* ============================================================================
   PHASE-1 GLOBAL ADOPTIONS
   The only rules this sheet applies directly - tiny, layout-safe, reversible.
   Everything else consumes tokens component-by-component from Phase 2.
   ========================================================================== */

/* Text selection wears the brand. */
::selection {
    background: var(--atms-lavender);
    color: var(--atms-ink);
}

/* Native form controls (checkbox/radio/progress) adopt brand purple. */
html {
    accent-color: var(--atms-purple);
}

/* One consistent, visible keyboard focus everywhere (previously none). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: var(--atms-focus-ring);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --atms-duration-fast: 0ms;
        --atms-duration: 0ms;
    }
}