:root {
  /* Surfaces — professional navy / black-blue (not pure black) */
  --bg-0: #070b14;
  --bg-1: #0c1424;
  --bg-2: #121c30;
  --surface: rgba(80, 140, 255, 0.06);
  --surface-strong: rgba(80, 140, 255, 0.1);
  --border-soft: rgba(120, 170, 255, 0.12);
  --border-strong: rgba(120, 170, 255, 0.22);

  /* Text */
  --text-primary: #f2f6fc;
  --text-secondary: rgba(210, 224, 245, 0.72);
  --text-tertiary: rgba(180, 200, 230, 0.48);

  /* Accent — navy blue family only */
  --accent-1: #2f6fed;
  --accent-2: #5aa8ff;
  --accent-3: #1a4fbf;
  --accent-gradient: linear-gradient(120deg, #1e5ad9 0%, #4f9cff 100%);
  --accent-gradient-warm: linear-gradient(120deg, #163a8a 0%, #2f6fed 55%, #7ec0ff 100%);

  /* Semantic */
  --danger: #ff6b6b;
  --success: #35d68f;

  /*
   * Font stack (priority order):
   * 1–2 Apple system (SF) → 3–4 SF Pro Display/Text → 5 Prompt (TH+EN)
   * → 6 Inter (EN) → 7 sans-serif fallback
   */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Prompt", "Inter", sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Prompt", "Inter", sans-serif;
  --font-sans-th: var(--font-sans);

  --fs-display: clamp(2.4rem, 1.4rem + 5vw, 7rem);
  --fs-h1: clamp(2rem, 1.5rem + 2.2vw, 4.5rem);
  --fs-h2: clamp(1.6rem, 1.25rem + 1.5vw, 3rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.55vw, 1.75rem);
  --fs-body-lg: clamp(1.05rem, 1rem + 0.25vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tag: 0.75rem;

  /* Spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-5: 3rem;
  --space-6: 4.5rem;
  --space-7: clamp(4rem, 8vw, 7rem);
  --space-8: 10rem;

  /* Layout */
  --container-w: 1280px;
  --gutter: clamp(1.1rem, 4vw, 4rem);
  --header-h: 4.25rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;
}