/* ============================================================
 * PALS Chess Academy — Design Tokens
 * ============================================================
 *
 * ⚠️  PLACEHOLDER BRAND IDENTITY ⚠️
 *
 * All values in this file are placeholders pending delivery of
 * the real brand identity. See the PLACEHOLDER-BRAND-IDENTITY
 * specification for the three-options brand identity
 * conversation and the full design token rationale.
 *
 * When the real brand is delivered:
 *   1. Update every value in this file with the final tokens
 *   2. Remove this warning header
 *   3. Remove the [data-dev-brand="placeholder"] indicator
 *
 * ============================================================ */

:root {
  /* ═══════════ BRAND COLORS ═══════════ */
  --color-brand-primary: #FF6B35;
  --color-brand-secondary: #F7C59F;
  --color-brand-accent: #EFEFD0;
  --color-brand-dark: #B83D0C;
  --color-brand-light: #FFD4B8;

  /* ═══════════ SURFACE COLORS ═══════════ */
  --color-surface-background: #FDFBF5;
  --color-surface-elevated: #FFFFFF;
  --color-surface-muted: #F0EDE5;
  --color-surface-sunken: #E8E4D8;
  --color-surface-inverse: #1A1A1A;

  /* ═══════════ TEXT COLORS ═══════════ */
  --color-text-primary: #1A1A1A;
  --color-text-secondary: #4D4D4D;
  --color-text-tertiary: #7A7A7A;
  --color-text-disabled: #B8B8B8;
  --color-text-inverse: #FFFFFF;
  --color-text-link: #FF6B35;
  --color-text-link-visited: #B83D0C;

  /* ═══════════ SEMANTIC COLORS ═══════════ */
  --color-semantic-success: #4CAF50;
  --color-semantic-success-bg: #E8F5E9;
  --color-semantic-warning: #FFA726;
  --color-semantic-warning-bg: #FFF3E0;
  --color-semantic-error: #EF5350;
  --color-semantic-error-bg: #FFEBEE;
  --color-semantic-info: #42A5F5;
  --color-semantic-info-bg: #E3F2FD;

  /* ═══════════ INTERACTIVE STATES ═══════════ */
  --color-interactive-hover-overlay: rgba(0, 0, 0, 0.04);
  --color-interactive-active-overlay: rgba(0, 0, 0, 0.08);
  --color-interactive-focus-ring: #FF6B35;
  --color-interactive-disabled-bg: #F0EDE5;
  --color-interactive-disabled-text: #B8B8B8;

  /* ═══════════ TYPOGRAPHY — FAMILIES ═══════════ */
  --font-heading: 'Comic Neue', 'Chalkboard SE', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;
  --font-display: 'Comic Neue', 'Chalkboard SE', system-ui, sans-serif;

  /* ═══════════ TYPOGRAPHY — SIZES ═══════════ */
  --font-size-display-xl: 4.5rem;
  --font-size-display-lg: 3.75rem;
  --font-size-display-md: 3rem;
  --font-size-display-sm: 2.25rem;
  --font-size-h1: 1.875rem;
  --font-size-h2: 1.5rem;
  --font-size-h3: 1.25rem;
  --font-size-h4: 1.125rem;
  --font-size-h5: 1rem;
  --font-size-h6: 0.875rem;
  --font-size-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-body-sm: 0.875rem;
  --font-size-caption: 0.75rem;
  --font-size-label: 0.875rem;

  /* ═══════════ TYPOGRAPHY — WEIGHTS ═══════════ */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ═══════════ TYPOGRAPHY — LINE HEIGHTS ═══════════ */
  --line-height-tight: 1.1;
  --line-height-snug: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;

  /* ═══════════ TYPOGRAPHY — LETTER SPACING ═══════════ */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.08em;

  /* ═══════════ SPACING ═══════════ */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

  /* ═══════════ BORDER RADIUS ═══════════ */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* ═══════════ SHADOWS ═══════════ */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  /* ═══════════ MOTION — DURATIONS ═══════════ */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
  --duration-slower: 600ms;
  --duration-slowest: 1000ms;

  /* ═══════════ MOTION — EASING ═══════════ */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* ═══════════ Z-INDEX ═══════════ */
  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-popover: 500;
  --z-toast: 600;
  --z-tooltip: 700;
}

/* ═══════════ DARK MODE PLACEHOLDER ═══════════ */
/* Not shipped in Phase 1. Exists so theme-swap mechanism is exercised. */
[data-theme="dark"] {
  --color-surface-background: #121212;
  --color-surface-elevated: #1E1E1E;
  --color-surface-muted: #2A2A2A;
  --color-surface-sunken: #0A0A0A;
  --color-surface-inverse: #FDFBF5;
  --color-text-primary: #F0F0F0;
  --color-text-secondary: #C0C0C0;
  --color-text-tertiary: #909090;
  --color-text-disabled: #5A5A5A;
  --color-text-inverse: #1A1A1A;
  --color-brand-primary: #FF8555;
  --color-brand-secondary: #E8B589;
  --color-brand-accent: #C9C9B0;
}

/* ═══════════ REDUCED MOTION ═══════════ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --duration-slowest: 0ms;
    --ease-bounce: linear;
    --ease-spring: linear;
  }
}