:root {
  /* ---- Color: neutrals ---- */
  --ink: #0a0e14;
  --ink-soft: #454b57;
  --bg: #fafaf9;
  --surface: #ffffff;
  --surface-muted: #f3f4f6;
  --border: #e6e7eb;

  /* ---- Color: dark bands (hero / footer) ---- */
  --navy-900: #0b1120;
  --navy-800: #141b2e;
  --navy-ink: #e7e9ee;
  --navy-ink-soft: #a6adba;
  --navy-border: rgba(255, 255, 255, 0.1);

  /* ---- Color: brand ---- */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: #eef0fd;
  --track-eng: #2563eb;
  --track-eng-soft: #eaf1fe;
  --track-arts: #e8923d;
  --track-arts-soft: #fdf1e3;
  --success: #16a34a;
  --whatsapp: #25d366;
  --focus-ring: #818cf8;

  /* ---- Typography ---- */
  --font-sans: "Geist Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --fs-display: clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);
  --fs-h2: clamp(1.75rem, 1.45rem + 1.4vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  /* ---- Spacing (8pt scale) ---- */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-6: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */

  --section-pad-y: clamp(5rem, 4rem + 4vw, 9rem);
  --content-max: 1280px;
  --content-max-wide: 1440px;
  --gutter: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);

  /* ---- Radius / Shadow ---- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(10, 14, 20, 0.06);
  --shadow-md: 0 8px 24px rgba(10, 14, 20, 0.08);
  --shadow-lg: 0 24px 48px rgba(10, 14, 20, 0.12);
  --shadow-focus: 0 0 0 4px rgba(129, 140, 248, 0.35);

  /* ---- Motion ---- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0e14;
    --surface: #12151c;
    --surface-muted: #171b24;
    --border: #262b36;
    --ink: #f2f3f5;
    --ink-soft: #a6adba;
    --accent-soft: rgba(79, 70, 229, 0.16);
    --track-eng-soft: rgba(37, 99, 235, 0.16);
    --track-arts-soft: rgba(232, 146, 61, 0.16);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.45);
  }
}