/* ==========================================================================
   DESIGN TOKENS — single source of truth for all styling in this project.
   ==========================================================================

   Author:  Arslan Sarwar portfolio
   Status:  DEFINED, NOT YET APPLIED. Nothing in the live site consumes this
            file yet; wiring it in is the next sprint. Loading it changes
            nothing on its own except making the Sora font available.

   HOW THIS WORKS
   --------------
   Two layers, and the rule is absolute:

     1. PRIMITIVES  — the raw values. Hex codes, rem sizes, ms, px.
                      This is the ONLY place a literal value may appear.
                      Named by scale position (gold-500, navy-900), never
                      by usage.

     2. SEMANTIC    — the tokens the rest of the project actually uses.
                      Named by ROLE (--text-body, --surface-card, --accent).
                      Every one points at a primitive with var(). No literals.

   Components (next sprint) consume ONLY semantic tokens. They never touch a
   primitive and never hardcode a value. That is what makes this the single
   source: to restyle the whole site you edit a primitive here, and every
   semantic token — and therefore every component — follows.

   Adding a value? Add the primitive first, then point a semantic token at it.
   Never let a raw value leak into the semantic layer or into a component.
   ========================================================================== */


/* --------------------------------------------------------------------------
   FONT — Sora, served locally (assets/fonts/sora/). Primary typeface.
   Weights: 400 regular · 500 medium · 600 semibold · 700 bold · 800 extrabold.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/sora/sora-latin-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/sora/sora-latin-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/sora/sora-latin-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/sora/sora-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Sora';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/sora/sora-latin-800.woff2') format('woff2');
}


:root {

    /* ======================================================================
       LAYER 1 — PRIMITIVES
       Raw values only. The single place literals are allowed.
       ====================================================================== */

    /* ---- Brand: gold accent -------------------------------------------- */
    /* Note: the codebase also contains a stray #fec644 (typo of gold-500);
       it collapses into --gold-500 when components adopt these tokens.      */
    --gold-400: #ffd76b;   /* lighter — hover / highlight                    */
    --gold-500: #fec544;   /* PRIMARY brand accent (87 uses site-wide)       */
    --gold-600: #e6ac2f;   /* darker — pressed / active                      */

    /* ---- Ink on gold (dark text that sits on an accent fill) ----------- */
    --gold-ink: #070d1b;

    /* ---- Navy: background & border ladder, deepest → lightest ---------- */
    --navy-950: #040a16;   /* deepest — page background                      */
    --navy-900: #070d1b;   /* surface — cards, panels                        */
    --navy-850: #0a101e;   /* surface, slightly raised                       */
    --navy-800: #101624;   /* subtle border / hairline                       */
    --navy-750: #151b29;   /* border                                         */
    --navy-700: #1a2236;   /* border, default                                */
    --navy-650: #232935;   /* border, strong                                 */
    --navy-600: #2a3346;   /* border, muted outline (secondary buttons)      */
    --navy-500: #3f4551;   /* hover overlay / scrim tint                     */

    /* ---- Neutral text ladder, brightest → dimmest ---------------------- */
    --black:     #000000;
    --white:     #ffffff;
    --slate-50:  #fdfeff;  /* near-white                                     */
    --slate-100: #e8eaf0;  /* emphasised body / quotes                       */
    --slate-200: #cfd3dc;  /* body text                                      */
    --slate-300: #ccd1dd;  /* body text over media                           */
    --slate-400: #a9adb8;  /* muted / secondary                              */
    --slate-500: #8f95a5;  /* tertiary                                       */
    --slate-600: #7f8595;  /* meta / captions / labels                       */

    /* ---- Feedback (fresh, accessible on the dark ground) --------------- */
    --green-500: #34c759;
    --red-500:   #ff5c5c;
    --amber-500: #ffb020;
    --blue-500:  #4c8dff;

    /* ---- RGB channels — for building rgb()/alpha compositing ----------- */
    /* Used where a token needs a variable opacity (scrims, glows, shadows). */
    --rgb-navy-950: 4 10 22;
    --rgb-navy-900: 7 13 27;
    --rgb-gold-500: 254 197 68;
    --rgb-black:    0 0 0;

    /* ---- Font families ------------------------------------------------- */
    --font-sans: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* ---- Font weights -------------------------------------------------- */
    --weight-regular:   400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-extrabold: 800;

    /* ---- Type scale (static rem ladder, ~1.25 major-third) ------------- */
    /* Semantic sizes below turn these into fluid clamp() ranges.           */
    --fs-3xs: 0.72rem;
    --fs-2xs: 0.8rem;
    --fs-xs:  0.875rem;
    --fs-sm:  0.9375rem;   /* 15px */
    --fs-md:  1rem;        /* 16px — base */
    --fs-lg:  1.125rem;    /* 18px */
    --fs-xl:  1.375rem;    /* 22px */
    --fs-2xl: 1.75rem;     /* 28px */
    --fs-3xl: 2.25rem;     /* 36px */
    --fs-4xl: 3rem;        /* 48px */
    --fs-5xl: 4rem;        /* 64px */
    --fs-6xl: 4.75rem;     /* 76px */

    /* ---- Line heights -------------------------------------------------- */
    --leading-none:    1;
    --leading-tight:   1.1;    /* big bold headings                         */
    --leading-snug:    1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.7;    /* body — comfortable reading                */
    --leading-loose:   1.85;

    /* ---- Letter spacing ------------------------------------------------ */
    --tracking-tighter: -0.03em;  /* display                                */
    --tracking-tight:   -0.015em; /* headings                               */
    --tracking-normal:  0;
    --tracking-wide:    0.02em;
    --tracking-wider:   0.1em;     /* eyebrow / uppercase label             */
    --tracking-widest:  0.2em;

    /* ---- Spacing scale (4px base) -------------------------------------- */
    --space-0:  0;
    --space-1:  0.25rem;   /* 4  */
    --space-2:  0.5rem;    /* 8  */
    --space-3:  0.75rem;   /* 12 */
    --space-4:  1rem;      /* 16 */
    --space-5:  1.25rem;   /* 20 */
    --space-6:  1.5rem;    /* 24 */
    --space-8:  2rem;      /* 32 */
    --space-10: 2.5rem;    /* 40 */
    --space-12: 3rem;      /* 48 */
    --space-16: 4rem;      /* 64 */
    --space-20: 5rem;      /* 80 */
    --space-24: 6rem;      /* 96 */
    --space-32: 8rem;      /* 128 */

    /* ---- Radii --------------------------------------------------------- */
    --radius-xs:     3px;
    --radius-sm:     6px;
    --radius-md:     10px;
    --radius-lg:     14px;
    --radius-xl:     20px;
    --radius-pill:   999px;
    --radius-circle: 50%;

    /* ---- Border widths ------------------------------------------------- */
    --border-width-hairline: 1px;
    --border-width-thick:    2px;
    --border-width-accent:   3px;

    /* ---- Shadows (tuned for the dark ground) --------------------------- */
    --shadow-sm: 0 2px 8px rgb(var(--rgb-black) / 0.30);
    --shadow-md: 0 8px 24px rgb(var(--rgb-black) / 0.40);
    --shadow-lg: 0 18px 40px rgb(var(--rgb-black) / 0.45);

    /* ---- Motion -------------------------------------------------------- */
    --duration-fast: 0.15s;
    --duration-base: 0.30s;
    --duration-slow: 0.60s;
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:   ease-in-out;

    /* ---- Z-index ladder ------------------------------------------------ */
    --z-base:    0;
    --z-raised:  10;
    --z-sticky:  100;
    --z-header:  1000;
    --z-overlay: 2000;
    --z-modal:   3000;
    --z-toast:   4000;

    /* ---- Layout widths ------------------------------------------------- */
    --width-container: 1200px;   /* default page container                  */
    --width-narrow:    1000px;   /* case-study pages                        */
    --width-reading:   860px;    /* blog post measure                       */

    /* ---- Breakpoints (reference only) ---------------------------------- */
    /* Custom properties CANNOT be used inside @media queries. These exist as
       the canonical numbers to hardcode in media queries and to read in JS. */
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;


    /* ======================================================================
       LAYER 2 — SEMANTIC
       Role-named. Every value is a var() onto a primitive. No literals.
       This is the layer components are allowed to use.
       ====================================================================== */

    /* ---- Surfaces / backgrounds ---------------------------------------- */
    --surface-page:    var(--navy-950);   /* body background                */
    --surface-base:    var(--navy-900);   /* cards, panels                  */
    --surface-raised:  var(--navy-850);   /* raised card / inset            */
    --surface-overlay: var(--navy-500);   /* hover tint                     */
    --surface-inverse: var(--white);

    /* ---- Borders (subtle → strong) ------------------------------------- */
    --border-subtle:  var(--navy-800);
    --border-default: var(--navy-700);
    --border-strong:  var(--navy-650);
    --border-muted:   var(--navy-600);    /* outline on secondary buttons   */

    /* ---- Text ---------------------------------------------------------- */
    --text-strong:     var(--white);      /* headings                       */
    --text-heading:    var(--white);
    --text-body:       var(--slate-200);  /* default paragraph text         */
    --text-body-quiet: var(--slate-300);  /* body over imagery              */
    --text-muted:      var(--slate-400);  /* secondary                      */
    --text-subtle:     var(--slate-600);  /* meta, captions, labels         */
    --text-accent:     var(--gold-500);
    --text-on-accent:  var(--gold-ink);   /* text on a gold fill            */
    --text-link:       var(--gold-500);
    --text-link-hover: var(--gold-400);

    /* ---- Accent -------------------------------------------------------- */
    --accent:          var(--gold-500);
    --accent-hover:    var(--gold-400);
    --accent-active:   var(--gold-600);
    --accent-contrast: var(--gold-ink);

    /* ---- Feedback ------------------------------------------------------ */
    --success: var(--green-500);
    --danger:  var(--red-500);
    --warning: var(--amber-500);
    --info:    var(--blue-500);

    /* ---- Focus ring ---------------------------------------------------- */
    --focus-ring:       0 0 0 3px rgb(var(--rgb-gold-500) / 0.45);
    --focus-ring-color: var(--gold-500);

    /* ---- Scrim (image → surface gradient used on media cards) ---------- */
    --scrim-strong: rgb(var(--rgb-navy-900) / 0.95);
    --scrim-soft:   rgb(var(--rgb-navy-900) / 0.55);
    --scrim-clear:  rgb(var(--rgb-navy-900) / 0.12);

    /* ---- Typography roles ---------------------------------------------- */
    /* Families & weights by role. Bold, high-contrast hierarchy: headings
       are extrabold and tightly tracked so they read as headings, body is
       relaxed for comfortable reading. This is the "forces you to read"
       contrast — big confident heads, airy body, nothing in between.       */
    --font-heading:        var(--font-sans);
    --font-body:           var(--font-sans);
    --weight-heading:      var(--weight-extrabold);
    --weight-heading-soft: var(--weight-bold);
    --weight-body:         var(--weight-regular);
    --weight-body-strong:  var(--weight-semibold);
    --weight-eyebrow:      var(--weight-semibold);

    /* Fluid sizes — clamp(min, preferred, max), min/max drawn from the
       primitive ladder so the whole scale still traces back to primitives. */
    --text-display: clamp(var(--fs-4xl), 4vw + 1rem,    var(--fs-6xl));
    --text-h1:      clamp(var(--fs-3xl), 3vw + 1rem,    var(--fs-5xl));
    --text-h2:      clamp(var(--fs-2xl), 2vw + 0.75rem, var(--fs-4xl));
    --text-h3:      clamp(var(--fs-xl),  1vw + 0.75rem, var(--fs-2xl));
    --text-h4:      clamp(var(--fs-lg),  0.5vw + 0.9rem, var(--fs-xl));
    --text-lead:    var(--fs-lg);         /* intro paragraph                */
    --text-base:    var(--fs-md);         /* body                           */
    --text-small:   var(--fs-sm);
    --text-caption: var(--fs-2xs);
    --text-overline: var(--fs-3xs);       /* eyebrow / uppercase label      */

    /* Line-height by role                                                  */
    --leading-display: var(--leading-tight);
    --leading-heading: var(--leading-tight);
    --leading-body:    var(--leading-relaxed);

    /* Tracking by role                                                     */
    --tracking-display: var(--tracking-tighter);
    --tracking-heading: var(--tracking-tight);
    --tracking-body:    var(--tracking-normal);
    --tracking-eyebrow: var(--tracking-wider);

    /* Composite `font:` shorthands — drop straight into a font property.
       e.g.  h1 { font: var(--typo-h1); }  (remember: the shorthand also
       resets letter-spacing, so pair with the matching --tracking-* token). */
    --typo-display: var(--weight-heading) var(--text-display)/var(--leading-display) var(--font-heading);
    --typo-h1:      var(--weight-heading) var(--text-h1)/var(--leading-heading) var(--font-heading);
    --typo-h2:      var(--weight-heading) var(--text-h2)/var(--leading-heading) var(--font-heading);
    --typo-h3:      var(--weight-heading-soft) var(--text-h3)/var(--leading-heading) var(--font-heading);
    --typo-h4:      var(--weight-heading-soft) var(--text-h4)/var(--leading-snug) var(--font-heading);
    --typo-lead:    var(--weight-body) var(--text-lead)/var(--leading-body) var(--font-body);
    --typo-body:    var(--weight-body) var(--text-base)/var(--leading-body) var(--font-body);
    --typo-small:   var(--weight-body) var(--text-small)/var(--leading-normal) var(--font-body);

    /* Readability guardrail — cap line length so body never becomes a wall */
    --measure: 62ch;

    /* ---- Layout rhythm ------------------------------------------------- */
    /* Side gutter: never below 16px, grows with the viewport.              */
    --gutter: clamp(1rem, 4vw, 2rem);
    --section-padding-y: clamp(3rem, 8vw, 6rem);

    /* ---- Component semantics (shared card / button surface) ------------ */
    --card-bg:       var(--surface-base);
    --card-border:   var(--border-subtle);
    --card-radius:   var(--radius-lg);
    --card-padding:  var(--space-6);
    --card-shadow-hover: var(--shadow-lg);

    --control-radius:  var(--radius-sm);
    --control-padding: var(--space-3) var(--space-6);

    /* ---- Transitions (ready-made) -------------------------------------- */
    --transition-colors: color var(--duration-base) var(--ease-standard),
                         background-color var(--duration-base) var(--ease-standard),
                         border-color var(--duration-base) var(--ease-standard);
    --transition-transform: transform var(--duration-base) var(--ease-out);
}


/* --------------------------------------------------------------------------
   Motion preference — respected at the token level so anything reading the
   transition/duration tokens goes still for users who ask for reduced motion.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0.01ms;
        --duration-base: 0.01ms;
        --duration-slow: 0.01ms;
        --transition-colors: none;
        --transition-transform: none;
    }
}