/*
 * TokenCap Advisors — Design Tokens
 *
 * Single source of truth for colors, typography, spacing, elevation, and motion.
 * Any visual change starts here. Other stylesheets consume these via var(--*).
 */

:root {
  /* ── Color — brand ─────────────────────────────────── */
  --color-forest: #0f3326;           /* primary background (deep green) */
  --color-forest-mid: #133a2c;       /* slightly lighter panels */
  --color-forest-soft: #0b2a1f;      /* darker, for borders/footer */
  --color-gold: #c9a84c;             /* primary accent */
  --color-gold-light: #d4ba6a;       /* softer gold, body text accent */
  --color-gold-dim: rgba(201, 168, 76, 0.12);  /* subtle gold fill */

  /* ── Color — neutral ───────────────────────────────── */
  --color-white: #ffffff;
  --color-cream: #f7f1de;
  --color-text: rgba(255, 255, 255, 0.88);
  --color-text-muted: rgba(255, 255, 255, 0.60);
  --color-text-faint: rgba(255, 255, 255, 0.32);
  --color-border-subtle: rgba(255, 255, 255, 0.08);
  --color-border-gold: rgba(201, 168, 76, 0.32);
  --color-border-gold-mid: rgba(201, 168, 76, 0.55);

  /* ── Color — states ────────────────────────────────── */
  --color-success: #6ba368;
  --color-warning: #d4a84c;
  --color-danger: #c15a5a;

  /* ── Typography — families ─────────────────────────── */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Syne', 'DM Sans', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;

  /* ── Typography — sizes (modular scale, 1.25 ratio) ── */
  --fs-xs: 0.6875rem;     /* 11px — eyebrow labels */
  --fs-sm: 0.8125rem;     /* 13px — small body, captions */
  --fs-base: 0.9375rem;   /* 15px — default body */
  --fs-md: 1.0625rem;     /* 17px — subheads */
  --fs-lg: 1.25rem;       /* 20px — lead paragraphs */
  --fs-xl: 1.5rem;        /* 24px — h4 */
  --fs-2xl: 1.875rem;     /* 30px — h3 */
  --fs-3xl: 2.25rem;      /* 36px — h2 */
  --fs-4xl: 2.75rem;      /* 44px — h1 / hero */
  --fs-5xl: 3.5rem;       /* 56px — display hero */

  /* ── Typography — weights & leading ────────────────── */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.16em;

  /* ── Spacing — 4px base ────────────────────────────── */
  --space-1: 0.25rem;    /* 4px */
  --space-2: 0.5rem;     /* 8px */
  --space-3: 0.75rem;    /* 12px */
  --space-4: 1rem;       /* 16px */
  --space-5: 1.25rem;    /* 20px */
  --space-6: 1.5rem;     /* 24px */
  --space-8: 2rem;       /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── Layout ────────────────────────────────────────── */
  --container-max: 1240px;
  --container-padding: clamp(1rem, 4vw, 3.75rem);
  --content-max: 68ch;  /* optimal reading width for prose */

  /* ── Radii ─────────────────────────────────────────── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ── Borders ───────────────────────────────────────── */
  --border-width: 1px;

  /* ── Shadow — used very sparingly in this design ───── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);

  /* ── Motion ────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ── Z-index scale ─────────────────────────────────── */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-modal: 400;
  --z-toast: 600;

  /* ── Focus ring (accessibility) ────────────────────── */
  --focus-ring: 0 0 0 2px var(--color-forest), 0 0 0 4px var(--color-gold);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}