/* =================================================================
   New Wave Studio — Foundations
   Type + color tokens. Import this file anywhere the brand renders.
   ================================================================= */

/* ---------- Webfont: IBM Plex Sans (local) -------------------------- */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans.light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans.regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans.italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans.medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans.semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans.bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fonts/ibm-plex-sans.bold-italic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* =============== Palette — raw ============== */
  /* "Noir" — deep, slightly blue-shifted black */
  --noir-900: #08090b;     /* page background, deep dark */
  --noir-800: #101216;     /* surfaces on noir */
  --noir-700: #1a1d22;     /* raised on noir */
  --noir-600: #262a30;     /* hairline borders on noir */
  --noir-500: #383d45;     /* muted strokes */

  /* "Bone" — warm off-white, never pure white */
  --bone-50:  #faf8f3;     /* lightest, hi-key bg */
  --bone-100: #f4f1ea;     /* primary "paper" background */
  --bone-200: #ebe7dd;     /* muted card on bone */
  --bone-300: #ddd7c8;     /* hairline borders on bone */
  --bone-400: #b9b2a1;     /* tertiary text on bone */
  --bone-500: #87806e;     /* secondary text on bone */

  /* "Ambre" — filament amber, the only accent */
  --ambre-700: #b46f0d;    /* pressed amber */
  --ambre-600: #d98a1a;    /* hover amber */
  --ambre-500: #ffac41;    /* primary amber, brand accent */
  --ambre-400: #ffc16e;    /* tint amber */
  --ambre-300: #ffd9a3;    /* lightest amber */
  --ambre-glow: rgba(255, 172, 65, 0.35); /* halo / shadow / radial */

  /* "Blanc" — pure for icons on photographs only */
  --blanc:    #ffffff;

  /* Semantic accents (used sparingly, kept analog-warm) */
  --signal-red:    #d4503e;  /* errors, recording dot */
  --signal-green:  #7a9b5e;  /* sage, success */
  --signal-blue:   #4a6b8a;  /* dusk, info */

  /* =============== Semantic — light mode (bone) ============ */
  --bg:          var(--bone-100);
  --bg-raised:   var(--bone-50);
  --bg-sunken:   var(--bone-200);
  --fg:          var(--noir-900);
  --fg-muted:    var(--bone-500);
  --fg-faint:    var(--bone-400);
  --border:      var(--bone-300);
  --border-strong: var(--noir-900);
  --accent:      var(--ambre-500);
  --accent-hover: var(--ambre-600);
  --accent-press: var(--ambre-700);
  --accent-fg:   var(--noir-900);   /* text on amber */
  --focus-ring:  var(--ambre-500);
  --selection-bg: var(--ambre-300);

  /* =============== Type — families ============ */
  --font-sans:    "IBM Plex Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; /* fallback only — Plex Mono not bundled */
  --font-display: "IBM Plex Sans", "Inter", sans-serif; /* heavy weights used as display */

  /* =============== Type — scale (modular, 1.25) =========== */
  --fs-12:  12px;
  --fs-13:  13px;
  --fs-14:  14px;
  --fs-15:  15px;
  --fs-16:  16px;
  --fs-18:  18px;
  --fs-20:  20px;
  --fs-24:  24px;
  --fs-28:  28px;
  --fs-32:  32px;
  --fs-40:  40px;
  --fs-48:  48px;
  --fs-64:  64px;
  --fs-80:  80px;
  --fs-104: 104px;

  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-eyebrow: 0.18em;  /* ALL CAPS labels, like "18 · LAMP" */

  /* =============== Spacing scale (4px grid) ========== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* =============== Radius — "rounded contours" ======= */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;     /* default for cards, inputs */
  --radius-lg: 22px;     /* prominent cards */
  --radius-xl: 32px;     /* hero cards / pill containers */
  --radius-pill: 999px;  /* buttons, chips, the circular mark frame */

  /* =============== Stroke / borders ============== */
  --stroke-1: 1px;
  --stroke-2: 1.5px;
  --stroke-3: 2px;
  --stroke-frame: 3.8px;  /* the circle around the lamp mark */

  /* =============== Shadows — analog, warm ============ */
  /* All shadows are tinted noir, never pure black — keeps the warm feel. */
  --shadow-xs: 0 1px 2px rgba(8, 9, 11, 0.06);
  --shadow-sm: 0 2px 6px rgba(8, 9, 11, 0.08), 0 1px 2px rgba(8, 9, 11, 0.05);
  --shadow-md: 0 6px 18px rgba(8, 9, 11, 0.10), 0 2px 6px rgba(8, 9, 11, 0.06);
  --shadow-lg: 0 18px 40px rgba(8, 9, 11, 0.14), 0 4px 12px rgba(8, 9, 11, 0.08);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6),
                  inset 0 -1px 0 rgba(8, 9, 11, 0.04);

  /* Amber glow — used on the filament, on amber buttons hover */
  --glow-amber-sm: 0 0 0 4px var(--ambre-glow);
  --glow-amber-md: 0 0 24px rgba(255, 172, 65, 0.55);
  --glow-amber-lg: 0 0 60px rgba(255, 172, 65, 0.45),
                   0 0 12px rgba(255, 172, 65, 0.65);

  /* =============== Motion ============== */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-warm:   cubic-bezier(0.4, 0.1, 0.2, 1);   /* slight analog drag */
  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    420ms;
  --dur-filament: 1800ms; /* lamp warm-up easing */
}

/* =============== Dark mode (noir) =============================== */
[data-theme="noir"], .theme-noir {
  --bg:          var(--noir-900);
  --bg-raised:   var(--noir-800);
  --bg-sunken:   #04050608;
  --fg:          var(--bone-100);
  --fg-muted:    var(--bone-400);
  --fg-faint:    var(--noir-500);
  --border:      var(--noir-600);
  --border-strong: var(--bone-100);
  --accent-fg:   var(--noir-900);
  --selection-bg: rgba(255, 172, 65, 0.35);
  color-scheme: dark;
}

/* =============== Base reset + semantic elements ================== */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection-bg); color: var(--fg); }

/* Semantic type roles — apply via class or element */
.h-display, .display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 9vw, var(--fs-104));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
h1, .h1 {
  font-weight: 700;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
h3, .h3 {
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
}
h4, .h4 {
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
}
.eyebrow {
  font-weight: 600;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-muted);
}
p, .body {
  font-size: var(--fs-16);
  line-height: var(--lh-base);
}
.body-lg { font-size: var(--fs-18); line-height: var(--lh-base); }
.body-sm { font-size: var(--fs-14); line-height: var(--lh-base); }
.caption  { font-size: var(--fs-13); line-height: var(--lh-base); color: var(--fg-muted); }
.mono, code, pre { font-family: var(--font-mono); font-size: 0.92em; }

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--accent-hover); }

/* Focus — always amber ring */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ambre-glow), 0 0 0 1.5px var(--ambre-500);
  border-radius: var(--radius-sm);
}