/* ============================================================
   HRC design tokens — single source of truth for the whole UI.
   Palette is pulled straight from the HR logo: black shell,
   gold door leaf, white ground.
   Typefaces are finalised in Module 7 (Design); the roles are
   declared here so nothing hardcodes a family later.
   ============================================================ */
:root {
    /* --- Colour --- */
    --ink:        #141414;   /* logo black — primary surface */
    --coal:       #232323;   /* raised surface on dark */
    --graphite:   #3A3A38;   /* borders on dark */
    --gold:       #EFA929;   /* logo gold — the single accent */
    --brass:      #C88A1E;   /* gold, pressed/hover */
    --gold-wash:  rgba(239, 169, 41, 0.12);
    --paper:      #FFFFFF;
    --mist:       #F4F4F2;   /* light surface */
    --stone:      #E3E3DF;   /* borders on light */
    --slate:      #6B6B67;   /* secondary text on light */
    --ash:        #9A9A96;   /* secondary text on dark */

    --ok:      #2E7D5B;
    --warn:    #B4801A;
    --error:   #B3392F;

    /* --- Type roles --- */
    --font-display: 'HRC Display', system-ui, sans-serif;   /* headlines, used sparingly */
    --font-body:    'HRC Body', system-ui, 'Segoe UI', Tahoma, sans-serif;
    --font-utility: ui-monospace, 'SF Mono', Menlo, monospace; /* specs, codes, dimensions */

    --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
    --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
    --step-1:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
    --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.3rem);
    --step-4:  clamp(2.7rem, 2rem + 3.5vw, 4.8rem);

    /* --- Space (4px base) --- */
    --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
    --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-12: 3rem;   --sp-16: 4rem;
    --sp-24: 6rem;   --sp-32: 8rem;

    /* --- Structure --- */
    --measure: 68ch;
    --shell:   min(100% - 2.5rem, 1280px);
    --radius:  2px;          /* doors are square-edged; so is the UI */
    --radius-lg: 4px;
    --hairline: 1px solid var(--stone);

    --shadow-1: 0 1px 2px rgba(20, 20, 20, 0.06), 0 4px 12px rgba(20, 20, 20, 0.04);
    --shadow-2: 0 2px 4px rgba(20, 20, 20, 0.08), 0 16px 40px rgba(20, 20, 20, 0.10);

    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 140ms;
    --dur:      240ms;
    --dur-slow: 520ms;
}

/* Direction-aware logical helpers — set once, used everywhere,
   so no RTL rule ever has to be written twice. */
[dir="rtl"] { --start: right; --end: left; }
[dir="ltr"] { --start: left;  --end: right; }

@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}