/* ============================================================
   design-tokens.css — 案內所 Design Token 系統
   Single source of truth for all design values.
   Apple HIG-inspired: colors, spacing, radius, shadows, glass,
   animation curves, and typography.
   ============================================================ */

:root {
  /* === Colors === */
  --color-bg-primary:      #f5f5f7;
  --color-bg-secondary:    #ffffff;
  --color-bg-tertiary:     #fafafa;
  --color-bg-elevated:     rgba(255,255,255,0.72);

  --color-text-primary:    #1d1d1f;
  /* #6e6e73 on white = 5.18:1 ✓ WCAG AA (was #86868b = 3.62:1 fail)
     [recompute:WCAG 2.1 relative luminance 2026-04-17] */
  --color-text-secondary:  #6e6e73;
  --color-text-tertiary:   #aeaeb2;

  --color-border:          rgba(0,0,0,0.06);
  --color-border-strong:   rgba(0,0,0,0.12);
  --color-separator:       rgba(0,0,0,0.04);
  /* Strong visible border for interactive UI elements (icon buttons, inputs).
     #7a7a7f on white = 4.39:1; on bg-primary #f5f5f7 = 3.80:1 ✓ WCAG 1.4.11
     [recompute:WCAG 2.1 2026-04-17] */
  --border-strong:         #7a7a7f;

  --color-accent:          #F07A00;
  --color-accent-hover:    #E06E00;
  --color-accent-light:    #FFF3E0;
  --color-accent-gradient: linear-gradient(180deg, #F28A1A, #E06E00);

  --color-success:         #34c759;
  /* #196e32 on white = 6.44:1 ✓ WCAG AA (was #248a3d = 4.40:1 fail on badges)
     [recompute:WCAG 2.1 2026-04-17] */
  --color-success-text:    #196e32;
  --color-success-bg:      linear-gradient(135deg, rgba(52,199,89,0.12), rgba(52,199,89,0.04));
  --color-success-border:  rgba(52,199,89,0.15);

  --color-warning:         #ff9500;
  --color-warning-text:    #c93400;
  --color-warning-bg:      linear-gradient(135deg, rgba(255,149,0,0.12), rgba(255,149,0,0.04));
  --color-warning-border:  rgba(255,149,0,0.15);

  --color-error:           #ff3b30;
  --color-error-text:      #d70015;
  --color-error-bg:        linear-gradient(135deg, rgba(255,59,48,0.12), rgba(255,59,48,0.04));
  --color-error-border:    rgba(255,59,48,0.15);

  --color-info:            #007aff;
  --color-info-text:       #0040dd;
  --color-info-bg:         linear-gradient(135deg, rgba(0,122,255,0.12), rgba(0,122,255,0.04));
  --color-info-border:     rgba(0,122,255,0.15);

  /* === Spacing (4px grid) === */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* === Border Radius === */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* === Shadows (5-level elevation) === */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 2px 8px -2px rgba(0,0,0,0.06);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.08), 0 8px 24px -4px rgba(0,0,0,0.08);
  --shadow-lg:  0 4px 12px rgba(0,0,0,0.1), 0 16px 40px -8px rgba(0,0,0,0.12);
  --shadow-xl:  0 8px 24px rgba(0,0,0,0.12), 0 24px 60px -12px rgba(0,0,0,0.16);

  /* === Glass (Vibrancy) === */
  --glass-bg:     rgba(255,255,255,0.72);
  --glass-blur:   blur(20px) saturate(180%);
  --glass-border: 0.5px solid rgba(255,255,255,0.2);

  /* === Animation === */
  --ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.1);
  --ease-smooth:     cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast:   0.15s;
  --duration-normal: 0.25s;
  --duration-slow:   0.4s;

  /* === Typography === */
  --font-body:    'Noto Sans TC', -apple-system, system-ui, sans-serif;
  --font-display: 'Noto Serif TC', Georgia, serif;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-lg:   16px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.55;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;

  /* === Legacy aliases (backward compat during migration) === */
  --orange:       var(--color-accent);
  --orange-light: var(--color-accent-light);
  --orange-dark:  var(--color-accent-hover);
  --radius:       var(--radius-md);
  --sidebar-w:    220px;

  /* Legacy layout aliases — :root fallback when data-theme is absent */
  --bg:           var(--color-bg-primary);
  --bg-card:      var(--color-bg-secondary);
  --bg-sidebar:   var(--color-bg-secondary);
  --bg-input:     var(--color-bg-tertiary);
  --text-primary: var(--color-text-primary);
  --text-mid:     #444444;
  --text-muted:   var(--color-text-secondary);
  --border:       #E0DEDA;
  --border-strong: #7a7a7f;
  --shadow:       rgba(0,0,0,0.05);
  --nav-active-bg:   var(--color-accent-light);
  --nav-active-text: var(--color-accent-hover);
}

/* === Dark Mode === */
[data-theme="dark"] {
  --color-bg-primary:    #1c1c1e;
  --color-bg-secondary:  #2c2c2e;
  --color-bg-tertiary:   #3a3a3c;
  --color-bg-elevated:   rgba(44,44,46,0.72);

  --color-text-primary:   #f5f5f7;
  --color-text-secondary: #98989d;
  --color-text-tertiary:  #636366;

  --color-border:        rgba(255,255,255,0.08);
  --color-border-strong: rgba(255,255,255,0.15);
  --color-separator:     rgba(255,255,255,0.05);

  --color-accent-light:  rgba(240,122,0,0.15);

  --color-success-text:   #30d158;
  --color-success-bg:     linear-gradient(135deg, rgba(52,199,89,0.18), rgba(52,199,89,0.06));
  --color-success-border: rgba(52,199,89,0.2);

  --color-warning-text:   #ff9f0a;
  --color-warning-bg:     linear-gradient(135deg, rgba(255,149,0,0.18), rgba(255,149,0,0.06));
  --color-warning-border: rgba(255,149,0,0.2);

  --color-error-text:     #ff453a;
  --color-error-bg:       linear-gradient(135deg, rgba(255,59,48,0.18), rgba(255,59,48,0.06));
  --color-error-border:   rgba(255,59,48,0.2);

  --color-info-text:      #64d2ff;
  --color-info-bg:        linear-gradient(135deg, rgba(0,122,255,0.18), rgba(0,122,255,0.06));
  --color-info-border:    rgba(0,122,255,0.2);

  --shadow-xs:  0 1px 2px rgba(0,0,0,0.1);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.15), 0 2px 8px -2px rgba(0,0,0,0.15);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.2), 0 8px 24px -4px rgba(0,0,0,0.2);
  --shadow-lg:  0 4px 12px rgba(0,0,0,0.25), 0 16px 40px -8px rgba(0,0,0,0.3);
  --shadow-xl:  0 8px 24px rgba(0,0,0,0.3), 0 24px 60px -12px rgba(0,0,0,0.35);

  --glass-bg:     rgba(44,44,46,0.72);
  --glass-border: 0.5px solid rgba(255,255,255,0.08);

  /* Legacy aliases */
  --orange-light: var(--color-accent-light);
  --bg:           var(--color-bg-primary);
  --bg-card:      var(--color-bg-secondary);
  --bg-sidebar:   var(--color-bg-primary);
  --bg-input:     var(--color-bg-tertiary);
  --text-primary: var(--color-text-primary);
  --text-mid:     var(--color-text-secondary);
  --text-muted:   var(--color-text-secondary);
  --border:       #2c2c2e;
  /* #6c6c70 on #1c1c1e dark = 3.09:1 ✓ WCAG 1.4.11 [recompute:WCAG 2.1] */
  --border-strong: #6c6c70;
  --shadow:       rgba(0,0,0,0.3);
  --nav-active-bg:   var(--color-accent-light);
  --nav-active-text: var(--color-accent);
}

/* === Light Mode Legacy Aliases === */
[data-theme="light"] {
  --bg:           var(--color-bg-primary);
  --bg-card:      var(--color-bg-secondary);
  --bg-sidebar:   var(--color-bg-secondary);
  --bg-input:     var(--color-bg-tertiary);
  --text-primary: var(--color-text-primary);
  --text-mid:     #444444;
  --text-muted:   var(--color-text-secondary);
  --border:       #E0DEDA;
  --border-strong: #7a7a7f;
  --shadow:       rgba(0,0,0,0.05);
  --nav-active-bg:   var(--color-accent-light);
  --nav-active-text: var(--color-accent-hover);
}