/* ==========================================================================
   ReviewStand.ca: Design Tokens
   Palette, type scale, spacing, and radii per brand spec (pfile.txt).
   ========================================================================== */

:root {
  /* Color */
  --color-primary: #2563EB;
  --color-primary-dark: #1D4ED8;
  --color-secondary: #111827;
  /* Blue used for text/icons sitting directly on the page background
     (eyebrows, breadcrumbs, links), as opposed to --color-primary which
     is also used as a button fill. Same value in the light theme; a
     dark theme brightens this one for contrast without touching button
     colors, which are fine as-is since they're judged against their own
     fill, not the page background. */
  --color-link: #2563EB;
  --color-bg: #FFFFFF;
  --color-surface: #F8FAFC;
  --color-surface-alt: #F1F5F9;
  --color-border: #E5E7EB;
  --color-accent: #22C55E;
  --color-gold: #F5A800;
  --color-gold-dark: #CC8C00;
  /* Deep matte gold: used for buttons that carry white text. The bright
     accent gold above only clears ~2:1 contrast with white, well under
     the 4.5:1 minimum, so buttons use this bronze tone instead, which
     comfortably passes AA with white text while still reading as gold. */
  --color-gold-deep: #D4AF37;
  --color-gold-deep-dark: #B8952C;

  --color-text: #111827;
  --color-text-muted: #4B5563;
  --color-text-faint: #6B7280;

  /* Theme-stable "ink" tokens: always dark, regardless of page theme.
     Used for text/badges sitting on a fixed light surface (gold chips,
     white buttons, product photography cards) that must never flip to
     light-on-light if a page switches to a dark theme. */
  --color-ink: #111827;
  --color-ink-muted: #4B5563;
  --color-ink-faint: #6B7280;

  /* Text on dark surfaces (rulebook minimum opacity thresholds) */
  --on-dark-primary: rgba(255, 255, 255, 0.95);
  --on-dark-secondary: rgba(255, 255, 255, 0.78);
  --on-dark-label: rgba(255, 255, 255, 0.6);
  --on-dark-hint: rgba(255, 255, 255, 0.52);
  --on-dark-divider: rgba(255, 255, 255, 0.14);

  /* Type */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* 8-point spacing scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --section-gap: 120px;
  --section-gap-mobile: 72px;

  /* Layout */
  --container-max: 1280px;
  --gutter-desktop: 64px;
  --gutter-mobile: 20px;

  /* Radius */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Elevation (subtle, never overused) */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md: 0 8px 24px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 24px 48px -12px rgba(17, 24, 39, 0.16);
  --shadow-primary: 0 12px 24px -8px rgba(37, 99, 235, 0.35);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
  --duration-slow: 300ms;
}