/**
 * ASDF Design Tokens
 * Based on Golden Ratio (φ = 1.618) and Apple HIG principles
 *
 * Usage: Import this file BEFORE other stylesheets
 * @import url('./design-tokens.css');
 */

:root {
  /* ============================================
     PHI CONSTANT
     ============================================ */
  --phi: 1.618;
  --phi-inv: 0.618; /* 1/φ */

  /* ============================================
     SPACING SCALE (φ-based from 8px base)
     ============================================ */
  --space-3xs: 2px; /* 8 / φ³ */
  --space-2xs: 3px; /* 8 / φ² */
  --space-xs: 5px; /* 8 / φ */
  --space-sm: 8px; /* base unit */
  --space-md: 13px; /* 8 × φ */
  --space-lg: 21px; /* 13 × φ */
  --space-xl: 34px; /* 21 × φ */
  --space-2xl: 55px; /* 34 × φ */
  --space-3xl: 89px; /* 55 × φ */

  /* Semantic spacing */
  --space-inline: var(--space-xs); /* Between inline elements */
  --space-block: var(--space-md); /* Between block elements */
  --space-section: var(--space-xl); /* Between sections */
  --space-page: var(--space-2xl); /* Page margins */

  /* ============================================
     TYPOGRAPHY SCALE (φ-based from 15px base)
     ============================================ */
  --text-3xs: 9px; /* Labels, micro */
  --text-2xs: 10px; /* Captions */
  --text-xs: 11px; /* Small labels */
  --text-sm: 13px; /* Secondary text */
  --text-base: 15px; /* Body text */
  --text-lg: 17px; /* Large body */
  --text-xl: 20px; /* Subheadings */
  --text-2xl: 24px; /* Headings */
  --text-3xl: 28px; /* Section titles */
  --text-4xl: 34px; /* Page titles */
  --text-5xl: 55px; /* Hero text */

  /* Font weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.6;
  --leading-relaxed: 1.8;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;

  /* ============================================
     Z-INDEX LAYERS (10 max, clear hierarchy)
     ============================================ */
  --z-base: 1; /* Canvas, base content */
  --z-elevated: 10; /* Cards, elevated surfaces */
  --z-sticky: 50; /* Sticky headers, HUDs */
  --z-overlay: 100; /* Panels, drawers */
  --z-modal: 200; /* Modal dialogs */
  --z-popover: 300; /* Tooltips, popovers */
  --z-toast: 400; /* Notifications, toasts */
  --z-max: 500; /* Critical overlays */

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-none: 0;
  --radius-sm: 6px; /* Buttons, inputs */
  --radius-md: 10px; /* Cards */
  --radius-lg: 16px; /* Modals, large cards */
  --radius-xl: 24px; /* Hero sections */
  --radius-full: 9999px; /* Pills, circles */

  /* ============================================
     TRANSITIONS & ANIMATIONS
     ============================================ */
  /* Durations */
  --duration-instant: 50ms; /* Immediate feedback */
  --duration-fast: 150ms; /* Hover states */
  --duration-normal: 250ms; /* Standard transitions */
  --duration-slow: 400ms; /* Modal open/close */
  --duration-slower: 600ms; /* Page transitions */

  /* Easings (Apple-style) */
  --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.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Preset transitions */
  --transition-colors:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-opacity: opacity var(--duration-normal) var(--ease-out);
  --transition-all: all var(--duration-normal) var(--ease-in-out);

  /* ============================================
     TOUCH TARGETS (Accessibility)
     ============================================ */
  --touch-target-min: 44px; /* Apple HIG minimum */
  --touch-target-comfortable: 48px;
  --touch-target-large: 56px;

  /* ============================================
     COLORS - Semantic (extends yggdrasil vars)
     ============================================ */
  /* Brand */
  --color-fire: #ff4500;
  --color-fire-light: #ff6a33;
  --color-fire-dark: #cc3700;
  --color-fire-glow: rgba(255, 69, 0, 0.4);

  --color-ice: #a5f2f3;
  --color-ice-light: #c5f7f8;
  --color-ice-dark: #7ed9da;
  --color-ice-glow: rgba(165, 242, 243, 0.3);

  /* Background */
  --color-bg-primary: #020812;
  --color-bg-elevated: rgba(10, 15, 25, 0.92);
  --color-bg-surface: rgba(255, 255, 255, 0.03);
  --color-bg-hover: rgba(255, 255, 255, 0.06);
  --color-bg-active: rgba(255, 255, 255, 0.1);

  /* Text - WCAG 2.1 AA compliant (min 4.5:1 contrast on #020812) */
  --color-text-primary: #ffffff;
  --color-text-secondary: rgba(255, 255, 255, 0.7); /* ~8.9:1 */
  --color-text-tertiary: rgba(255, 255, 255, 0.55); /* ~5.5:1 - was 0.5 */
  --color-text-muted: rgba(255, 255, 255, 0.55); /* ~5.5:1 - was 0.4 */
  --color-text-disabled: rgba(255, 255, 255, 0.35); /* Disabled state - intentionally lower */

  /* Borders */
  --color-border-subtle: rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.1);
  --color-border-strong: rgba(255, 255, 255, 0.2);
  --color-border-focus: var(--color-fire);

  /* Status */
  --color-success: #22c55e;
  --color-success-bg: rgba(34, 197, 94, 0.15);
  --color-warning: #fbbf24;
  --color-warning-bg: rgba(251, 191, 36, 0.15);
  --color-error: #ef4444;
  --color-error-bg: rgba(239, 68, 68, 0.15);
  --color-info: #3b82f6;
  --color-info-bg: rgba(59, 130, 246, 0.15);

  /* Track colors */
  --color-track-dev: #9945ff;
  --color-track-games: #f97316;
  --color-track-content: #10b981;

  /* ============================================
     GLASS MORPHISM
     ============================================ */
  --glass-bg: var(--color-bg-elevated);
  --glass-border: var(--color-border-default);
  --glass-blur: blur(20px);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

  /* ============================================
     SHADOWS
     ============================================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.4);
  --shadow-glow-fire: 0 0 20px var(--color-fire-glow);
  --shadow-glow-ice: 0 0 20px var(--color-ice-glow);

  /* ============================================
     COMPONENT SIZES
     ============================================ */
  --panel-width: 380px;
  --panel-width-mobile: 100vw;
  --modal-width-sm: 400px;
  --modal-width-md: 600px;
  --modal-width-lg: 800px;
  --modal-width-xl: 1100px;

  /* ============================================
     BREAKPOINTS (for reference in JS)
     ============================================ */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

/* ============================================
   RESPONSIVE OVERRIDES
   ============================================ */
@media (max-width: 768px) {
  :root {
    /* Slightly smaller spacing on mobile */
    --space-section: var(--space-lg);
    --space-page: var(--space-lg);

    /* Panel full width */
    --panel-width: var(--panel-width-mobile);

    /* Larger touch targets */
    --touch-target-min: 48px;
  }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Touch target wrapper - ensures minimum touch area */
.touch-target {
  position: relative;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Focus visible for keyboard navigation */
.focus-ring:focus-visible {
  outline: 2px solid var(--color-fire);
  outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}