/* ===== ANOKOE UI v0.23 Final — Comprehensive Design Tokens =====
 * Purpose: Central source of truth for colors, spacing, motion, sound parameters
 * Philosophy: 空トーン（#E0F3FF系）／呼吸／余韻
 * Namespace: --ano-* prefix to avoid conflicts with existing CSS
 * Accessibility: prefers-reduced-motion compliant via --ano-motion-scale
 * Future-proof: Easy theme switching via file-level variable overrides
 */

:root {
  /* ========================================
   * 1. COLOR SYSTEM
   * ======================================== */
  
  /* Base Colors */
  --ano-bg: #F8F9FB;                    /* Primary background */
  --ano-bg-soft: #E0F3FF;               /* Soft sky tone (空トーン) */
  --ano-bg-glow: #B7F3FF;               /* Glow accent */
  --ano-fg: #0F172A;                    /* Primary foreground (text) */
  --ano-fg-muted: #64748B;              /* Muted text */
  
  /* Accent Colors */
  --ano-accent: #67E8F9;                /* Primary accent (cyan) */
  --ano-accent-soft: #DFF8FF;           /* Soft accent background */
  
  /* Semantic Colors */
  --ano-ok: #22C55E;                    /* Success/positive */
  --ano-warn: #F59E0B;                  /* Warning/caution */
  --ano-fail: #EF4444;                  /* Error/negative */
  
  /* Veil (透過レイヤー) */
  --ano-veil-10: rgba(15, 23, 42, 0.1);
  --ano-veil-30: rgba(15, 23, 42, 0.3);
  --ano-veil-60: rgba(15, 23, 42, 0.6);
  
  /* Page-Specific Tones (セマンティック背景) */
  --ano-tone-home: rgba(224, 243, 255, 0.4);        /* Sky blue */
  --ano-tone-explore: rgba(255, 245, 230, 0.4);     /* Warm cream */
  --ano-tone-record: rgba(255, 235, 238, 0.4);      /* Soft pink */
  --ano-tone-voista: rgba(230, 255, 245, 0.4);      /* Mint green */
  --ano-tone-profile: rgba(245, 240, 255, 0.4);     /* Lavender */
  
  /* Legacy Support (既存変数との互換性) */
  --ink: var(--ano-fg);
  --bg: var(--ano-bg);
  --surface: var(--ano-bg-soft);
  --brand: #0057FF;
  --accent-1: #FF3B30;
  --accent-2: #00D37F;
  --accent-3: #FFB800;
  --cta-fg: #FFFFFF;
  --cta-bg: linear-gradient(90deg, #0057FF, #00D37F);
  --line: rgba(0, 0, 0, 0.12);
  --overlay: rgba(0, 0, 0, 0.45);
  
  /* ========================================
   * 2. TYPOGRAPHY
   * ======================================== */
  
  /* Font Family */
  --ano-font-family: "Noto Sans JP", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Font Weights */
  --ano-fw-normal: 400;
  --ano-fw-medium: 500;
  --ano-fw-semibold: 600;
  
  /* Font Sizes (最小16px遵守) */
  --ano-fs-xs: 0.875rem;       /* 14px - 補助テキストのみ */
  --ano-fs-sm: 1rem;           /* 16px - 最小基準 */
  --ano-fs-base: 1.125rem;     /* 18px - 本文 */
  --ano-fs-lg: 1.25rem;        /* 20px - 小見出し */
  --ano-fs-xl: 1.5rem;         /* 24px - 見出し */
  --ano-fs-2xl: 2rem;          /* 32px - 大見出し */
  
  /* Line Height */
  --ano-lh-base: 1.6;          /* 本文行間 */
  --ano-lh-tight: 1.4;         /* 見出し行間 */
  
  /* Letter Spacing */
  --ano-ls-soft: 0.02em;       /* 柔らかい字間 */
  --ano-ls-normal: 0;
  
  /* Legacy Support */
  --font-family-jp: var(--ano-font-family);
  --h1: var(--ano-fs-2xl);
  --h2: var(--ano-fs-xl);
  --h3: var(--ano-fs-lg);
  --body: var(--ano-fs-base);
  --small: var(--ano-fs-xs);
  --fw-heading: var(--ano-fw-semibold);
  --fw-body: var(--ano-fw-normal);
  
  /* ========================================
   * 3. SPACING & RADIUS
   * ======================================== */
  
  /* Spacing Scale */
  --ano-space-2: 0.5rem;       /* 8px */
  --ano-space-4: 1rem;         /* 16px */
  --ano-space-6: 1.5rem;       /* 24px */
  --ano-space-8: 2rem;         /* 32px */
  --ano-space-12: 3rem;        /* 48px */
  --ano-space-16: 4rem;        /* 64px */
  --ano-space-24: 6rem;        /* 96px */
  
  /* Border Radius */
  --ano-radius-sm: 8px;
  --ano-radius-md: 12px;
  --ano-radius-lg: 16px;
  --ano-radius-xl: 24px;
  --ano-radius-2xl: 32px;
  
  /* Tap Target (タッチ最小サイズ) */
  --ano-tap-min: 44px;
  
  /* Legacy Support */
  --tap-min: var(--ano-tap-min);
  --safe-pad: var(--ano-space-6);
  --radius-card: var(--ano-radius-lg);
  --radius-cta: var(--ano-radius-lg);
  
  /* ========================================
   * 4. SHADOW & ELEVATION
   * ======================================== */
  
  /* Shadows (柔らかい拡散＋微光) */
  --ano-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --ano-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --ano-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --ano-shadow-glow: 0 0 20px rgba(103, 232, 249, 0.3), 0 4px 12px rgba(0, 0, 0, 0.08);
  
  /* Elevation (Z-index layers) */
  --ano-elev-0: 0;             /* Base */
  --ano-elev-1: 10;            /* Overlays */
  --ano-elev-2: 100;           /* Modals */
  --ano-elev-3: 1000;          /* Toasts/Tooltips */
  
  /* Legacy Support */
  --shadow-card: var(--ano-shadow-md);
  --shadow-cta: var(--ano-shadow-lg);
  
  /* ========================================
   * 5. MOTION (曲線・時間・係数)
   * ======================================== */
  
  /* Easing Curves */
  --ano-ease-sine: cubic-bezier(0.37, 0, 0.63, 1);      /* ease-in-out-sine */
  --ano-ease-gentle: cubic-bezier(0.4, 0, 0.2, 1);      /* Material ease-out */
  --ano-ease-pop: cubic-bezier(0.2, 0.8, 0.2, 1);       /* Bouncy */
  --ano-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot */
  
  /* Duration (速さより余韻) */
  --ano-dur-fast: 0.5s;        /* 出現 */
  --ano-dur-mid: 1.5s;         /* 遷移 */
  --ano-dur-slow: 3s;          /* 呼吸周期 */
  --ano-dur-rit: 12s;          /* 儀式（VoistaMoment等） */
  
  /* Motion Scale (prefers-reduced-motion対応) */
  --ano-motion-scale: 1.0;     /* Default: full motion */
  
  /* Legacy Support */
  --ease-pop: var(--ano-ease-pop);
  --ease-gentle: var(--ano-ease-gentle);
  --ease-spring: var(--ano-ease-spring);
  --dur-fast: 140ms;
  --dur-mid: 200ms;
  --dur-slow: 400ms;
  --dur-moment: 12000ms;
  
  /* ========================================
   * 6. PARTICLES & WAVE (演出パラメータ)
   * ======================================== */
  
  /* Particle Settings */
  --ano-particle-size: 2px;
  --ano-particle-density: 50;           /* 粒子数 */
  --ano-particle-rise-speed: 0.5;       /* 上昇速度係数 */
  
  /* Wave Animation (さざなみ) */
  --ano-wave-amplitude: 10px;           /* 振幅 */
  --ano-wave-breath: 3s;                /* 呼吸周期 */
  
  /* ========================================
   * 7. SOUND (指針値・JS側で参照)
   * ======================================== */
  
  /* Volume & Fade */
  --ano-sfx-volume: 0.35;               /* 効果音ベース音量 */
  --ano-sfx-fade-ms: 300;               /* フェードイン/アウト時間 */
  
  /* ========================================
   * 8. ACCESSIBILITY & THEME HOOKS
   * ======================================== */
  
  /* Contrast Boost (A11y CI対応) */
  --ano-contrast-boost: 1.0;            /* 1.0/1.1/1.2で調整可能 */
  
  /* Dark Theme Preparation (未適用・準備のみ) */
  --ano-dark-bg: #0E0E0E;
  --ano-dark-fg: #F8F8F8;
  --ano-dark-surface: #111315;
}

/* ========================================
 * MEDIA QUERIES & RESPONSIVE BEHAVIOR
 * ======================================== */

/* Reduced Motion Support (アクセシビリティ最優先) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ano-motion-scale: 0.3;   /* モーション係数を大幅減衰 */
    --ano-dur-fast: 0.1s;
    --ano-dur-mid: 0.2s;
    --ano-dur-slow: 0.3s;
    --ano-dur-rit: 1s;         /* 儀式も1秒に短縮 */
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Motion Flag (データ属性による明示的無効化) */
[data-motion="off"] {
  --ano-motion-scale: 0.3;
}

/* Dark mode */
[data-theme="dark"] {
  --ano-bg: var(--ano-dark-bg);
  --ano-fg: var(--ano-dark-fg);
  --ano-bg-soft: var(--ano-dark-surface);
  
  --ink: #F8F8F8;
  --bg: #0E0E0E;
  --surface: #111315;

  --brand: #4C8DFF;
  --accent-1: #FF5B50;
  --accent-2: #1BE59B;
  --accent-3: #FFC233;

  --line: rgba(255, 255, 255, 0.16);
  --overlay: rgba(255, 255, 255, 0.40);

  /* Tone Colors for Dark Mode */
  --ano-tone-home: rgba(30, 60, 90, 0.3);
  --ano-tone-explore: rgba(60, 50, 30, 0.3);
  --ano-tone-record: rgba(60, 30, 40, 0.3);
  --ano-tone-voista: rgba(30, 60, 50, 0.3);
  --ano-tone-profile: rgba(50, 40, 70, 0.3);
}

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

/* Global Resets */
html, body {
  font-family: var(--ano-font-family);
  font-size: var(--ano-fs-base);
  line-height: var(--ano-lh-base);
  background: var(--ano-bg-soft);
  color: var(--ano-fg);
  letter-spacing: var(--ano-ls-soft);
}

a {
  color: var(--ano-accent);
  text-decoration-thickness: 0.08em;
}

/* ========================================
 * UTILITY CLASSES (既存互換＋新規)
 * ======================================== */

/* Legacy Tone Classes */
.tone-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
}

.tone-cta {
  background: var(--cta-bg);
  color: var(--cta-fg);
  border: 1px solid transparent;
  box-shadow: var(--shadow-cta);
  border-radius: var(--radius-cta);
}

.tone-text {
  color: var(--ink);
}

.tone-text-sub {
  color: var(--ink);
  opacity: 0.7;
}

.tone-bg {
  background: var(--bg);
}

/* Page-specific tone overlays */
.page-tone {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-gentle);
}

.page-tone.active {
  opacity: 1;
}

.page-tone--home { background: var(--tone-home); }
.page-tone--explore { background: var(--tone-explore); }
.page-tone--record { background: var(--tone-record); }
.page-tone--voista { background: var(--tone-voista); }
.page-tone--profile { background: var(--tone-profile); }

/* ========================================
 * DEVICE-SPECIFIC ADJUSTMENTS (v0.23 Final)
 * ======================================== */

/* Mobile (375×812 - iPhone 13/14 etc.) */
@media (max-width: 480px) {
  :root {
    /* Safe area insets for iOS notch/home bar */
    --ano-safe-top: env(safe-area-inset-top, 0px);
    --ano-safe-bottom: env(safe-area-inset-bottom, 16px);
    --ano-safe-left: env(safe-area-inset-left, 0px);
    --ano-safe-right: env(safe-area-inset-right, 0px);
    
    /* Adjust spacing for thumb reach */
    --ano-space-bottom-cta: calc(var(--ano-space-6) + var(--ano-safe-bottom));
    
    /* Increase tap targets for one-handed use */
    --ano-tap-min: 48px; /* 44px → 48px on mobile */
    
    /* Reduce font sizes slightly for narrow screens */
    --ano-fs-2xl: 1.75rem; /* 2rem → 1.75rem */
    --ano-fs-xl: 1.375rem; /* 1.5rem → 1.375rem */
  }
  
  /* Notification toast adjustments */
  .notification-toast {
    min-width: auto !important;
    max-width: calc(100vw - var(--ano-space-4) * 2);
  }
  
  /* VoistaMoment subtitle line-height */
  .narration-text {
    line-height: 1.6 !important; /* Ensure 2-line readability */
    max-height: 3.2em; /* 2 lines max */
    overflow: hidden;
  }
}

/* Tablet (768×1024 - iPad etc.) */
@media (min-width: 481px) and (max-width: 1024px) {
  :root {
    /* Balanced spacing for landscape/portrait */
    --ano-space-container: var(--ano-space-8);
  }
  
  /* Two-column layouts for cards */
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop (1280+ - Large screens) */
@media (min-width: 1025px) {
  :root {
    /* Wider spacing for desktop */
    --ano-space-container: var(--ano-space-12);
    
    /* Larger font sizes for readability */
    --ano-fs-2xl: 2.25rem;
    --ano-fs-xl: 1.75rem;
  }
  
  /* Three-column layouts */
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Notification toast on right side */
  .notification-container {
    right: var(--ano-space-6) !important;
  }
}

/* Reduced Motion: Prevent CLS (Cumulative Layout Shift) */
@media (prefers-reduced-motion: reduce) {
  * {
    /* Instant transitions to prevent layout shift */
    transition-duration: 0.01ms !important;
  }
  
  /* Prevent animation-induced layout shifts */
  .notification-toast,
  .moment-light,
  .particle-canvas {
    transform: none !important;
    animation: none !important;
  }
}

/* High Contrast Mode (Windows, macOS) */
@media (prefers-contrast: more) {
  :root {
    --ano-contrast-boost: 1.3; /* Increase from 1.0 */
    --ano-fg: #000000; /* Pure black text */
    --ano-bg: #FFFFFF; /* Pure white background */
    
    /* Stronger borders */
    --ano-shadow-md: 0 0 0 2px currentColor;
  }
}

/* Dark Theme Preparation (data-theme attribute) */
[data-theme="dark"] {
  --ano-bg: var(--ano-dark-bg);
  --ano-fg: var(--ano-dark-fg);
  --ano-bg-soft: var(--ano-dark-surface);
  
  --ink: #F8F8F8;
  --bg: #0E0E0E;
  --surface: #111315;
  
  /* Invert semantic colors for dark */
  --ano-ok: #34D399; /* Lighter green */
  --ano-warn: #FBBF24; /* Lighter amber */
  --ano-fail: #F87171; /* Lighter red */
}