/* ============================================================
   Design Tokens — AI Tutor Academy SPA
   Applied: UI Design System + Visual Designer + UI/UX Pro Max
   ============================================================ */

:root {
  /* ── Brand Color Palette (60-30-10 Rule) ──────────── */
  --brand-50:   #EFF6FF;
  --brand-100:  #DBEAFE;
  --brand-200:  #BFDBFE;
  --brand-300:  #93C5FD;
  --brand-400:  #60A5FA;
  --brand-500:  #3B82F6;
  --brand-600:  #2563EB;   /* ← 主品牌色 (60%) */
  --brand-700:  #1D4ED8;
  --brand-800:  #1E40AF;
  --brand-900:  #1E3A8A;

  --brand:       var(--brand-600);
  --brand-light: var(--brand-500);
  --brand-dark:  var(--brand-700);
  --brand-bg:    var(--brand-50);

  /* ── Accent / Secondary (30%) ──────────────────────── */
  --accent-50:  #F5F3FF;
  --accent-400: #A78BFA;
  --accent-500: #8B5CF6;
  --accent-600: #7C3AED;
  --accent-700: #6D28D9;

  --accent:       var(--accent-600);
  --accent-light: var(--accent-500);
  --accent-dark:  var(--accent-700);
  --accent-bg:    var(--accent-50);

  /* ── Semantic Colors (10%) ────────────────────────── */
  --success-50:  #ECFDF5;
  --success-400: #34D399;
  --success-500: #10B981;
  --success-600: #059669;

  --warning-50:  #FFFBEB;
  --warning-400: #FBBF24;
  --warning-500: #F59E0B;
  --warning-600: #D97706;

  --danger-50:   #FEF2F2;
  --danger-400:  #F87171;
  --danger-500:  #EF4444;
  --danger-600:  #DC2626;

  --success:      var(--success-600);
  --success-light:var(--success-500);
  --success-bg:   var(--success-50);
  --warning:      var(--warning-600);
  --warning-light:var(--warning-500);
  --warning-bg:   var(--warning-50);
  --danger:       var(--danger-600);
  --danger-light: var(--danger-500);
  --danger-bg:    var(--danger-50);

  /* Aliases for existing code */
  --safe:       var(--success);
  --safe-light: var(--success-light);
  --safe-bg:    var(--success-bg);
  --warn:       var(--warning);
  --warn-light: var(--warning-light);
  --warn-bg:    var(--warning-bg);

  /* ── Neutral / Surface Colors ──────────────────────── */
  --neutral-50:  #F8FAFC;
  --neutral-100: #F1F5F9;
  --neutral-200: #E2E8F0;
  --neutral-300: #CBD5E1;
  --neutral-400: #94A3B8;
  --neutral-500: #64748B;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1E293B;
  --neutral-900: #0F172A;
  --neutral-950: #020617;

  --ink:          var(--neutral-900);
  --ink-secondary:var(--neutral-600);
  --ink-tertiary: var(--neutral-400);
  --line:         var(--neutral-200);
  --line-light:   var(--neutral-100);
  --bg:           var(--neutral-50);
  --bg-alt:       var(--neutral-100);
  --card:         #FFFFFF;
  --overlay:      rgba(15, 23, 42, 0.45);

  /* ── Typography Scale (1.25 ratio, 16px base) ────── */
  --fs-10: 0.625rem;   /* 10px */
  --fs-11: 0.6875rem;  /* 11px */
  --fs-12: 0.75rem;    /* 12px */
  --fs-13: 0.8125rem;  /* 13px */
  --fs-14: 0.875rem;   /* 14px */
  --fs-15: 0.9375rem;  /* 15px */
  --fs-16: 1rem;       /* 16px — base */
  --fs-17: 1.0625rem;  /* 17px */
  --fs-18: 1.125rem;   /* 18px */
  --fs-20: 1.25rem;    /* 20px */
  --fs-22: 1.375rem;   /* 22px */
  --fs-24: 1.5rem;     /* 24px */
  --fs-28: 1.75rem;    /* 28px */
  --fs-32: 2rem;       /* 32px */

  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;

  --lh-tight:   1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  /* ── Font Stack ───────────────────────────────────── */
  --font-sans: 'Inter', 'Noto Sans JP', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

  /* ── Spacing (8pt grid / 4px base) ────────────────── */
  --sp-0:  0;
  --sp-2:  0.125rem;  /* 2px  */
  --sp-4:  0.25rem;   /* 4px  */
  --sp-6:  0.375rem;  /* 6px  */
  --sp-8:  0.5rem;    /* 8px  */
  --sp-10: 0.625rem;  /* 10px */
  --sp-12: 0.75rem;   /* 12px */
  --sp-14: 0.875rem;  /* 14px */
  --sp-16: 1rem;      /* 16px */
  --sp-20: 1.25rem;   /* 20px */
  --sp-24: 1.5rem;    /* 24px */
  --sp-28: 1.75rem;   /* 28px */
  --sp-32: 2rem;      /* 32px */
  --sp-36: 2.25rem;   /* 36px */
  --sp-40: 2.5rem;    /* 40px */
  --sp-48: 3rem;      /* 48px */
  --sp-56: 3.5rem;    /* 56px */
  --sp-64: 4rem;      /* 64px */

  /* ── Border Radius Scale ──────────────────────────── */
  --r-0:  0;
  --r-4:  0.25rem;   /* 4px  */
  --r-6:  0.375rem;  /* 6px  */
  --r-8:  0.5rem;    /* 8px  */
  --r-12: 0.75rem;   /* 12px */
  --r-16: 1rem;      /* 16px */
  --r-20: 1.25rem;   /* 20px */
  --r-24: 1.5rem;    /* 24px */
  --r-32: 2rem;      /* 32px */
  --r-full: 9999px;

  /* ── Shadow Hierarchy ─────────────────────────────── */
  --shadow-none: 0 0 0 0 transparent;
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl:   0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04);
  --shadow-2xl:  0 25px 50px rgba(0,0,0,0.12);

  --shadow-card: var(--shadow-md);
  --shadow-modal:var(--shadow-xl);
  --shadow-btn:  0 2px 8px rgba(37,99,235,0.25);
  --shadow-btn-hover: 0 4px 16px rgba(37,99,235,0.35);

  /* ── Focus Ring ───────────────────────────────────── */
  --focus-ring-width:  3px;
  --focus-ring-color:  rgba(37,99,235,0.25);
  --focus-ring-offset: 2px;

  /* ── Transitions & Easing ─────────────────────────── */
  --dur-fast:    100ms;
  --dur-normal:  200ms;
  --dur-slow:    400ms;
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ───────────────────────────────────────── */
  --max-width:  1100px;
  --stepper-height: 64px;
  --bottom-bar-height: 56px;
  --touch-target-min: 44px;   /* WCAG 2.5.5 */

  /* ── Z-Index Scale ────────────────────────────────── */
  --z-stepper: 100;
  --z-modal:   1000;
  --z-toast:   2000;
  --z-overlay: 9999;

  /* ── Youthful Accent Palette (preserved) ──────────── */
  --mint:           #00A896;
  --mint-light:     #02C39A;
  --mint-bg:        #E0F7F0;
  --lavender:       #7C4DFF;
  --lavender-light: #B388FF;
  --lavender-dark:  #5E35B1;
  --lavender-bg:    #F3E5FF;
  --coral:          #FF6B6B;
  --coral-light:    #FF8A80;
  --coral-bg:       #FFEBEE;
  --sunset:         #FF6D00;
  --sunset-light:   #FF9100;
  --sunset-bg:      #FFF3E0;
  --teal:           #00695C;
  --teal-light:     #00897B;
  --teal-bg:        #E0F2F1;
}

/* ── Reduced Motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms;
    --dur-normal: 0ms;
    --dur-slow:   0ms;
    --ease:       linear;
    --ease-in:    linear;
    --ease-out:   linear;
    --ease-bounce:linear;
  }
  *, *::before, *::after {
    animation-duration: 0ms !important;
    animation-delay:    0ms !important;
    transition-duration:0ms !important;
    transition-delay:   0ms !important;
    scroll-behavior:    auto !important;
  }
}