/* ==========================================================================
   variables.css
   Design tokens for the site. Every color, spacing value, font, radius and
   shadow used anywhere on the site should come from a variable defined here.
   Change a value here and it updates everywhere the token is used.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------
     Color — deep charcoal night backgrounds with amber marquee-light and
     coin-slot pink accents.
     --------------------------------------------------------------------- */
  --color-bg: #121214;
  --color-bg-elevated: #18181b;
  --color-surface: #1e1e22;
  --color-surface-alt: #27272c;
  --color-surface-hover: #303036;
  --color-border: #2f2f35;
  --color-border-strong: #40404a;
  --color-footer-bg: #0a0a0c;

  --color-text: #f1f3f9;
  --color-text-muted: #9aa3bf;
  --color-text-faint: #6b7394;

  --color-accent: #ffc145;        /* marquee amber — primary CTA / highlight */
  --color-accent-strong: #ffab00;
  --color-accent-contrast: #1a1200; /* text placed on top of amber */

  --color-secondary: #ff5d73;     /* coin-slot pink — secondary accent */
  --color-secondary-strong: #ff3d5a;

  --color-success: #59e8c4;       /* mint — ratings / positive state */
  --color-warning: #ffc145;
  --color-danger: #ff5d73;

  --color-overlay: rgba(9, 12, 20, 0.72);
  --color-scanline: rgba(255, 193, 69, 0.08);

  /* ---------------------------------------------------------------------
     Typography
     --------------------------------------------------------------------- */
  --font-display: "Rubik", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --fs-xs: 0.75rem;    /* 12px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-base: 1rem;     /* 16px */
  --fs-md: 1.125rem;   /* 18px */
  --fs-lg: 1.375rem;   /* 22px */
  --fs-xl: 1.75rem;    /* 28px */
  --fs-2xl: 2.25rem;   /* 36px */
  --fs-3xl: 3rem;      /* 48px */

  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------------------------------------------------------------------
     Spacing scale (4px base unit)
     --------------------------------------------------------------------- */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */

  /* ---------------------------------------------------------------------
     Radii, borders, shadows
     --------------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --border-width: 1px;

  --shadow-sm: 0 2px 6px rgba(4, 6, 12, 0.35);
  --shadow-md: 0 8px 24px rgba(4, 6, 12, 0.45);
  --shadow-lg: 0 20px 48px rgba(4, 6, 12, 0.55);
  --shadow-glow-accent: 0 0 0 1px rgba(255, 193, 69, 0.4), 0 8px 24px rgba(255, 193, 69, 0.18);
  --shadow-glow-secondary: 0 0 0 1px rgba(255, 93, 115, 0.4), 0 8px 24px rgba(255, 93, 115, 0.18);

  /* ---------------------------------------------------------------------
     Layout
     --------------------------------------------------------------------- */
  --container-max: 1280px;
  --container-padding: var(--space-5);
  --header-height: 72px;

  /* ---------------------------------------------------------------------
     Motion
     --------------------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 360ms cubic-bezier(0.22, 1, 0.36, 1);

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

/*
  Breakpoints reference (used consistently across the CSS via media queries,
  since CSS custom properties cannot be used inside @media conditions):

  --bp-sm: 480px   -> small phones
  --bp-md: 768px   -> tablets
  --bp-lg: 1200px  -> small laptops
  --bp-xl: 1280px  -> desktop
*/

/* ---------------------------------------------------------------------
   Light theme — activated by <html data-theme="light">. Every color
   token is redefined here; everything else (spacing, type, radii,
   shadows shape) stays identical between themes.
   --------------------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --color-bg: #f5f6fb;
  --color-bg-elevated: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #eef0f7;
  --color-surface-hover: #e4e8f5;
  --color-border: #dfe3f0;
  --color-border-strong: #c7ccdf;
  --color-footer-bg: #e8eaf3;

  --color-text: #171a2b;
  --color-text-muted: #4d5471;
  --color-text-faint: #7d84a3;

  --shadow-sm: 0 2px 6px rgba(20, 24, 40, 0.08);
  --shadow-md: 0 8px 24px rgba(20, 24, 40, 0.10);
  --shadow-lg: 0 20px 48px rgba(20, 24, 40, 0.14);
}