/* ==========================================================================
   GHERAS — Design Tokens (Responsive Fixed)
   ========================================================================== */

:root {
  --navy-1000: #030a12;
  --navy-950: #05101c;
  --navy-900: #081726;
  --navy-850: #0b1e30;
  --navy-800: #0f273c;
  --navy-700: #14324c;
  --navy-600: #1a4160;
  --navy-500: #235275;

  --slate-800: #16242f;
  --slate-700: #1e3140;
  --slate-600: #2a4154;
  --slate-500: #3d566b;
  --grey-500: #5d768c;
  --grey-400: #8299ad;
  --grey-300: #a6bccd;
  --grey-200: #c3d5e1;
  --grey-100: #d7e5ee;

  --green-950: #042117;
  --green-900: #062a1d;
  --green-800: #0a3a29;
  --green-700: #0f5439;
  --green-600: #1f7a55;
  --green-500: #2b9c6d;
  --green-400: #3fbe86;
  --green-300: #5fd9a3;
  --green-200: #8ae9c0;

  --bg: var(--navy-950);
  --bg-deep: var(--navy-1000);
  --surface: var(--navy-850);
  --surface-2: var(--slate-800);

  --ink: var(--grey-100);
  --ink-soft: var(--grey-300);
  --ink-mute: var(--grey-400);
  --ink-faint: var(--grey-500);

  --accent: var(--green-400);
  --accent-glow: var(--green-300);

  --line: rgba(166, 188, 205, 0.14);
  --line-strong: rgba(166, 188, 205, 0.26);
  --line-accent: rgba(63, 190, 134, 0.38);

  --glass-bg: rgba(15, 39, 60, 0.42);
  --glass-bg-strong: rgba(11, 30, 48, 0.85);
  --glass-border: rgba(195, 213, 225, 0.16);
  --glass-blur: 18px;

  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-sans: "Satoshi", "Inter", system-ui, -apple-system, sans-serif;

  --text-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.8rem);
  --text-sm: clamp(0.8rem, 0.75rem + 0.3vw, 0.95rem);
  --text-base: clamp(0.9rem, 0.85rem + 0.4vw, 1.05rem);
  --text-md: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  --text-lg: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  --text-xl: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem);
  --text-2xl: clamp(1.75rem, 1.3rem + 2vw, 3.2rem);
  --text-3xl: clamp(2.2rem, 1.5rem + 3.5vw, 4.8rem);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-12: 3rem;
  --sp-16: 4rem;

  --shell: 1200px;
  --shell-pad: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3rem, 7vh, 7rem);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.3);
  --shadow-deep: 0 20px 50px rgba(0, 0, 0, 0.5);

  --dur-fast: 200ms;
  --dur: 400ms;
  --header-h: 70px;
}

@media (max-width: 768px) {
  :root {
    --header-h: 60px;
  }
}