/* ==========================================================================
   iPattern — shared design tokens
   Source of truth: Claude Design export "About Me page design" (About Me.dc.html)
   Every page imports this file first. No external CDNs: fonts are self-hosted
   from /fonts (Google Fonts woff2 builds, all SIL Open Font License).
   ========================================================================== */

/* ---------- Self-hosted fonts ------------------------------------------- */
/* Display — used by the design (default displayFont = Orbitron, variable 400–900) */
/* ---- the two site faces. Same declarations in hub.css; if you change one,
        change all three. Sans and mono are synced across every page. ---- */
@font-face {
  font-family: "Space Grotesk";
  src: url("/assets/fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}
/* Body — Plus Jakarta Sans (variable 200–800; design uses 400/500/600/700) */
/* Mono — IBM Plex Mono (data/labels on the AI-Trade + SOC pages; not in the About design) */
/* Alternate display faces offered by the design's "displayFont" prop (unused unless --font-display is switched;
   browsers do not download a declared face until it is used) */

/* ---------- Tokens ------------------------------------------------------ */
:root{
  /* Palette — milky-white ground, dark-teal ink (light theme, site-wide).
     The original dark palette (#04231f / #eafffb / #9ffcff) is kept in the comment
     block below; every neutral below is derived, so swapping these three flips the site. */
  --bg:#fbfbf9;                 /* page ground — milky white */
  --ink:#04231f;                /* primary text — the old ground colour, now the ink */
  --accent:#0b7268;             /* deep teal accent — 5.9:1 on the milky ground (AA for small text) */
  --bg-rgb:251,251,249;         /* rgba(var(--bg-rgb), a) — the design's fade/vignette layers */
  --ink-rgb:4,35,31;
  --accent-rgb:11,114,104;       /* rgba(var(--accent-rgb), a) — tints, glows, hairlines */
  --bg-deep:#eceae4;            /* the "deeper ground" gradients (header/status plates) */
  --bg-deep-rgb:236,234,228;
  --shade:#ffffff;              /* text-shadow plate behind hero copy — light, not dark, now */
  --shade-rgb:255,255,255;
  --accent-2:#1aa3a8;           /* secondary teal */
  --accent-2-rgb:26,163,168;
  --success:#0f766e;            /* toast check-mark stroke */
  --white-rgb:255,255,255;

  /* Derived neutrals — exactly as the design mixes them (oklab, ink over bg) */
  --muted:color-mix(in oklab, var(--ink) 66%, var(--bg));
  --faint:color-mix(in oklab, var(--ink) 60%, var(--bg));
  --soft:color-mix(in oklab, var(--ink) 72%, var(--bg));
  --sep:color-mix(in oklab, var(--ink) 22%, var(--bg));
  --line:color-mix(in oklab, var(--ink) 11%, var(--bg));
  --line2:color-mix(in oklab, var(--ink) 7%, var(--bg));
  /* Additional derived surfaces used by the showcase / case pages (same mixing rule) */
  --surface:color-mix(in oklab, var(--ink) 5%, var(--bg));
  --accent-soft:color-mix(in oklab, var(--accent) 60%, var(--ink));
  --accent-dim:color-mix(in oklab, var(--accent) 55%, var(--bg));
  /* Status colours (carried over from the AI-Trade / SOC pages — semantic, not palette) */
  --amber:#a86a12;
  --red:#c33c3c;
  --amber-rgb:168,106,18;
  --red-rgb:195,60,60;

  /* Original dark palette (pre-2026-08 site theme), kept for reference:
     --bg:#04231f; --ink:#eafffb; --accent:#9ffcff; --bg-deep:#021210; --shade:#031815;
     --amber:#F2CE7B; --red:#FF9B9B;
     Alternate palettes offered by the design's palette picker:
     [#0e2a4a, #eaf3ff, #67f2ff]  [#241d4a, #f1ecff, #8f7ae8]  [#4a2038, #ffeef7, #f59ad2] */

  /* Typography */
  --font-display:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;   /* was Orbitron; its woff2 is still in /assets/fonts if you revert */               /* design --display-font (alternates: 'Michroma', 'Chakra Petch') */
  --font-body:"Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --display-font:var(--font-display);                  /* design's original variable name, kept as alias */

  /* Fluid type scale (design values, verbatim) */
  --logo:clamp(1.35rem, 1.2vw + 0.9rem, 2.1rem);
  --logo-deg:clamp(0.65rem, 0.4vw + 0.45rem, 0.9rem);
  --nav:clamp(0.65rem, 0.35vw + 0.5rem, 0.875rem);
  --headline:clamp(1.28rem, 1.79vw + 1.62vh, 2.64rem);
  --body:clamp(0.7rem, 0.35vw + 0.55rem, 0.9rem);
  --micro:clamp(0.55rem, 0.25vw + 0.45rem, 0.7rem);
  --icon:clamp(1rem, 0.6vw + 0.7rem, 1.35rem);
  --corner:clamp(0.65rem, 0.4vw + 0.4rem, 0.95rem);
  --globe:clamp(2.25rem, 2.5vw + 1rem, 3.25rem);

  /* Tracking / leading used across the design */
  --track-nav:0.2em;
  --track-logo:0.15em;
  --track-micro:0.2em;
  --track-btn:0.18em;
  --track-headline:0.08em;
  --lh-body:1.75;
  --lh-headline:1.08;

  /* Fluid spacing scale (design values, verbatim) */
  --pad-x:clamp(1.25rem, 4.5vw, 5rem);
  --pad-y:clamp(1rem, 3vh, 4rem);
  --header-pt:clamp(0.9rem, 2vh, 2.25rem);
  --gap-nav:clamp(1rem, 2.2vw, 2.25rem);
  --section-gap:clamp(0.5rem, 1.2vh, 1.25rem);
  --main-py:clamp(0.75rem, 2.2vh, 2.5rem);
  --btn-px:clamp(1.15rem, 1.4vw, 1.75rem);
  --btn-py:clamp(0.6rem, 0.9vh, 0.85rem);
  --btn-gap:clamp(0.75rem, 1vw, 1.1rem);
  --feature-pad:clamp(1rem, 1.5vw, 1.75rem);
  --feature-min:clamp(13rem, 18vw, 20rem);
  --checker-w:clamp(2.75rem, 4.5vw, 6.5rem);
  --checker-h:clamp(1.35rem, 2.2vw, 3rem);
  --drawer-pad:clamp(1.25rem, 2.5vw, 2.25rem);
  --drawer-max:clamp(18rem, 28vw, 28rem);

  /* Radii / motion */
  --radius:0.375rem;
  --radius-card:24px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.2s;
}