/**
 * FAL Digital - Design Tokens
 * 
 * This is the single source of truth for all design tokens used across:
 * - E-book viewer (assets/css/viewer.css)
 * - Games (assets/css/games.css + games/[game-name]]/game.css)
 * - Landing page (assets/css/home.css)
 * - Website (website/assets/css/styles.css)
 * 
 * All colors, spacing, typography, shadows, and radii are defined here.
 * Legacy variable names are kept as aliases for backwards compatibility.
 */

:root {
  /* ========================================
     COLOR TOKENS
     ======================================== */
  
  /* Primary text colors */
  --color-ink: #111827;
  --color-ink-dark: #0f172a;
  --color-ink-light: #6b7280;
  
  /* Muted/subdued colors */
  --color-muted: #94a3b8;
  --color-muted-light: #e5e7eb;
  --color-muted-dark: #475569;
  
  /* Accent/primary colors - multiple variants exist, keeping all */
  --color-accent: #2563eb;
  --color-accent-light: #38bdf8;
  --color-accent-medium: #3b82f6;
  --color-accent-dark: #1d4ed8;
  --color-accent-soft: rgba(37, 99, 235, 0.08);
  --color-accent-soft-light: rgba(56, 189, 248, 0.15);
  
  /* Secondary accent (purple) */
  --color-accent-secondary: #a78bfa;
  
  /* Status colors */
  --color-success: #22c55e;
  --color-success-soft: rgba(34, 197, 94, 0.15);
  --color-success-dark: #16a34a;
  
  --color-warning: #f97316;
  
  --color-danger: #f43f5e;
  --color-danger-soft: rgba(244, 63, 94, 0.2);
  --color-danger-dark: #dc2626;
  --color-danger-light: #ef4444;
  
  /* Neutral grays */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  
  /* Light text (for dark backgrounds) */
  --color-text-light: #e2e8f0;
  --color-text-lighter: #f8fafc;
  --color-text-lightest: #f9fafb;
  --color-text-light-muted: #cbd5f5;
  
  /* White/black */
  --color-white: #ffffff;
  --color-black: #000000;
  
  /* Legacy color aliases (for backward compatibility) */
  --ink: var(--color-ink);
  --muted: var(--color-muted);
  --blue: var(--color-accent-light);
  --ok: var(--color-success-dark);
  --bad: var(--color-danger-dark);
  
  /* ========================================
     BACKGROUND TOKENS
     ======================================== */
  
  /* Primary backgrounds */
  --bg-primary: #f5f5f7;
  --bg-primary-alt: #f5f7fb;
  --bg-muted: #eef1f7;
  --bg-muted-light: #f3f4f6;
  
  /* Dark backgrounds */
  --bg-dark: #0f172a;
  --bg-dark-alt: #020617;
  --bg-dark-medium: #1d273b;
  --bg-dark-panel: #0b1324;
  --bg-dark-card: #111c2f;
  
  /* Panel/card backgrounds */
  --bg-panel: #ffffff;
  --bg-panel-dark: #111c2f;
  --bg-panel-semi: rgba(255, 255, 255, 0.7);
  --bg-panel-semi-dark: rgba(15, 23, 42, 0.8);
  --bg-panel-semi-darker: rgba(15, 23, 42, 0.75);
  
  /* Overlay backgrounds */
  --bg-overlay: rgba(0, 0, 0, 0.45);
  --bg-overlay-dark: rgba(3, 7, 18, 0.88);
  --bg-overlay-darker: rgba(2, 6, 23, 0.8);
  --bg-overlay-panel: rgba(9, 17, 31, 0.65);
  --bg-overlay-panel-hover: rgba(9, 17, 31, 0.85);
  
  /* Gradient backgrounds */
  --bg-gradient-light: linear-gradient(135deg, #e0f2fe, #fefce8);
  --bg-gradient-dark: radial-gradient(circle at top, #1d273b, #0f172a 65%);
  --bg-gradient-dark-alt: radial-gradient(circle at top, #e2e8f0 0, #f9fafb 40%, #eef2ff 100%);
  
  /* Legacy background aliases */
  --panel: var(--bg-panel-dark);
  --panel-border: rgba(148, 163, 184, 0.15);
  --panel-soft: rgba(148, 163, 184, 0.08);
  
  /* ========================================
     BORDER TOKENS
     ======================================== */
  
  --border-color: #dde2ee;
  --border-color-light: rgba(148, 163, 184, 0.3);
  --border-color-lighter: rgba(148, 163, 184, 0.2);
  --border-color-lightest: rgba(148, 163, 184, 0.15);
  --border-color-white: rgba(255, 255, 255, 0.4);
  --border-color-white-light: rgba(255, 255, 255, 0.08);
  --border-color-white-lighter: rgba(255, 255, 255, 0.6);
  --border-color-dark: rgba(17, 24, 39, 0.15);
  --border-color-darker: rgba(15, 23, 42, 0.2);
  --border-color-dashed: rgba(15, 23, 42, 0.3);
  
  /* ========================================
     SPACING TOKENS
     ======================================== */
  
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 10px;
  --spacing-xl: 12px;
  --spacing-2xl: 14px;
  --spacing-3xl: 16px;
  --spacing-4xl: 18px;
  --spacing-5xl: 20px;
  --spacing-6xl: 24px;
  --spacing-7xl: 28px;
  --spacing-8xl: 32px;
  --spacing-9xl: 40px;
  
  /* Common spacing patterns */
  --spacing-gap-tight: var(--spacing-sm);
  --spacing-gap-normal: var(--spacing-md);
  --spacing-gap-loose: var(--spacing-xl);
  --spacing-gap-loose-2: var(--spacing-5xl);
  
  --spacing-padding-xs: var(--spacing-xs);
  --spacing-padding-sm: var(--spacing-md);
  --spacing-padding-md: var(--spacing-lg);
  --spacing-padding-lg: var(--spacing-xl);
  --spacing-padding-xl: var(--spacing-3xl);
  --spacing-padding-2xl: var(--spacing-6xl);
  --spacing-padding-3xl: var(--spacing-9xl);
  
  --spacing-margin-xs: var(--spacing-xs);
  --spacing-margin-sm: var(--spacing-md);
  --spacing-margin-md: var(--spacing-lg);
  --spacing-margin-lg: var(--spacing-xl);
  --spacing-margin-xl: var(--spacing-3xl);
  --spacing-margin-2xl: var(--spacing-6xl);
  
  /* ========================================
     BORDER RADIUS TOKENS
     ======================================== */
  
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-3xl: 16px;
  --radius-4xl: 18px;
  --radius-5xl: 24px;
  --radius-full: 999px;
  --radius-circle: 50%;
  
  /* Legacy radius alias */
  --radius: var(--radius-xl);
  
  /* ========================================
     SHADOW TOKENS
     ======================================== */
  
  /* Subtle shadows */
  --shadow-xs: 0 2px 6px rgba(15, 23, 42, 0.08);
  --shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.25);
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.08);
  
  /* Medium shadows */
  --shadow-lg: 0 8px 20px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 10px 25px rgba(56, 189, 248, 0.35);
  --shadow-xl-purple: 0 10px 25px rgba(167, 139, 250, 0.35);
  --shadow-2xl: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-2xl-dark: 0 10px 30px rgba(15, 23, 42, 0.12);
  
  /* Large shadows */
  --shadow-3xl: 0 12px 30px rgba(15, 23, 42, 0.45);
  --shadow-4xl: 0 18px 40px rgba(15, 23, 42, 0.16);
  --shadow-5xl: 0 30px 80px rgba(2, 6, 23, 0.55);
  --shadow-side: -20px 0 40px rgba(0, 0, 0, 0.15);
  
  /* Legacy shadow alias */
  --shadow: var(--shadow-2xl);
  
  /* Special shadows */
  --shadow-soft: var(--shadow-4xl);
  --shadow-subtle: var(--shadow-lg);
  
  /* ========================================
     TYPOGRAPHY TOKENS
     ======================================== */
  
  /* Font families */
  --font-family-base: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  
  /* Font sizes */
  --font-size-xs: 0.7rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 0.85rem;
  --font-size-md: 0.9rem;
  --font-size-lg: 0.95rem;
  --font-size-xl: 1rem;
  --font-size-2xl: 1.1rem;
  --font-size-3xl: 1.15rem;
  --font-size-4xl: 1.4rem;
  --font-size-5xl: 1.9rem;
  --font-size-6xl: 2.2rem;
  --font-size-7xl: 2.25rem;
  --font-size-8xl: 2.5rem;
  --font-size-9xl: 2.6rem;
  
  /* Line heights */
  --line-height-tight: 1;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.6;
  
  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* ========================================
     ANIMATION & TRANSITION TOKENS
     ======================================== */
  
  /* Durations */
  --duration-fast: 120ms;
  --duration-normal: 150ms;
  --duration-slow: 200ms;
  --duration-slower: 250ms;
  --duration-slowest: 300ms;
  --duration-flip: 500ms;
  
  /* Easing */
  --ease-default: ease;
  --ease-in: ease-in;
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  
  /* ========================================
     LAYOUT TOKENS
     ======================================== */
  
  /* Container widths */
  --container-max-width: 1120px;
  --container-max-width-narrow: 960px;
  --container-max-width-wide: 2200px;
  
  /* Page sizing (viewer-specific) */
  --single-max-width: 500px;
  --spread-max-width: 1600px;
  --fs-single-max-width: 1000px;
  --fs-spread-max-width: 1900px;
  
  /* Rail/outset values */
  --rail-outset: 60px;
  --rail-outset-sm: 36px;
  
  /* Special angles */
  --curl-angle-out: -145deg;
  
  /* ========================================
     Z-INDEX TOKENS
     ======================================== */
  
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-overlay: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
  --z-toast: 80;
  --z-max: 100;
}

/* ========================================
   BASE STYLES
   ======================================== */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  /* Base colors will be set by individual components */
}