/* ==========================================================================
   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) */
@font-face{font-family:'Orbitron';font-style:normal;font-weight:400 900;font-display:swap;src:url('/fonts/orbitron-variable-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* Body — Plus Jakarta Sans (variable 200–800; design uses 400/500/600/700) */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/plus-jakarta-sans-variable-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/fonts/plus-jakarta-sans-variable-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* Mono — IBM Plex Mono (data/labels on the AI-Trade + SOC pages; not in the About design) */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-mono-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-mono-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* 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) */
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/michroma-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Michroma';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/michroma-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/chakra-petch-500-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/chakra-petch-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/chakra-petch-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/chakra-petch-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/chakra-petch-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/chakra-petch-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---------- Tokens ------------------------------------------------------ */
:root{
  /* Palette (design default: ["#04231f","#eafffb","#9ffcff"]) */
  --bg:#04231f;                 /* page ground */
  --ink:#eafffb;                /* primary text */
  --accent:#9ffcff;             /* cyan accent, selection, hover */
  --bg-rgb:4,35,31;             /* rgba(var(--bg-rgb), a) — the design's fade/vignette layers */
  --ink-rgb:234,255,251;
  --accent-rgb:159,252,255;     /* rgba(var(--accent-rgb), a) — the design's reveal tint */
  --bg-deep:#021210;            /* rgba(2,18,16,·) — drawer scrim / hub header gradient */
  --bg-deep-rgb:2,18,16;
  --shade:#031815;              /* rgba(3,24,21,·) — text-shadow plate behind hero copy */
  --shade-rgb:3,24,21;
  --accent-2:#67f2ff;           /* rgba(103,242,255,·) — secondary cyan in the reveal tint (also palette 2 accent) */
  --accent-2-rgb:103,242,255;
  --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) 55%, var(--bg));
  --faint:color-mix(in oklab, var(--ink) 40%, 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:#F2CE7B;
  --red:#FF9B9B;
  --amber-rgb:242,206,123;
  --red-rgb:255,155,155;

  /* Alternate palettes offered by the design's palette picker (swap the three vars above to use):
     [#0e2a4a, #eaf3ff, #67f2ff]  [#241d4a, #f1ecff, #8f7ae8]  [#4a2038, #ffeef7, #f59ad2] */

  /* Typography */
  --font-display:'Orbitron', sans-serif;               /* design --display-font (alternates: 'Michroma', 'Chakra Petch') */
  --font-body:'Plus Jakarta Sans', sans-serif;
  --font-mono:'IBM Plex Mono', 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;
}