/**
 * Design tokens generated from project-data/design/design.json
 * Exposed as CSS custom properties for use across the theme.
 */

:root {
  /* Background */
  --bg-base: #EDE9E2;
  --bg-surface: #F4F1EC;
  --bg-surface-elevated: #FAF8F4;

  /* Text */
  --text-primary: #1F2430;
  --text-secondary: #5B5F6B;
  --text-muted: #8A8D96;
  --text-inverse: #FFFFFF;

  /* Accent */
  --accent-navy: #2B3245;
  --accent-yellow: #F2C14E;
  --accent-blue: #3D6BF0;
  --accent-blue-hover: #2F58D6;
  --accent-orange: #F2643C;
  --accent-coral: #F08A6C;
  --accent-lavender: #B6A6E8;
  --accent-pale-yellow: #F7D88B;
  --accent-light-blue: #A9C2F5;

  /* Gradients */
  --gradient-orb-primary: linear-gradient(135deg, #3D6BF0 0%, #F2643C 45%, #F2C14E 100%);
  --gradient-orb-soft: radial-gradient(circle, #F7D88B 0%, #F2A65A 35%, #F0786A 65%, rgba(244, 241, 236, 0) 100%);

  /* Borders */
  --border-subtle: #E2DDD3;
  --border-default: #D6D0C4;

  /* Category colors (used to tint game cards) */
  --cat-1: #F2643C;
  --cat-2: #3D6BF0;
  --cat-3: #2B3245;
  --cat-4: #B6A6E8;
  --cat-5: #F2C14E;

  /* Typography */
  --font-primary: Inter, 'SF Pro Display', system-ui, sans-serif;
  --font-fallback: 'Helvetica Neue', Arial, sans-serif;

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

  --fs-h1: 28px;
  --fs-h2: 20px;
  --fs-eyebrow: 11px;
  --fs-body: 15px;
  --fs-caption: 12px;
  --fs-label: 14px;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-soft: 0 4px 16px rgba(31, 36, 48, 0.06);
  --shadow-card: 0 8px 24px rgba(31, 36, 48, 0.08);
  --shadow-floating: 0 16px 40px rgba(31, 36, 48, 0.12);

  /* Grid */
  --grid-gap: 24px;
  --grid-columns-desktop: 3;
  --grid-columns-tablet: 2;
  --grid-columns-mobile: 1;

  /* Layout */
  --container-max: 1120px;
}