/* =========================================================================
   PRIME.FINDS — Design Tokens
   Single source of truth for color, type, spacing, radius, shadow, motion.
   Every other stylesheet should read these variables rather than hardcode
   raw values, so the whole visual system can be retuned from one file.
   ========================================================================= */

:root {
  /* ---- Color: surface ---- */
  --color-bg: #0a0a0b;
  --color-bg-raised: #131315;
  --color-bg-elevated: #18181b;
  --color-bg-overlay: rgba(8, 8, 9, 0.86);
  --color-border: #2a2a2d;
  --color-border-strong: #3a3a3d;

  /* ---- Color: text ---- */
  --color-text: #f5f1e8;
  --color-text-dim: #a8a6a0;
  --color-text-faint: #706e68;
  --color-text-on-gold: #14120a;

  /* ---- Color: gold accent (metallic, not bright yellow) ---- */
  --color-gold: #c9a24b;
  --color-gold-light: #e8cf8a;
  --color-gold-dim: #8a6f34;
  --color-gold-wash: rgba(201, 162, 75, 0.12);
  --gradient-gold: linear-gradient(135deg, var(--color-gold-light), var(--color-gold) 55%, var(--color-gold-dim));

  /* ---- Color: state ---- */
  --color-success: #7fae83;
  --color-error: #c96a5a;

  /* ---- Typography ---- */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display-xl: clamp(2.75rem, 6vw, 5.5rem);
  --fs-display-lg: clamp(2.1rem, 4.4vw, 3.4rem);
  --fs-display-md: clamp(1.6rem, 2.8vw, 2.25rem);
  --fs-display-sm: clamp(1.25rem, 1.8vw, 1.6rem);
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-body-sm: 0.875rem;
  --fs-caption: 0.75rem;

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-normal: 1.6;

  --tracking-wide: 0.14em;
  --tracking-mid: 0.06em;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radius ---- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 8px 28px rgba(201, 162, 75, 0.16);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 280ms;
  --duration-slow: 520ms;

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-overlay: 200;
  --z-toast: 300;
}

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