/* ==========================================================================
   BRILLIΛNTZ: Design tokens
   Single source for colour, type, spacing, grid, container and motion.
   Nothing in base.css or components.css should hard-code these values.
   ========================================================================== */

:root {

  /* --- COLOUR ------------------------------------------------------------
     PROVISIONAL. Production Specification s.22 lists exact production colour
     values as unverified. Values below are sampled from the approved mock so
     the template renders truthfully. Replace once finalised for screen+print.
     --------------------------------------------------------------------- */
  --c-ink:          #181817;   /* near-black, primary text + primary button  */
  --c-warm-white:   #FAF9F6;   /* page ground                                */
  --c-paper:        #F1F0EB;   /* quiet secondary surface, alternating       */
                               /* sections. NOT the page ground: that stays  */
                               /* --c-warm-white.                            */
  --c-yellow:       #FCD821;   /* Brilliantz Yellow, signature accent        */

  --c-ink-60:       rgba(24, 24, 23, 0.60);
  --c-ink-45:       rgba(24, 24, 23, 0.45);
  --c-rule:         rgba(24, 24, 23, 0.14);
  --c-rule-soft:    rgba(24, 24, 23, 0.08);
  --c-rule-reverse: rgba(250, 249, 246, 0.28);

  /* Campaign fields. PROVISIONAL.
     Spec s.5: secondary colours belong to the idea, never mapped permanently
     to a service category. These are per-slide, set in js/hero.js.          */
  --c-field-green:   #1E4D3A;
  --c-field-cobalt:  #1B3FD1;
  --c-field-red:     #A51E22;   /* Hero 04 campaign field */
  --c-brilliantz-red:#C8102E;   /* the line in Follow the Problem */

  /* Hero 04 environmental lighting. Kept as tokens so the campaign field and
     its light layers can be retuned together. Values are unchanged. */
  --c-glow-warm:     rgba(255, 188, 60, .22);
  --c-glow-warm-mid: rgba(255, 108, 30, .12);
  --c-glow-pool:     rgba(255, 140, 45, .20);
  --c-glow-pool-mid: rgba(180, 35, 20, .09);
  --c-glow-cool:     rgba(150, 205, 255, .16);
  --c-glow-cool-mid: rgba(90, 160, 255, .07);
  --c-shadow-ground: rgba(55, 0, 0, .20);
  --c-shadow-warm:   rgba(255, 125, 30, .08);
  --c-ivory-78:      rgba(250, 249, 246, .78);
  --c-ivory-35:      rgba(250, 249, 246, .35);
  --c-ivory:         #F6F1E8;   /* warm foreground on the red field, 6.65:1 */

  /* Entry-point fields. PROVISIONAL, sampled from the approved mock.
     Flat colour blocks, deliberately not cards: no radius, no shadow. */
  --c-entry-made:    #EDE4D8;
  --c-entry-process: #D6E8D8;
  --c-entry-ai:      #D9E3F0;

  /* --- TYPEFACES ---------------------------------------------------------
     Newsreader: display + editorial. General Sans: body, nav, labels.
     Licensing/self-hosting is on the s.22 verification list. Loaded from CDN
     here for template purposes only.
     --------------------------------------------------------------------- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:    "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* --- TYPE SCALE (UI Spec s.5) ----------------------------------------- */
  --t-hero:      clamp(56px, 6.5vw, 104px);
  --t-h1:        clamp(48px, 5vw,   80px);
  --t-h2:        clamp(36px, 3.5vw, 56px);
  --t-h3:        clamp(26px, 2.2vw, 36px);

  --t-body-lg:   clamp(19px, 1.35vw, 22px);
  --t-body:      clamp(17px, 1.1vw,  18px);
  --t-small:     15px;
  --t-eyebrow:   12.5px;

  --lh-display:  1.0;
  --lh-body-lg:  1.45;
  --lh-body:     1.55;
  --lh-tight:    1.2;

  --tracking-eyebrow: 0.14em;
  --tracking-display: -0.015em;

  /* --- SPACING (8px rhythm, UI Spec s.4) -------------------------------- */
  --s-4: 4px;    --s-8: 8px;    --s-12: 12px;  --s-16: 16px;
  --s-24: 24px;  --s-32: 32px;  --s-48: 48px;  --s-64: 64px;
  --s-80: 80px;  --s-96: 96px;  --s-128: 128px;

  --section-pad:         clamp(80px, 8vw, 128px);
  --section-pad-compact: clamp(48px, 5vw, 72px);

  /* --- GRID + CONTAINER (UI Spec s.3) ----------------------------------- */
  --container-max: 1440px;
  --gutter:        64px;
  --col-count:     12;
  --col-gap:       24px;

  --measure:       64ch;   /* editorial text measure, 56-68ch */

  /* --- RADIUS + MOTION -------------------------------------------------- */
  --radius-pill:   999px;
  --radius-sm:     2px;
  --radius-md:     12px;   /* form controls */

  --ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:      160ms;
  --dur:           320ms;
  --dur-slow:      600ms;
  --hero-interval: 7000ms;  /* spec: 6-8s automatic rotation */

  --z-header: 100;
  --header-h: 96px;
}

/* --- TABLET, 768-1279 ---------------------------------------------------- */
@media (max-width: 1279px) {
  :root {
    --gutter:    32px;
    --col-count: 8;
    --col-gap:   20px;
    --section-pad: clamp(72px, 7vw, 96px);
  }
}

/* --- MOBILE, below 768 --------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --gutter:    20px;
    --col-count: 4;
    --col-gap:   16px;
    --section-pad: clamp(56px, 9vw, 72px);
    --header-h: 72px;
  }
}