/* ============================================================
   PAX SILICA — tokens.css
   Design tokens: palette, type, space, motion, layers.
   ============================================================ */

@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/chakra-petch-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chakra Petch";
  src: url("../fonts/chakra-petch-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* variable: wght 300–700 */
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* variable: wght 400–700 */
  font-family: "Lora";
  src: url("../fonts/lora-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-400-italic.woff2") format("woff2");
  font-weight: 400 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- base tonal field ------------------------------------ */
  --bg-void: #04060d;
  --bg-0: #070b16;
  --bg-1: #0a101f;
  --bg-2: #0f1628;
  --bg-3: #141d33;
  --bg-4: #1b2540;
  --line-faint: rgba(122, 146, 198, 0.11);
  --line-soft: rgba(130, 156, 210, 0.2);
  --line-strong: rgba(150, 178, 230, 0.38);

  /* ---- ink --------------------------------------------------- */
  --ink-hi: #edf2fd;
  --ink-body: #c9d3e8;
  --ink-mid: #99a6c4;
  --ink-dim: #75819f;

  /* ---- signal hues ------------------------------------------ */
  --gold: #f2b63c;
  --gold-bright: #ffd47a;
  --gold-deep: #8a6210;
  --red: #ff5464;
  --red-deep: #b01e30;
  --ph-red: #e2374a;
  --cyan: #45d8ff;
  --blue: #3f86ff;
  --green: #52eea0;
  --green-dim: #37b87c;
  --violet: #a48bff;

  /* translucent signal fills */
  --gold-a12: rgba(242, 182, 60, 0.12);
  --gold-a25: rgba(242, 182, 60, 0.25);
  --gold-a45: rgba(242, 182, 60, 0.45);
  --red-a12: rgba(255, 84, 100, 0.12);
  --red-a28: rgba(255, 84, 100, 0.28);
  --cyan-a10: rgba(69, 216, 255, 0.10);
  --cyan-a22: rgba(69, 216, 255, 0.22);
  --green-a12: rgba(82, 238, 160, 0.14);
  --violet-a15: rgba(164, 139, 255, 0.15);

  /* ---- type -------------------------------------------------- */
  --font-display: "Chakra Petch", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Space Grotesk", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-serif: "Lora", Georgia, "Times New Roman", serif; /* long-form reading only */

  --step--3: clamp(0.5625rem, 0.54rem + 0.1vw, 0.625rem);
  --step--2: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);
  --step--1: clamp(0.8125rem, 0.78rem + 0.18vw, 0.875rem);
  --step-0: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.05rem + 0.4vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.25rem + 0.75vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.5vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.6rem + 2.8vw, 3.9rem);
  --step-5: clamp(2.8rem, 1.8rem + 4.8vw, 5.6rem);
  --step-hero: clamp(3.1rem, 1.6rem + 10.5vw, 10rem);

  /* ---- space / rhythm --------------------------------------- */
  --gutter: clamp(1.1rem, 3vw, 3rem);
  --rail-w: 232px;
  --sec-pad-y: clamp(4rem, 9vh, 7.5rem);
  --measure: 66ch;

  /* ---- motion (territory easings) ---------------------------- */
  --ease-boot: cubic-bezier(0.16, 1, 0.3, 1);        /* expo-out, reveals   */
  --ease-settle: cubic-bezier(0.34, 1.56, 0.64, 1);  /* back-out, stamps    */
  --ease-travel: cubic-bezier(0.65, 0.05, 0.36, 1);  /* sustained in-out    */
  --dur-reveal: 0.8s;
  --dur-stamp: 0.62s;

  /* ---- elevation --------------------------------------------- */
  --panel-shadow: 0 18px 50px -22px rgba(2, 4, 12, 0.9), 0 0 0 1px var(--line-faint) inset;
  --z-rail: 60;
  --z-topbar: 70;
  --z-menu: 65;
  --z-tooltip: 80;
}