/* ============================================================
   MARZAL LABS — DESIGN TOKENS

   Visual language follows the enterprise Data/AI reference
   pattern (anblicks.com): near-black ink on pure white, Poppins
   set light at display sizes, Inter for body, pill buttons,
   8px card radius, and colour used categorically rather than
   decoratively.

   The structure is the contract. Override the BRAND LAYER only.
   Never hardcode a colour, size or spacing value in component CSS.
   ============================================================ */

:root {

  /* ---- BRAND LAYER ------------------------------------------
     Ink      near-black navy — the dominant dark surface
     Paper    pure white
     Accent   Marzal teal, darkened to carry text on white.
              This is the one thing we do not take from the
              reference palette: it is what keeps the site
              Marzal rather than a copy.
     ---------------------------------------------------------- */
  --brand-ink:     #00071A;
  --brand-paper:   #FFFFFF;
  --brand-accent:  #117166;   /* 5.87:1 on white, 4.69:1 on its own wash */
  --brand-muted:   #6B6880;

  /* Light tint used only on ink surfaces, where the deep accent
     cannot reach 4.5:1. Same hue — not a second accent. */
  --brand-accent-light: #5FC9B6;

  --font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- SEMANTIC COLOUR ---- */
  --c-ink:           #222541;            /* headings */
  --c-body:          #2C2B3D;            /* body copy */
  --c-ink-soft:      #43415A;
  --c-ink-faint:     var(--brand-muted); /* 4.66:1 on white */
  --c-paper:         var(--brand-paper);
  --c-paper-alt:     #F4F4F8;
  --c-surface-dark:  var(--brand-ink);
  --c-surface-dark-2:#0B1226;

  --c-accent:        var(--brand-accent);
  --c-accent-hover:  #0C5A50;
  --c-accent-wash:   rgba(17, 113, 102, .10);

  --c-border:        #E3E2EB;
  --c-border-strong: #D3D1DE;

  /* On dark surfaces */
  --c-on-ink:          #FFFFFF;
  --c-on-ink-soft:     rgba(255, 255, 255, .76);
  --c-on-ink-faint:    rgba(255, 255, 255, .58);
  --c-accent-on-ink:   var(--brand-accent-light);
  --c-border-on-ink:   rgba(255, 255, 255, .18);

  /* ---- CATEGORY HUES ----------------------------------------
     Used categorically — chip fills at 12–16% and their own text
     colour. Each text value is verified >= 4.5:1 against its own wash
     composited over the darkest panel background (#F4F4F8).
     ---------------------------------------------------------- */
  --cat-1: #7030CB;  --cat-1-wash: rgba(112, 48, 203, .12);
  --cat-2: #0E7556;  --cat-2-wash: rgba(50, 203, 143, .16);
  --cat-3: #0060CD;  --cat-3-wash: rgba(1, 122, 255, .12);
  --cat-4: #8A5A00;  --cat-4-wash: rgba(255, 170, 0, .16);
  --cat-5: #A32AA3;  --cat-5-wash: rgba(199, 46, 199, .12);
  --cat-6: #C0161B;  --cat-6-wash: rgba(224, 31, 39, .12);

  /* ---- AURORA ------------------------------------------------
     Large soft colour washes, used only behind photography and as
     the hero CTA's ring. Never text, never a UI state, never a
     category. The hues are the brand accent plus two taken from the
     category ramp, so the palette stays closed.

     Solid values drive the ring; the veils drive the washes.
     ---------------------------------------------------------- */
  --c-aurora-1:       var(--brand-accent);
  --c-aurora-2:       var(--cat-1);
  --c-aurora-3:       var(--cat-6);
  --c-aurora-veil-1:  rgba(17, 113, 102, .62);
  --c-aurora-veil-2:  rgba(168, 44, 208, .62);
  --c-aurora-veil-3:  rgba(232, 62, 46, .58);

  /* Soft blue radial carried by the light bands. */
  --c-wash-blue:      rgba(1, 122, 255, .09);
  --c-wash-violet:    rgba(112, 48, 203, .06);

  /* Sheen — a light watermark laid diagonally across hero photography.
     White only, no hue, and it fades out before it reaches the copy so
     the headline keeps its contrast. */
  --c-sheen:      rgba(255, 255, 255, .24);
  --c-sheen-soft: rgba(255, 255, 255, .10);


  /* ---- TYPE SCALE -------------------------------------------
     Display sizes run at weight 400. The airiness at large sizes
     is the single most recognisable trait of this pattern —
     do not bold the headlines.
     ---------------------------------------------------------- */
  --fs-hero:    clamp(2.25rem, 4vw, 3.375rem);
  --fs-h2:      clamp(1.875rem, 3.2vw, 3rem);
  --fs-h3:      1.5rem;
  --fs-h4:      1.25rem;
  --fs-lead:    1.125rem;
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.875rem;
  --fs-eyebrow: 0.8125rem;
  --fs-metric:  clamp(2.75rem, 4.4vw, 3.75rem);

  --fw-display: 400;   /* headlines — deliberately light */
  --fw-mid:     500;
  --fw-strong:  600;

  --lh-tight:   1.2;
  --lh-mid:     1.45;
  --lh-body:    1.55;
  --ls-tight:   -0.01em;
  --ls-eyebrow: 0.08em;

  --measure-prose: 68ch;
  --measure-card:  46ch;

  /* ---- SPACING (8px base) ---- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px;  --s-10: 128px;

  --sec-pad-block: clamp(3.75rem, 6.5vw, 6.5rem);
  --gutter:        clamp(1.25rem, 4vw, 2.5rem);
  --wrap:          1275px;
  --wrap-wide:     1440px;

   /* ---- SHAPE — square section boundaries, restrained cards ---- */
  --radius-btn:   999px;
   --radius-panel: 0;
   --radius-card:  8px;
   --radius-sm:   8px;
  --radius-chip: 999px;
  --hairline:    1px;

  /* ---- MOTION — three types only ---- */
  --ease:       cubic-bezier(.2, .6, .2, 1);
  --dur-hover:  140ms;
  --dur-reveal: 400ms;
  --dur-slide:  700ms;
  --stagger:    60ms;

  /* ---- ELEVATION — restrained ---- */
  --shadow-card: 0 1px 2px rgba(0, 7, 26, .05);
  --shadow-lift: 0 14px 40px rgba(0, 7, 26, .10);

  /* ---- CHROME ---- */
  --util-h: 36px;
  --nav-h:  84px;

  --z-header: 100;
  --z-mega:   90;
  --z-drawer: 110;
}