/*
  Apple × LVMH Design System  ·  v2026.05.2  ·  Simplified
  ─────────────────────────────────────────────────────────────────
  Source of truth — consumed by app.html via sync-design.py.
  See design-system.html for a visual reference.

  Font substitutions (flag for production):
  • Display: Cormorant → Didot LT Pro / Sabon
  • UI Sans:  DM Sans  → SF Pro Text (Apple license)
  • Mono:     DM Mono  → SF Mono
*/

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=DM+Mono:wght@400;500&display=block');

/* ─────────────────────────────────────────
   BASE COLOR PALETTE
   ───────────────────────────────────────── */

:root {

  /* ── Gold (sacred accent · 4 steps) ── */
  --gold-100: #FDF8ED;
  --gold-300: #E8CF8A;
  --gold-400: #D4B46A;   /* Soft gold · 圖表主填充（比 500 淡） */
  --gold-500: #C09A3A;   /* Primary */
  --gold-700: #7A5E1A;

  /* ── Ivory (warm canvas · 4 steps) ── */
  --ivory-50:  #FDFCFA;
  --ivory-100: #FAFAF8;  /* Canvas */
  --ivory-200: #F5F2EC;  /* Cream */
  --ivory-400: #E2DDD3;  /* Stone */

  /* ── Charcoal (type & dark · 6 steps) ── */
  --charcoal-50:  #F4F3F1;
  --charcoal-300: #9E9890;
  --charcoal-500: #565049;
  --charcoal-700: #252119;  /* Primary body text */
  --charcoal-800: #151410;  /* Rich black */
  --charcoal-900: #0C0B09;  /* Near black */

  /* ── Pure ── */
  --pure-white: #FFFFFF;
  --pure-black: #000000;

  /* ─────────────────────────────────────────
     SEMANTIC TOKENS — Light Mode
     ───────────────────────────────────────── */

  /* Backgrounds */
  --bg-canvas:       var(--ivory-100);
  --bg-surface:      var(--ivory-50);
  --bg-subtle:       var(--ivory-200);     /* Section fill, inputs */
  --bg-dark:         var(--charcoal-900);
  --bg-dark-surface: var(--charcoal-800);

  /* Foreground / text */
  --fg-primary:     var(--charcoal-700);
  --fg-secondary:   var(--charcoal-500);
  --fg-tertiary:    var(--charcoal-300);
  --fg-inverse:     var(--ivory-100);
  --fg-inverse-sec: rgba(250, 250, 248, 0.55);

  /* Accent */
  --accent:         var(--gold-500);
  --accent-light:   var(--gold-300);
  --accent-dark:    var(--gold-700);
  --accent-subtle:  var(--gold-100);

  /* ── Graphic / Data-viz（圖表色，整體偏淡）── */
  --chart-1: var(--gold-400);      /* 主：高亮類別（軟金） */
  --chart-2: var(--charcoal-500);  /* 深灰 */
  --chart-3: var(--gold-300);      /* 淺金 */
  --chart-4: var(--charcoal-300);  /* 中灰 */
  --chart-5: var(--ivory-400);     /* stone */
  --chart-6: var(--ivory-200);     /* cream */
  --chart-primary:   var(--gold-400);
  --chart-secondary: var(--charcoal-300);
  --chart-track:     var(--ivory-200);
  --chart-empty:     var(--ivory-400);

  /* Borders */
  --border-subtle:  rgba(37, 33, 25, 0.08);
  --border-default: rgba(37, 33, 25, 0.14);
  --border-strong:  rgba(37, 33, 25, 0.28);

  /* States */
  --state-hover-bg:   rgba(37, 33, 25, 0.04);
  --state-press-bg:   rgba(37, 33, 25, 0.08);
  --state-focus-ring: 0 0 0 3px rgba(192, 154, 58, 0.30);

  /* ─────────────────────────────────────────
     SPACING  (4-pixel rhythm · 10 steps)
     ───────────────────────────────────────── */

  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Container widths */
  --container-sm: 640px;
  --container-md: 960px;
  --container-lg: 1200px;

  /* ─────────────────────────────────────────
     RADIUS  (near-flat · 4 steps)
     ───────────────────────────────────────── */

  --radius-none: 0px;
  --radius-xs:   2px;   /* Tags, pills */
  --radius-sm:   4px;   /* Cards, buttons */
  --radius-md:   6px;   /* Inputs */
  /* For badges use border-radius: 9999px inline */

  /* ─────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────── */

  /* Families */
  --font-display: 'Cormorant', 'Didot LT Pro', 'Bodoni MT', Georgia, serif;
  --font-sans:    'DM Sans', 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'DM Mono', 'SF Mono', 'Courier New', monospace;

  /* Scale (7 sizes) */
  --text-xs:    11px;   /* caption, label */
  --text-sm:    13px;   /* body-sm */
  --text-base:  15px;   /* body, default */
  --text-lg:    20px;   /* title */
  --text-xl:    32px;   /* display-sm */
  --text-hero:  44px;   /* page hero */
  --text-2xl:   60px;   /* display */

  /* Weights */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.45;
  --leading-relaxed: 1.65;

  /* Tracking */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.06em;
  --tracking-widest:   0.20em;

  /* ─────────────────────────────────────────
     MOTION  (3 curves · 3 durations)
     ───────────────────────────────────────── */

  --ease-out:       cubic-bezier(0.0,  0.0, 0.2,  1);
  --ease-in-out:    cubic-bezier(0.4,  0.0, 0.2,  1);
  --ease-editorial: cubic-bezier(0.16, 1,   0.3,  1);   /* Signature curve */

  --duration-fast:      200ms;
  --duration-default:   300ms;
  --duration-editorial: 800ms;

  /* ─────────────────────────────────────────
     SHADOWS  (3 levels)
     ───────────────────────────────────────── */

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 8px 32px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12), 0 24px 64px rgba(0,0,0,0.08);

  /* ─────────────────────────────────────────
     BLUR  (material)
     ───────────────────────────────────────── */

  --blur-sm:  blur(8px);
  --blur-md:  blur(16px);
  --blur-lg:  blur(24px) saturate(180%);

}

/* ─────────────────────────────────────────
   DARK MODE
   ───────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --bg-canvas:       var(--charcoal-900);
    --bg-surface:      var(--charcoal-800);
    --bg-subtle:       rgba(255, 255, 255, 0.05);

    --fg-primary:      var(--ivory-200);
    --fg-secondary:    rgba(250, 250, 248, 0.60);
    --fg-tertiary:     rgba(250, 250, 248, 0.35);
    --fg-inverse:      var(--charcoal-900);

    --border-subtle:   rgba(250, 250, 248, 0.06);
    --border-default:  rgba(250, 250, 248, 0.12);
    --border-strong:   rgba(250, 250, 248, 0.24);

    --state-hover-bg:  rgba(250, 250, 248, 0.04);
    --state-press-bg:  rgba(250, 250, 248, 0.08);
  }
}

/* ─────────────────────────────────────────
   TYPE CLASSES  (8 classes)
   ───────────────────────────────────────── */

.type-hero {
  font-family: var(--font-display);
  font-size: var(--text-hero);       /* 44px */
  font-weight: var(--weight-regular); /* 400 — a touch more body */
  font-style: italic;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.type-display {
  font-family: var(--font-display);
  font-size: var(--text-2xl);          /* 60px */
  font-weight: var(--weight-regular);  /* 400 — a touch more body */
  font-style: italic;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.type-display-sm {
  font-family: var(--font-display);
  font-size: var(--text-xl);           /* 32px */
  font-weight: var(--weight-medium);   /* 500 — was 400 */
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.type-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);           /* 20px */
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}

.type-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);           /* 11px */
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-secondary);
}

.type-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);         /* 15px */
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}

.type-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-sm);           /* 13px */
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-secondary);
}

.type-caption {
  font-family: var(--font-sans);
  font-size: var(--text-xs);           /* 11px */
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-tertiary);
}

.type-price {
  font-family: var(--font-mono);
  font-size: var(--text-base);         /* 15px */
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}

.type-accent { color: var(--accent); }

/* ─────────────────────────────────────────
   DIVIDER  — vertical separator between adjacent UI controls
   ───────────────────────────────────────── */

/* ─────────────────────────────────────────
   CHIP  — 通用快捷问题 chip（ActionChips + inputChips 共用）
   border-strong + fg-primary 确保明暗模式下清晰可读
   ───────────────────────────────────────── */

.chip {
  padding: 5px var(--space-3);
  border-radius: var(--radius-xs);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  border: 1px solid var(--border-default);
  background: transparent;
  color: var(--fg-primary);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: inherit;
  transition: border-color var(--duration-fast), color var(--duration-fast);
}
.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─────────────────────────────────────────
   DIVIDER  — vertical separator between adjacent UI controls
   ───────────────────────────────────────── */

.divider-v {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: var(--border-default);
  flex-shrink: 0;
  margin: 0 var(--space-3);   /* 12px each side — gives 24px touch space */
  align-self: center;
}
.divider-v--on-dark {
  background: rgba(255, 255, 255, 0.20);
}

/* ─────────────────────────────────────────
   MIC BUTTON  — voice input (dark contexts)
   ───────────────────────────────────────── */

.mic-btn {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  border: none;
  background: rgba(255, 255, 255, 0.10);
  color: var(--fg-inverse);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-family: inherit;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
.mic-btn svg { width: 18px; height: 18px; }

/* inline variant — sits inside input field, anchored right */
.mic-btn--inline {
  width: 36px;
  height: 36px;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
}
.mic-btn--inline svg { width: 16px; height: 16px; }
.mic-btn--inline.mic-btn--idle { color: var(--fg-inverse-sec); }
.mic-btn--inline.mic-btn--idle:hover { color: var(--fg-inverse); background: rgba(255,255,255,0.08); }

/* idle */
.mic-btn--idle:hover { background: rgba(255, 255, 255, 0.18); }

/* recording — gold fill + pulse ring + breathing icon */
.mic-btn--recording {
  background: var(--accent);
  color: var(--fg-inverse);
}
.mic-btn--recording:hover { background: var(--accent-dark); }
.mic-btn--recording::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--accent);
  animation: mic-pulse 1.6s var(--ease-out) infinite;
  pointer-events: none;
}
.mic-btn--recording svg {
  animation: mic-breathe 1.2s var(--ease-in-out) infinite;
}
@keyframes mic-pulse {
  0%   { transform: scale(1);    opacity: 0.65; }
  100% { transform: scale(1.65); opacity: 0;    }
}
@keyframes mic-breathe {
  0%, 100% { transform: scale(1);    }
  50%      { transform: scale(1.10); }
}

/* processing — spinner */
.mic-btn--processing {
  background: rgba(255, 255, 255, 0.10);
  cursor: default;
}
.mic-btn__spinner {
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.20);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: mic-spin 0.8s linear infinite;
}
@keyframes mic-spin {
  to { transform: rotate(360deg); }
}

/* ── Loading Spinner ──────────────────────────────────────────────────── */
/* Standard card/module loading state. Usage: <div class="spinner"></div>  */
@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--ivory-400);
  border-top-color: var(--charcoal-500);
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
/* Center inside a card: wrap with .spinner-wrap */
.spinner-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-10) 0;
}