/* ==========================================================================
   Kelvin Tate Partners — Design Tokens
   Deep Ink Navy + Warm Antique Gold, on warm ivory paper.
   ========================================================================== */

:root {
  /* ---- Color: Navy scale (primary / dark surfaces) ---- */
  --navy-950: #080f18;
  --navy-900: #0b1622;
  --navy-800: #0e1b2c;
  --navy-700: #16283f;
  --navy-600: #203352;
  --navy-500: #34496b;
  --navy-400: #5c7194;

  /* ---- Color: Gold scale (accent) ---- */
  --gold-700: #8a6a34;
  --gold-600: #7d5f30;
  --gold-500: #c6a15b;
  --gold-400: #d4b579;
  --gold-300: #e4cfa0;
  --gold-200: #efe2c4;

  /* ---- Color: Neutral / paper scale ---- */
  --ivory-100: #fbf9f4;
  --ivory-200: #faf7f0;
  --ivory-300: #f1ece1;
  --ivory-400: #e6ded0;
  --line-300: #e1d9c8;
  --line-400: #cfc3ab;
  --white: #ffffff;

  /* ---- Semantic: surfaces ---- */
  --surface-page: var(--ivory-200);
  --surface-card: var(--white);
  --surface-muted: var(--ivory-300);
  --surface-dark: var(--navy-800);
  --surface-dark-alt: var(--navy-700);

  /* ---- Semantic: text ---- */
  --text-primary: var(--navy-800);
  --text-secondary: #4b5768;
  --text-muted: #5c6577;
  --text-on-dark: var(--ivory-100);
  --text-on-dark-muted: #aab6c6;
  --text-accent: var(--gold-600);

  /* ---- Semantic: borders / rings ---- */
  --border-subtle: var(--line-300);
  --border-strong: var(--line-400);
  --border-on-dark: rgba(247, 244, 236, 0.16);
  --ring: var(--gold-500);

  /* ---- Semantic: interactive ---- */
  --accent: var(--gold-500);
  --accent-hover: var(--gold-600);
  --accent-ink: var(--navy-800);
  --destructive: #a3402f;

  /* ---- Typography ---- */
  --font-serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --text-xs: 0.75rem;      /* 12 */
  --text-sm: 0.8125rem;    /* 13 */
  --text-base: 1rem;       /* 16 */
  --text-md: 1.125rem;     /* 18 */
  --text-lg: 1.375rem;     /* 22 */
  --text-xl: 1.75rem;      /* 28 */
  --text-2xl: 2.25rem;     /* 36 */
  --text-3xl: 3rem;        /* 48 */
  --text-4xl: 4rem;        /* 64 */
  --text-5xl: 5.25rem;     /* 84 */

  --leading-tight: 1.08;
  --leading-snug: 1.28;
  --leading-normal: 1.55;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-wider: 0.14em;

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

  /* ---- Layout ---- */
  --container-max: 1360px;
  --container-narrow: 860px;
  --container-pad: clamp(1.5rem, 5vw, 5rem);

  /* ---- Radius (mostly sharp — editorial, not soft/app-like) ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 999px;

  /* ---- Shadow (very restrained) ---- */
  --shadow-sm: 0 1px 2px rgba(14, 27, 44, 0.06);
  --shadow-md: 0 8px 24px -8px rgba(14, 27, 44, 0.16);
  --shadow-lg: 0 24px 64px -16px rgba(14, 27, 44, 0.24);
  --shadow-gold: 0 12px 32px -12px rgba(198, 161, 91, 0.45);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 180ms;
  --duration-base: 320ms;
  --duration-slow: 600ms;
  --duration-slower: 900ms;

  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
    --duration-slower: 1ms;
  }
}