/**
 * Doodles Design System — Token Layer
 * Single source of truth for all design primitives.
 * --tok-* prefix = immutable primitives. Never overridden per game.
 */

:root {
  /* ============================================================
     PRIMITIVE COLORS
     ============================================================ */
  --tok-blue: #1cb0f6;
  --tok-blue-dark: #0b8fde;
  --tok-blue-light: #5ec5f8;

  --tok-orange: #ff7d00;
  --tok-orange-dark: #e67300;

  --tok-green: #58cc02;
  --tok-green-dark: #4ba502;

  --tok-red: #ff4444;
  --tok-red-dark: #cc2222;

  /* ============================================================
     NEUTRAL COLORS
     ============================================================ */
  --tok-white: #ffffff;

  --tok-gray-50: #f9fafb;
  --tok-gray-100: #f3f4f6;
  --tok-gray-200: #e5e7eb;
  --tok-gray-400: #9ca3af;
  --tok-gray-500: #6b7280;
  --tok-gray-700: #374151;
  --tok-gray-800: #1f2937;
  --tok-gray-900: #111827;

  /* ============================================================
     SEMANTIC ALIASES
     ============================================================ */
  --tok-color-primary: var(--tok-blue);
  --tok-color-secondary: var(--tok-orange);
  --tok-color-success: var(--tok-green);
  --tok-color-danger: var(--tok-red);

  --tok-text-primary: var(--tok-gray-800);
  --tok-text-secondary: var(--tok-gray-500);
  --tok-text-light: var(--tok-gray-50);
  --tok-text-disabled: var(--tok-gray-400);

  --tok-bg-white: var(--tok-white);
  --tok-bg-soft: var(--tok-gray-100);
  --tok-bg-border: var(--tok-gray-200);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --tok-font: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ============================================================
     SPACING (4px base scale)
     ============================================================ */
  --tok-space-1: 4px;
  --tok-space-2: 8px;
  --tok-space-3: 12px;
  --tok-space-4: 16px;
  --tok-space-5: 20px;
  --tok-space-6: 24px;
  --tok-space-8: 32px;
  --tok-space-10: 40px;
  --tok-space-12: 48px;
  --tok-space-16: 64px;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */
  --tok-radius-sm: 4px;
  --tok-radius-md: 8px;
  --tok-radius-lg: 12px;
  --tok-radius-xl: 16px;
  --tok-radius-2xl: 20px;
  --tok-radius-pill: 999px;

  /* ============================================================
     TRANSITIONS
     ============================================================ */
  --tok-transition-fast: 0.15s ease;
  --tok-transition-normal: 0.2s ease;
  --tok-transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
     TOUCH TARGET (iOS HIG minimum)
     ============================================================ */
  --tok-touch-min: 44px;
}