/**
 * Design System Tokens
 * Our 4th Anniversary — Mobile-Web Optimized
 * Generated from design spec
 */

:root {
  /* ========== COLORS ========== */
  
  /* Background */
  --color-bg-primary: #000000;
  --color-bg-elevated: #121212;
  --color-bg-overlay: rgba(0, 0, 0, 0.6);
  --color-bg-surface-alt: #1C1C1E;
  
  /* Text */
  --color-text-primary: #FFFFFF;
  --color-text-secondary: #B3B3B3;
  --color-text-muted: #7A7A7A;
  --color-text-inverse: #000000;
  
  /* Emotion Palette */
  --color-emotion-high-pleasant: #FFD84D;
  --color-emotion-high-unpleasant: #FF4D3D;
  --color-emotion-low-pleasant: #4ADE80;
  --color-emotion-low-unpleasant: #7AA2FF;
  
  /* Accent */
  --color-accent-primary: #FFD84D;
  --color-accent-secondary: #FFFFFF;
  
  /* Semantic */
  --color-semantic-success: #4ADE80;
  --color-semantic-warning: #FFD84D;
  --color-semantic-error: #FF4D3D;
  --color-semantic-info: #7AA2FF;
  
  /* Component Usage */
  --color-cta-primary-bg: #FFFFFF;
  --color-cta-primary-text: #000000;
  --color-cta-primary-hover: #FFD84D;
  --color-cta-secondary-bg: #1C1C1E;
  --color-cta-secondary-text: #FFFFFF;
  --color-card-bg: #121212;
  --color-card-border: rgba(255, 255, 255, 0.08);
  --color-focus-ring: #FFD84D;
  
  /* ========== TYPOGRAPHY ========== */
  
  /* Font Families */
  --font-sans: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  
  /* Font Sizes */
  --font-size-display: 34px;
  --font-size-h1: 28px;
  --font-size-h2: 22px;
  --font-size-body: 16px;
  --font-size-caption: 13px;
  --font-size-micro: 11px;
  
  /* Font Weights */
  --font-weight-body: 450;
  --font-weight-label: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-headline: 1.15;
  --line-height-body: 1.45;
  
  /* Letter Spacing */
  --letter-spacing-headline: -0.2px;
  --letter-spacing-label: 0.2px;
  
  /* ========== LAYOUT ========== */
  
  --layout-max-width: 420px;
  --layout-safe-padding: 20px;
  --layout-section-spacing: 24px;
  --layout-card-spacing: 14px;
  --layout-stack-gap: 12px;
  --layout-touch-target-min: 44px;
  
  /* ========== SHAPE LANGUAGE ========== */
  
  /* Border Radius */
  --radius-xs: 10px;
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  
  /* Shadows */
  --shadow-soft: 0px 10px 22px rgba(0, 0, 0, 0.22);
  
  /* ========== COMPONENTS ========== */
  
  /* Buttons */
  --btn-primary-height: 56px;
  --btn-primary-radius: 28px;
  --btn-primary-padding-x: 18px;
  --btn-secondary-height: 50px;
  --btn-secondary-radius: 25px;
  --btn-secondary-padding-x: 16px;
  --btn-ghost-height: 48px;
  --btn-ghost-radius: 24px;
  --btn-icon-size: 44px;
  --btn-icon-radius: 22px;
  
  /* Cards */
  --card-radius: 20px;
  --card-padding: 18px;
  
  /* Input */
  --input-height: 48px;
  --input-radius: 24px;
  --input-border: rgba(255, 255, 255, 0.12);
  
  /* Chips */
  --chip-height: 36px;
  --chip-padding-x: 16px;
  --chip-radius: 18px;
  --chip-border: rgba(255, 255, 255, 0.10);
  
  /* Quiz */
  --quiz-option-height: 56px;
  --quiz-option-radius: 22px;
  --quiz-option-border: rgba(255, 255, 255, 0.10);
  
  /* Modals */
  --modal-radius: 24px;
  --modal-padding: 20px;
  
  /* Tab Bar */
  --tabbar-height: 72px;
  
  /* ========== MOTION ========== */
  
  --duration-fast: 180ms;
  --duration-base: 240ms;
  --duration-slow: 320ms;
  --easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  
  /* ========== EMOJI SYSTEM ========== */
  
  --emoji-size-sm: 24px;
  --emoji-size-md: 40px;
  --emoji-size-lg: 64px;
  --emoji-size-xl: 80px;
  
  /* ========== COLORFUL ACCENTS ========== */
  
  /* Accent Underlines & Gradients */
  --accent-underline: var(--color-accent-primary);
  --accent-gradient-warm: linear-gradient(135deg, #FFD84D, #4ADE80);
  --accent-gradient-cool: linear-gradient(135deg, #7AA2FF, #FFD84D);
  --accent-gradient-playful: linear-gradient(90deg, #FFD84D 0%, #4ADE80 50%, #7AA2FF 100%);
  
  /* Colored Shadows */
  --shadow-yellow: 0 8px 20px rgba(255, 216, 77, 0.15);
  --shadow-green: 0 8px 20px rgba(74, 222, 128, 0.12);
  --shadow-blue: 0 6px 16px rgba(122, 162, 255, 0.10);
  --shadow-red: 0 6px 16px rgba(255, 77, 61, 0.12);
  
  /* Swipe Interaction Colors */
  --swipe-right-color: var(--color-emotion-low-pleasant);
  --swipe-left-color: var(--color-emotion-high-unpleasant);
  --swipe-right-bg: rgba(74, 222, 128, 0.15);
  --swipe-left-bg: rgba(255, 77, 61, 0.15);
  
  /* Folder Badge Colors */
  --folder-cant-forget-bg: var(--color-accent-primary);
  --folder-need-talk-bg: var(--color-emotion-low-unpleasant);
}

/* ========== RESET & BASE ========== */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* ========== REDUCED MOTION ========== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}