/* ============================================================
   DESIGN SYSTEM — "Signal in the Dark"
   Yanis Chioveanu · Portfolio
   Single source of truth for the visual language.
   ============================================================ */

/* ---- Self-hosted fonts (offline-proof, no external requests) ---- */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/space-grotesk-500.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/space-grotesk-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/inter-600.woff2") format("woff2");
}

:root {
  /* ---------- Canvas & surfaces ---------- */
  --bg:               #06070a;   /* near-black, faintly cool */
  --bg-deep:          #030405;   /* deepest wells */
  --bg-raised:        #0b0d12;   /* raised panels */
  --surface-1:        rgba(255, 255, 255, 0.024);
  --surface-2:        rgba(255, 255, 255, 0.045);
  --surface-3:        rgba(255, 255, 255, 0.07);
  --hairline:         rgba(255, 255, 255, 0.08);
  --hairline-strong:  rgba(255, 255, 255, 0.14);

  /* ---------- Text ---------- */
  --text:             #edeff3;
  --text-dim:         #9aa3b2;
  --text-mute:        #5c6470;
  --text-faint:       rgba(237, 239, 243, 0.14);

  /* ---------- Accent — phosphor teal (used sparingly) ---------- */
  --accent:           #35e0c4;
  --accent-strong:    #57ead2;
  --accent-deep:      #0f8f7d;
  --accent-dim:       rgba(53, 224, 196, 0.12);
  --accent-line:      rgba(53, 224, 196, 0.30);
  --accent-glow:      rgba(53, 224, 196, 0.45);
  --accent-ink:       #04120f;   /* text on accent fills */

  /* secondary depth hue for 3D volumes only */
  --violet:           #7c6cf5;
  --violet-dim:       rgba(124, 108, 245, 0.14);

  /* ---------- Typography ---------- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-text:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Code", "Consolas", monospace;

  /* Fluid type scale (major-third-ish, clamped) */
  --fs-display: clamp(3.2rem, 1.6rem + 6.6vw, 7.5rem);
  --fs-h1:      clamp(2.4rem, 1.5rem + 3.8vw, 4.5rem);
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
  --fs-h3:      clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  --fs-h4:      clamp(1.1rem, 1rem + 0.4vw, 1.25rem);
  --fs-lead:    clamp(1.05rem, 0.98rem + 0.5vw, 1.3rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.75rem;

  --lh-tight:   1.05;
  --lh-snug:    1.25;
  --lh-body:    1.65;
  --tracking-tight:  -0.02em;
  --tracking-eyebrow: 0.22em;

  /* ---------- Spacing (8pt rhythm) ---------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;    --sp-11: 11rem;

  --section-pad-y: clamp(5rem, 3rem + 8vw, 10rem);
  --gutter:        clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --container:     min(1180px, 100% - 2 * var(--gutter));
  --container-wide: min(1400px, 100% - 2 * var(--gutter));
  --measure:       68ch;

  /* ---------- Radii ---------- */
  --r-xs: 8px;  --r-sm: 12px;  --r-md: 16px;  --r-lg: 22px;
  --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px;

  /* ---------- Shadows (layered, realistic) ---------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg:  0 8px 24px rgba(0,0,0,.5), 0 28px 70px rgba(0,0,0,.55);
  --shadow-xl:  0 20px 50px rgba(0,0,0,.55), 0 50px 120px rgba(0,0,0,.6);
  --shadow-glow: 0 0 0 1px var(--accent-line), 0 8px 40px var(--accent-dim);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --ease-emph:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 140ms;  --dur-2: 260ms;  --dur-3: 420ms;
  --dur-4: 640ms;  --dur-5: 900ms;

  /* ---------- Layers ---------- */
  --z-bg: 0;
  --z-content: 1;
  --z-nav: 50;
  --z-overlay: 80;
  --z-modal: 100;
  --z-cursor: 200;

  --nav-h: 68px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; --dur-5: 1ms;
  }
}