/* ═══════════════════════════════════════════════════════════════════
   CataTime Design System — Tokens
   Palette + Semantic UI + Typography + Radius + Spacing
   ═══════════════════════════════════════════════════════════════════ */
:root {
  /* ─── MARINE (Primary / Brand) ─── */
  --marine-50:  #e8f1f6;
  --marine-100: #c5dce6;
  --marine-200: #8fb9cd;
  --marine-300: #5996b4;
  --marine-400: #2e7a9f;
  --marine-500: #0a5f86;
  --marine-600: #074d6e;
  --marine-700: #053c57;
  --marine-800: #002d42;
  --marine-900: #001e2e;
  --marine-950: #00131d;

  /* ─── KAKI (Warm Neutral) ─── */
  --kaki-50:  #f7f6f3;
  --kaki-100: #eae8e1;
  --kaki-200: #dddace;
  --kaki-300: #ccc7b7;
  --kaki-400: #bbb4a3;
  --kaki-500: #aaa28e;
  --kaki-600: #8b8473;
  --kaki-900: #333029;

  /* ─── ARDOISE (Cool Gray) ─── */
  --ardoise-400: #6f8290;
  --ardoise-500: #576a75;
  --ardoise-600: #475760;
  --ardoise-700: #38444c;
  --ardoise-800: #2a3338;
  --ardoise-900: #1a2024;
  --ardoise-950: #111517;

  /* ─── MAUVE (Accent) ─── */
  --mauve-50:  #f8f6fb;
  --mauve-100: #ede8f4;
  --mauve-200: #e1d8ed;
  --mauve-300: #d1c4e4;
  --mauve-400: #b8a3d4;
  --mauve-500: #9f82c4;
  --mauve-600: #8264b0;
  --mauve-700: #654a91;
  --mauve-800: #4a3670;
  --mauve-900: #31244c;

  /* ─── CRÈME (Background Light) ─── */
  --creme-100: #fafaf6;
  --creme-200: #f4f4ee;

  /* ─── NEUTRALS ─── */
  --black: #000000;
  --white: #ffffff;

  /* ═══════════════════════════════════════
     SEMANTIC TOKENS — Light Mode (primary)
     ═══════════════════════════════════════ */
  --ui-bg:               var(--creme-200);
  --ui-bg-elevated:      var(--white);
  --ui-bg-muted:         var(--creme-100);
  --ui-bg-inverted:      var(--marine-950);

  --ui-text:             var(--marine-800);
  --ui-text-dimmed:      var(--ardoise-500);
  --ui-text-muted:       var(--ardoise-400);
  --ui-text-highlighted: var(--marine-950);
  --ui-text-inverted:    var(--creme-200);

  --ui-primary:          var(--marine-500);
  --ui-primary-hover:    var(--marine-600);
  --ui-accent:           var(--mauve-500);
  --ui-accent-muted:     var(--mauve-400);

  --ui-border:           var(--kaki-200);
  --ui-border-muted:     var(--kaki-300);
  --ui-border-inverted:  var(--ardoise-800);

  /* ─── Dark section tokens (used inside hero, signature, CTA bands) ─── */
  --ui-dark-bg:          var(--marine-950);
  --ui-dark-text:        var(--creme-200);
  --ui-dark-text-muted:  var(--kaki-300);
  --ui-dark-border:      var(--ardoise-800);

  /* ═══════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════ */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Courier New", monospace;

  /* Size scale — static rem, fluid headings handled via clamp in base.css */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.5rem;    /* 40px */
  --text-5xl:  3.75rem;   /* 60px */
  --text-6xl:  5rem;      /* 80px */
  --text-7xl:  6rem;      /* 96px */
  --text-8xl:  8rem;      /* 128px */

  /* Weights */
  --font-light:    300;
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-black:    900;

  /* Tracking */
  --tracking-tighter: -0.04em;
  --tracking-tight:   -0.025em;
  --tracking-normal:   0;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.1;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  /* ═══════════════════════════════════════
     RADIUS
     ═══════════════════════════════════════ */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:  14px;
  --radius-full: 9999px;

  /* ═══════════════════════════════════════
     SPACING SCALE
     ═══════════════════════════════════════ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Fluid section padding (mobile → desktop) */
  --section-py: clamp(64px, 10vw, 140px);

  /* ═══════════════════════════════════════
     LAYOUT
     ═══════════════════════════════════════ */
  --container-max: 1280px;
  --container-px: clamp(20px, 4vw, 32px);

  /* ═══════════════════════════════════════
     MOTION
     ═══════════════════════════════════════ */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Property for conic-gradient animated borders */
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}