/* css/tokens.css — UI_SPEC v1.0.2 token foundation (M-0, UISPEC Phase 3).
 *
 * SPECIFY+WIRE. This file DEFINES every ratified UI_SPEC dimension as a CSS custom property.
 * M-0 is FOUNDATION ONLY: no surface consumes these tokens yet, so loading this file is
 * visually INERT (proven — zero consumers of the spec namespace at M-0). Surface migration
 * (surfaces switching literals -> var()) is M-2 through M-6.
 *
 * Drift between this file and the spec is caught by scripts/uispec-token-census.cjs, which
 * parses docs/UI_SPEC.md (version-pinned to v1.0.2) and fails on any missing/mismatch/extra.
 *
 * The rd-* layer (css/redesign-tokens.css) is UNTOUCHED by design; its retirement is M-2. The
 * shadow literals below are byte-identical to that layer's --rd-shadow / --rd-shadow-lift
 * (spec R-1), so the two files agree without either consuming the other.
 *
 * Four dimensions carry PROPOSED token names — the spec ratified their VALUES but not their
 * NAMES (font family, weights, line-heights, breakpoints). Names queued for spec amendment
 * v1.0.3; until then the census tracks them as a named-expectation block.
 */
:root {
    /* -- §2.1 COLOUR · Tier 1 · brand (owner-confirmed) ------------------------------- */
    --c-purple: #4F008C;
    --c-red:    #FF375E;
    --c-yellow: #FFDD40;
    --c-orange: #FF6A39;
    --c-green:  #00C48C;
    --c-teal:   #1BCED8;
    --c-lilac:  #A54EE1;
    --c-gray:   #8E9AA0;

    /* -- §2.1 COLOUR · Tier 2 · text & surface --------------------------------------- */
    --c-ink:   #1D252D;
    --c-muted: #5B6770;
    --c-bg:    #F6F6F9;
    --c-line:  #E4E6EA;
    --c-white: #FFFFFF;

    /* -- §2.1 COLOUR · Tier 3 · semantic aliases (no new colour — names -> brand) ----- */
    --status-success: var(--c-green);
    --status-danger:  var(--c-red);
    --status-warning: var(--c-yellow);
    --status-info:    var(--c-teal);

    /* -- §2.1 COLOUR · Tier 4 · status tints (drafted; final look confirmed at M-2 V) - */
    --tint-success: #DFF7EE;
    --tint-danger:  #FFE3E9;
    --tint-warning: #FFF5D6;
    --tint-info:    #DFF8FA;
    --tint-success-ink: #00795A;
    --tint-danger-ink:  #C01536;
    --tint-warning-ink: #8A6D00;
    --tint-info-ink:    #0E7490;

    /* -- §3 TYPOGRAPHY · family (PROPOSED name --font-base; value per spec, ratify v1.0.3) */
    --font-base: 'STC Forward', 'Tajawal', sans-serif;

    /* -- §3 TYPOGRAPHY · scale · 9 steps (R-3) --------------------------------------- */
    --fs-0: 10px;
    --fs-1: 12px;
    --fs-2: 13px;
    --fs-3: 14px;
    --fs-4: 16px;
    --fs-5: 18px;
    --fs-6: 20px;
    --fs-7: 24px;
    --fs-8: 32px;

    /* -- §3 TYPOGRAPHY · weights (PROPOSED names --fw-*; values per spec, ratify v1.0.3) */
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-bold:      700;
    --fw-extrabold: 800;

    /* -- §3 TYPOGRAPHY · line-heights (PROPOSED names --lh-*; values per spec, ratify v1.0.3) */
    --lh-heading: 1.2;
    --lh-body:    1.5;
    --lh-kpi:     1;

    /* -- §4 SPACING · 4px grid, 9 steps ---------------------------------------------- */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 32px;
    --sp-8: 40px;
    --sp-9: 48px;

    /* -- §5 RADII -------------------------------------------------------------------- */
    --r-control: 6px;
    --r-card:    10px;
    --r-panel:   14px;
    --r-pill:    999px;

    /* -- §6 ELEVATION · ratified two-layer literals (R-1) ---------------------------- */
    --sh-sm: 0 1px 2px rgba(22,20,40,0.04), 0 4px 16px rgba(22,20,40,0.05);
    --sh-md: 0 1px 3px rgba(29,37,45,.07), 0 4px 14px rgba(29,37,45,.05);
    --sh-lg: 0 4px 8px rgba(29,37,45,.08), 0 10px 24px rgba(29,37,45,.09);

    /* -- §7 Z-INDEX · 5 bands -------------------------------------------------------- */
    --z-base:     0;
    --z-sticky:   100;
    --z-dropdown: 500;
    --z-overlay:  1000;
    --z-toast:    2000;

    /* -- §8 CONTROLS · 3 visual heights (effective touch target >=44 is M-3/M-4 work) - */
    --h-compact: 32px;
    --h-default: 38px;
    --h-cta:     44px;

    /* -- §10 MOTION · 3 durations + brand easing ------------------------------------- */
    --t-fast: 150ms;
    --t-med:  250ms;
    --t-slow: 400ms;
    --ease-brand: cubic-bezier(0.16,1,0.3,1);

    /* -- §9 BREAKPOINTS · PROPOSED names --bp-*; values per spec, ratify v1.0.3 -------
     * LIMITATION: CSS custom properties CANNOT be used inside @media query conditions.
     * These tokens exist for JS / container-query consumers and as the M-6 literal-gate
     * referent; the 640/768/1024 literals stay literal in @media until a build step or
     * an M-6 exemption. They do NOT and cannot drive @media directly. */
    --bp-phone:   640px;
    --bp-tablet:  768px;
    --bp-desktop: 1024px;
}