/* Theme: Chai — AI-app grammar (composer/result), exact-fidelity port of
 * @chai-ui/tokens v0.10.1 (dist/css/tokens.css, fetched from npm — never
 * "inspired by"). Green accent #009747 on an 11-step neutral ramp,
 * Inter + IBM Plex Mono (weights 440/540/620), radius 6/10/16,
 * motion: decelerate cubic-bezier(0.2,0,0,1) + single-overshoot growth
 * cubic-bezier(0.34,1.2,0.64,1). Fonts load in PARALLEL via <link> in
 * index.html (same rule as broadsheet — no @import). */

[data-theme="chai"] {
  color-scheme: light;

  /* Neutral ramp — verbatim chai-color-root-gray-* */
  --color-paper:    #f8f8f8;  /* control-surface */
  --color-paper-2:  #e9e9e9;  /* surface-hover / field */
  --color-paper-3:  #e0e0e0;  /* track / divider */
  --color-paper-4:  #d9d9d9;
  --color-ink:      #1a1a1a;  /* control-text-strong */
  --color-ink-2:    #4a4a4a;  /* control-text */
  --color-ink-mute: #666666;  /* control-text-muted */
  --color-rule:     #9e9e9e;  /* border-soft */
  --color-hairline: #c2c2c2;  /* border-faint */
  --color-accent:      #009747;
  --color-accent-deep: #006d32;
  /* AA fix (Oct 24 2026): the verbatim chai green #009747 holds white ink at
     only 3.81:1 — fine for AA-large only, but our button labels are 15-17px/600.
     Button face (and every white-ink surface) uses the nearest darker green
     that clears 4.5:1 at ANY size. The raw accent stays #009747 for borders,
     art, and gradients. */
  --color-accent-btn:  #008540;  /* 4.74:1 white ink */
  --color-accent-ink:  #ffffff;  /* semantic-text-on-accent */
  --color-accent-2:      #007c89;  /* region-1 cyan */
  --color-accent-2-deep: #005f68;
  --color-accent-3:      #c14e42;  /* danger red doubles as coral */
  --color-accent-3-deep: #a13c33;
  --color-teal:        #007c89;
  --color-mint:        #96f6c5;  /* accent-soft */
  --color-mint-deep:   #006d32;
  --color-lavender:    #8c7fff;
  --color-lavender-deep: #6d28d9;  /* region-5 violet */
  --color-saffron:     #c98226;  /* warning */
  --color-saffron-deep: #8c5615;
  --color-terracotta:  #b45309;  /* region-3 orange */
  --color-terracotta-deep: #8c5615;
  --color-focus:       #1565c0;  /* region-4 blue */

  /* Chai extras (used by the generation-progress treatment below). */
  --chai-ai-gradient: linear-gradient(90deg, #7b6fd6, #e08d75, #afc9f2, #7b6fd6);
  --chai-danger-subtle: #f0c2bc;
  --chai-accent-subtle: #e9f4e6;
  --chai-accent-soft: #96f6c5;

  /* Shared Local Way contract */
  --color-rule-2: var(--color-hairline);
  --color-muted: var(--color-ink-mute);
  --color-neutral: var(--color-ink-2);
  --color-coral: var(--color-accent-3);
  --color-line: var(--color-hairline);
  --color-mint-strong: var(--color-mint-deep);
  --color-surface: var(--color-paper);
  --tint-pear:     rgba(0, 151, 71, 0.10);
  --tint-cyan:     rgba(0, 124, 137, 0.12);
  --tint-coral:    rgba(193, 78, 66, 0.12);
  --tint-mint:     rgba(0, 151, 71, 0.10);
  --tint-lavender: rgba(109, 40, 217, 0.10);
  --tint-saffron:  rgba(201, 130, 38, 0.12);
  --tint-terracotta: rgba(180, 83, 9, 0.12);

  /* Type — Inter (body/display), IBM Plex Mono (labels) */
  --font-display: "Inter", -apple-system, BlinkMacSystemFont, ui-sans-serif, sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, ui-sans-serif, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-label:   var(--font-mono);

  /* Chai type scale (12/14/16/20/26/34) mapped onto the contract stops */
  --text-xs:  0.75rem;   /* 12 */
  --text-sm:  0.875rem;  /* 14 */
  --text-base: 1rem;     /* 16 — consumer rule: reading text >= 16px */
  --text-md:  1rem;
  --text-lg:  1.25rem;   /* 20 */
  --text-xl:  1.625rem;  /* 26 */
  --text-2xl: 2.125rem;  /* 34 */
  --text-3xl: clamp(2.25rem, 5vw, 3.25rem);
  --text-display:   clamp(2.75rem, 5.5vw + 0.75rem, 4.75rem);
  --text-display-s: clamp(2rem, 3.25vw + 1rem, 3rem);

  --tracking-display: -0.01em;
  --tracking-tight:   0;
  --tracking-normal:  0.005em;   /* chai body tracking 0.25-0.5px */
  --tracking-label:   0.03em;
  --tracking-micro:   0.05em;

  --lh-tight:  1.15;
  --lh-snug:   1.18;
  --lh-normal: 1.45;
  --lh-relaxed: 1.7;

  /* Space (4/8/12/16/24/32/48/64) */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 4rem;
  --space-3xl: 6.5rem;
  --space-4xl: 10rem;
  --section-gap: 6.5rem;
  --section-head-gap: 1.75rem;
  --page-max: 78rem;
  --page-gutter: clamp(1.25rem, 4vw, 3rem);
  --measure: 60ch;
  --bar-h: 66px;

  /* Radius 6/10/16/full */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-card: 16px;
  --radius-pill: 999px;
  --radius-input: 10px;
  --rule-card: 1px;
  /* chai shadow-menu — the one elevation in the system */
  --shadow-card: 0 1px 2px rgba(0,0,0,0.30), 0 2px 6px 2px rgba(0,0,0,0.15);
  --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.30), 0 4px 10px 3px rgba(0,0,0,0.16);

  /* Motion — chai durations + easings */
  --ease-out:    cubic-bezier(0.2, 0, 0, 1);
  --ease-soft:   cubic-bezier(0.2, 0, 0, 1);
  --ease-snap:   cubic-bezier(0.2, 0, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1);  /* growth: single overshoot */
  --dur-micro:  120ms;
  --dur-short:  200ms;
  --dur-long:   360ms;
  --dur-wobble: 480ms;
  --dur-burst:  360ms;
  --dur-tick:   1200ms;

  /* Buttons: white ink on chai green (3.9:1 — large UI text, matches chai
     semantic on-accent; deep green #006d32 is the AA text color on paper). */
  --btn-face: var(--color-accent-btn);
  --btn-ink: var(--color-accent-ink);
  --btn-edge: var(--color-accent-deep);
  --btn-cast: rgba(0, 109, 50, 0.35);
  --btn-line: var(--color-accent-deep);
  --hl: rgba(0, 151, 71, 0.22);
  --st: var(--color-accent);
  --st-deep: var(--color-accent-deep);
  --st-ink: var(--color-accent-ink);
  --st-tint: var(--tint-mint);
}

/* ===== Component treatments — quiet app-like surfaces, pill controls ===== */
/* Buttons: solid faces carry ink at 4.5:1+ (WCAG AA, any size) — see
   --color-accent-btn note in the token block above. */

[data-theme="chai"] body {
  font-weight: 440;  /* chai regular: variable-font mid weight */
  font-feature-settings: "kern", "liga";
}
[data-theme="chai"] :is(em, .hl) { background-image: linear-gradient(var(--hl) 0 0); }
[data-theme="chai"] :is(.eyebrow, .form-label, .theme-chip, .quick-city) {
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}

/* Floating nav: raised card with the menu shadow (chai control-surface pattern) */
[data-theme="chai"] .nav__inner,
[data-theme="chai"] .nav.is-floating .nav__inner {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-hairline);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

/* Chips read as chai pills */
[data-theme="chai"] :is(.theme-chip, .quick-city, .search-input, .guide-search__panel, .search-input::placeholder) { border-radius: 999px; }
[data-theme="chai"] .theme-chip[data-active="true"],
[data-theme="chai"] .theme-chip.active {
  background: var(--chai-accent-subtle);
  color: var(--color-accent-deep);
  border-color: var(--color-accent);
}

/* Cards: 16px radius, soft elevation, 1px faint border */
[data-theme="chai"] :is(.city-card, .library-card, .guide-day, .food-spot, .neighborhood-card, .essential-card, .search-result, .auth-modal, .flagship-card, .theme-chip) {
  border-radius: var(--radius-card);
}

/* Buttons: rounded-12, no cast edge — chai controls are flat + shadow.
   Specificity (0,2,0) beats the element-level --btn-* declarations in
   styles.css .btn/.btn--mint (same trap broadsheet fixed): white ink on
   chai green, the semantic on-accent pairing. */
[data-theme="chai"] :is(.btn, .btn--mint) {
  --btn-face: var(--color-accent-btn);
  --btn-ink: var(--color-accent-ink);
  --btn-edge: var(--color-accent-deep);
  --btn-cast: rgba(0, 109, 50, 0.35);
  --btn-line: var(--color-accent-deep);
  border-radius: 12px;
}
[data-theme="chai"] .nearme-fab {
  background: var(--color-accent-btn);
  color: var(--color-accent-ink);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
[data-theme="chai"] #save-offline-btn[data-saved-state="saved"] {
  --btn-face: var(--color-accent-btn);
  --btn-ink: var(--color-accent-ink);
}

/* Guide generation progress: the signature chai AI gradient is reserved for
 * the one generative moment (sweep line under the generating header) — never
 * decorative. Scoped to the generating state only. */
[data-theme="chai"] .generate-panel.is-generating::after {
  content: "";
  display: block;
  height: 2px;
  border-radius: 999px;
  background: var(--chai-ai-gradient);
  background-size: 200% 100%;
  animation: chai-sweep 1.4s linear infinite;
  margin-top: 8px;
}
@keyframes chai-sweep { to { background-position: 200% 0; } }

[data-theme="chai"] .mobile-cta {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-hairline);
}
[data-theme="chai"] .footer { background: var(--color-paper); }
[data-theme="chai"] .theme-switcher {
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-mono);
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="chai"] .generate-panel.is-generating::after { animation: none; }
}