/* ============================================================
   Tokens — single source of truth.
   Every colour, font, space, ease, motion, glass recipe in the
   project flows from here. Aligned to the institutional brief.
   ============================================================ */

:root {

  /* ============================================================
     COLOUR
     Base is bluish-grey dark. Never pure black, never pure white.
     Pearl is a warm off-white — institutional, restrained, never
     clinical. Navy is sampled from the fish silhouette in the
     Freesia logo, teal from the lotus (use teal sparingly — it
     is the accent of accents).
     ============================================================ */
  --abyssal:          #0a0f1a;
  --deep:             #131a26;
  --surface:          #1a2330;
  --surface-elevated: #222d3d;

  --pearl:            #f5f3ee;
  --pearl-muted:      #c8c5be;
  --pearl-quiet:      #8a8780;

  --navy:             #1e3a8a;
  --teal:             #2d8576;

  /* Legacy aliases — existing components reference these. Mapped
     onto the new palette so a single edit sweep moves the site. */
  --color-bg:           var(--abyssal);
  --color-bg-elevated:  var(--surface);
  --color-text:         var(--pearl);
  --color-text-muted:   var(--pearl-muted);
  --color-text-subtle:  var(--pearl-quiet);
  --color-divider:      color-mix(in srgb, var(--pearl) 12%, transparent);
  --color-brand:        var(--navy);
  --color-brand-hover:  var(--teal);
  --color-overlay:      color-mix(in srgb, var(--abyssal) 55%, transparent);


  /* ============================================================
     TYPOGRAPHY
     Editorial New (display, by Pangram Pangram via Fontshare) +
     General Sans (humanist sans, by Indian Type Foundry via
     Fontshare). Both load via /index.html <link> elements.
     ============================================================ */
  --font-display: "Editorial New", "GT Sectra", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-sans:    "General Sans", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* Editorial New also serves numerics — its italics carry hand-set tabular figures. */
  --font-numeric: "Editorial New", "Fraunces", Georgia, serif;

  /* Type scale (brief §3.2) — mobile-first, scales fluidly. */
  --type-display-xl: clamp(3.5rem, 8vw,  7.5rem);   /* hero headline */
  --type-display-l:  clamp(2.5rem, 5vw,  4.5rem);   /* section titles */
  --type-display-m:  clamp(1.75rem, 3vw, 2.5rem);   /* sub-section titles */
  --type-body-l:     1.125rem;
  --type-body:       1rem;
  --type-eyebrow:    0.75rem;
  --type-caption:    0.875rem;

  /* Legacy aliases mapped onto the new scale. */
  --fs-xs:    var(--type-eyebrow);
  --fs-sm:    var(--type-caption);
  --fs-base:  var(--type-body);
  --fs-md:    var(--type-body-l);
  --fs-lg:    var(--type-display-m);
  --fs-xl:    calc(var(--type-display-m) * 1.2);
  --fs-2xl:   var(--type-display-l);
  --fs-3xl:   var(--type-display-xl);
  --fs-hero:  var(--type-display-xl);
  --fs-stat:  var(--type-display-l);
  --fs-tag:   var(--type-display-m);

  --lh-display: 1.05;
  --lh-tight:   1.2;
  --lh-ui:      1.3;
  --lh-body:    1.7;

  --tr-tight:    -0.04em;   /* largest display */
  --tr-display:  -0.02em;   /* general display */
  --tr-normal:   0;
  --tr-label:    0.15em;
  --tr-eyebrow:  0.18em;


  /* ============================================================
     SPACING — 8px grid (brief §3.3)
     Canonical scale: 4 8 16 24 32 48 64 96 128 192 256.
     ============================================================ */
  --space-0_5: 0.25rem;     /* 4  */
  --space-1:   0.5rem;      /* 8  */
  --space-2:   1rem;        /* 16 */
  --space-3:   1.5rem;      /* 24 */
  --space-4:   2rem;        /* 32 */
  --space-6:   3rem;        /* 48 */
  --space-8:   4rem;        /* 64 */
  --space-12:  6rem;        /* 96 */
  --space-16:  8rem;        /* 128 */
  --space-24:  12rem;       /* 192 */
  --space-32:  16rem;       /* 256 */

  /* Legacy aliases. */
  --space-5:   2.5rem;
  --space-10:  5rem;

  --container-max:  1440px;
  --container-pad:  clamp(2rem, 5vw, 6rem);
  --section-pad-y:  clamp(6rem, 12vw, 12rem);
  --reading-max:    66ch;

  --section-y:      var(--section-pad-y);
  --gutter-x:       var(--container-pad);
  --content-max:    var(--container-max);


  /* ============================================================
     MOTION (brief §3.4)
     Never use default ease / ease-in-out.
     ============================================================ */
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);

  /* Legacy aliases. */
  --ease-hero:   var(--ease-in-out-cubic);
  --ease-out:    var(--ease-out-expo);
  --ease-micro:  var(--ease-out-expo);
  --ease-in:     cubic-bezier(0.55, 0, 1, 0.45);

  --dur-instant: 120ms;
  --dur-micro:   240ms;
  --dur-short:   360ms;
  --dur-base:    600ms;
  --dur-long:    900ms;
  --dur-hero:    1200ms;
  --dur-count:   1800ms;
  --dur-fade:    1500ms;


  /* ============================================================
     GLASS — three variants (brief §3.5)
     Whisper (header, nav)
     Card    (content cards, metric tiles, contact cards)
     Modal   (overlays, expanded states)
     Each glass surface gets a 1px top inner highlight — applied
     via a ::before pseudo in pages.css.
     ============================================================ */

  /* Whisper — almost invisible, earns its presence on scroll. */
  --glass-whisper-bg:     color-mix(in srgb, var(--abyssal) 60%, transparent);
  --glass-whisper-filter: blur(12px) saturate(140%);
  --glass-whisper-border: 1px solid color-mix(in srgb, var(--pearl) 8%, transparent);

  /* Card — workhorse content surface. */
  --glass-card-bg:        color-mix(in srgb, var(--surface) 50%, transparent);
  --glass-card-filter:    blur(20px) saturate(160%);
  --glass-card-border:    1px solid color-mix(in srgb, var(--pearl) 6%, transparent);
  --glass-card-shadow:    0 24px 64px -16px rgba(0, 0, 0, 0.40);

  /* Modal — overlays, full-screen surfaces. */
  --glass-modal-bg:       color-mix(in srgb, var(--deep) 70%, transparent);
  --glass-modal-filter:   blur(32px) saturate(180%);
  --glass-modal-border:   1px solid color-mix(in srgb, var(--pearl) 10%, transparent);

  /* Inner top-edge highlight (the magic detail). */
  --glass-highlight:      linear-gradient(90deg,
                            transparent 0%,
                            color-mix(in srgb, var(--pearl) 30%, transparent) 50%,
                            transparent 100%);


  /* ============================================================
     LAYOUT CHROME
     ============================================================ */
  --header-h:        72px;
  --header-h-mobile: 60px;
  --hairline:        1px;


  /* ============================================================
     Z-INDEX
     Note: do NOT use negative z-index on position:fixed background
     layers. Safari and some mobile browsers render negatively-
     stacked fixed elements behind the document's background-color,
     which hides them entirely. Bg layer uses z-index 0 and content
     uses z-index 1+ so layering is portable across every browser.
     ============================================================ */
  --z-bg:       0;
  --z-grain:    1;
  --z-content:  2;
  --z-header:  50;
  --z-overlay: 90;
  --z-modal:  100;
}

@media (max-width: 640px) {
  :root {
    --type-body:    0.9375rem;
    --fs-base:      0.9375rem;
  }
}

/* Reduced motion — keep functionality, kill long durations.
   Brief §8: respects prefers-reduced-motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro:   120ms;
    --dur-short:   140ms;
    --dur-base:    160ms;
    --dur-long:    160ms;
    --dur-hero:    160ms;
    --dur-count:    1ms;
    --dur-fade:    160ms;
  }
}