/* ============================================================
 * CHUAJAI · Design Tokens v2 · LIGHT theme (DS v0.1)
 * ============================================================
 * Migrated 2026-05-27 from v1 (Phase 1A · DARK teal)
 *
 * Foundation decisions LOCKED:
 *
 * 1. Theme polarity     · LIGHT (cream/navy) — matches DS body pages,
 *                         logo, and 3D mascot (yellow+green pop on cream)
 * 2. Brand palette      · DS v0.1
 *                         - Lime   #7DDD5D · primary action
 *                         - Green  #33D362 · success / supporting
 *                         - Yellow #EEF452 · accent / joy
 *                         - Navy   #001228 · ink / text / outline
 * 3. Typography         · Libre Baskerville (display serif)
 *                         Noto Sans Thai (body sans)
 *                         Self-hosted woff2 variable fonts
 * 4. Nav pattern        · Hybrid-1 (route-based) — preserved from v1
 * 5. Container max      · 1200px — preserved
 * 6. Multi-col          · Selective B — preserved
 * 7. Type step-up       · Modest (26→32 h1, 20→24 h2) — preserved
 * 8. Hero/upload        · Hybrid (640px narrow above-the-fold) — preserved
 *
 * Usage:
 *   <link rel="stylesheet" href="/static/css/tokens.css">
 *   Place BEFORE any page-specific CSS.
 *
 * Migration status:
 *   ✅ Marketing pages (new) · default light theme
 *   ⚠️ Workspace pages (validator, projects) · D3 migration required
 *      until D3 ships, expect visual regression on these surfaces
 * ============================================================ */


/* ────────────────────────────────────────────────
 * FONT-FACE · self-hosted woff2 (variable axes)
 * ──────────────────────────────────────────────── */

@font-face {
  font-family: 'Libre Baskerville';
  src: url('/static/fonts/libre-baskerville.woff2') format('woff2-variations'),
       url('/static/fonts/libre-baskerville.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Libre Baskerville';
  src: url('/static/fonts/libre-baskerville-italic.woff2') format('woff2-variations'),
       url('/static/fonts/libre-baskerville-italic.woff2') format('woff2');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Sans Thai';
  src: url('/static/fonts/noto-sans-thai.woff2') format('woff2-variations'),
       url('/static/fonts/noto-sans-thai.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62.5% 100%;
  font-style: normal;
  font-display: swap;
}


:root {

  /* ─── DS v0.1 PRIMITIVES · Lime ramp ────────── */
  --lime-50:  #F2FBED;
  --lime-100: #DFF6D4;
  --lime-200: #BEEDA8;
  --lime-300: #9DE37B;
  --lime-400: #7DDD5D;  /* BASE · primary action */
  --lime-500: #5AC93C;
  --lime-600: #43A82A;
  --lime-700: #357F23;
  --lime-900: #122D0B;

  /* ─── DS v0.1 PRIMITIVES · Green ramp ───────── */
  --green-50:  #ECFBF1;
  --green-100: #CFF4DC;
  --green-200: #9EE8B7;
  --green-300: #66DC8C;
  --green-400: #33D362;  /* BASE · success */
  --green-500: #1FB14C;
  --green-600: #178A3A;
  --green-700: #126A2D;
  --green-900: #052610;

  /* ─── DS v0.1 PRIMITIVES · Yellow ramp ──────── */
  --yellow-50:  #FEFEEC;
  --yellow-100: #FCFBBE;
  --yellow-200: #F7F88A;
  --yellow-300: #EEF452;  /* BASE · accent */
  --yellow-400: #D8DE2C;
  --yellow-500: #B4BA1A;
  --yellow-600: #898E12;
  --yellow-700: #65690E;
  --yellow-900: #1F2106;

  /* ─── DS v0.1 PRIMITIVES · Navy ramp ────────── */
  --navy-50:  #F1F4F8;
  --navy-100: #DDE3EC;
  --navy-200: #B4BFD0;
  --navy-300: #7B8AA3;
  --navy-400: #4E5D77;
  --navy-500: #2C3A55;
  --navy-600: #1B2840;
  --navy-700: #0D1B33;
  --navy-900: #001228;   /* BASE · ink */

  /* ─── SEMANTIC · backgrounds (LIGHT) ────────── */
  --bg-page:        #FBFCF7;             /* cream paper · DS doc bg */
  --bg-app:         #FBFCF7;             /* app shell base */
  --bg-card:        #FFFFFF;             /* elevated card · pops from cream */
  --bg-card-hover:  var(--navy-50);      /* subtle cool tint on hover */
  --bg-tinted:      rgba(0, 18, 40, 0.04); /* 4% navy wash overlay */

  --border:         var(--navy-100);     /* soft cool border */
  --border-soft:    rgba(0, 18, 40, 0.06);

  /* ─── SEMANTIC · primary action (LIME) ──────── */
  /* Names kept for backward compat with Step 6.6 code · values shifted to DS Lime */
  --green:          var(--lime-400);     /* BASE · btn-primary, links */
  --green-bright:   var(--lime-500);     /* hover · DARKER on light for contrast */
  --green-soft:     var(--lime-100);     /* light tint · chips, active states */
  --green-glow:     rgba(125, 221, 93, 0.35); /* lime brand glow */

  /* ─── SEMANTIC · success (DS Green) ─────────── */
  --success:        var(--green-400);
  --success-soft:   var(--green-100);
  --success-text:   var(--green-700);    /* readable green on light bg */

  /* ─── SEMANTIC · accent (DS Yellow) ─────────── */
  --yellow:         var(--yellow-300);   /* premium CTAs, joy moments */
  --yellow-soft:    var(--yellow-100);   /* light yellow tint bg */

  /* ─── SEMANTIC · warning (amber kept) ───────── */
  /* Amber stays distinct from DS Yellow · used for caution/pending */
  --amber:          #B58A0B;             /* darker amber for light bg contrast */
  --amber-bg:       rgba(245, 158, 11, 0.10);

  /* ─── SEMANTIC · danger (DS Danger) ─────────── */
  --red:            #E5484D;             /* DS Danger */
  --red-bg:         rgba(229, 72, 77, 0.08);

  /* ─── SEMANTIC · text (Navy on light) ───────── */
  --text:           var(--navy-900);     /* primary · headings + body */
  --text-mute:      var(--navy-400);     /* secondary · labels */
  --text-dim:       var(--navy-300);     /* tertiary · metadata */
  --text-on-lime:   var(--navy-900);     /* text on lime bg (btn primary) */
  --text-on-dark:   #FBFCF7;             /* text on dark/navy bg */

  /* ─── Typography ─────────────────────────────── */
  --font-display:   'Libre Baskerville', 'Noto Sans Thai', Georgia, 'Times New Roman', serif;
  --font-body:      'Noto Sans Thai', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:      ui-monospace, 'Cascadia Code', Menlo, monospace;

  /* Modest scale · mobile default · stepped up at md+ */
  --fs-display:     40px;                /* hero display headlines */
  --fs-h1:          26px;
  --fs-h2:          20px;
  --fs-h3:          17px;
  --fs-body:        15px;
  --fs-small:       13px;
  --fs-tiny:        12px;

  --lh-tight:       1.2;
  --lh-snug:        1.4;
  --lh-body:        1.55;
  --lh-relaxed:     1.65;

  --fw-normal:      400;
  --fw-medium:      500;
  --fw-semibold:    600;
  --fw-bold:        700;

  /* ─── Spacing scale (4px base) ───────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ─── Border radius ──────────────────────────── */
  --radius-sm:   6px;
  --radius:      8px;
  --radius-md:   12px;
  --radius-lg:   14px;
  --radius-xl:   24px;
  --radius-2xl:  36px;
  --radius-pill: 999px;
  --radius-full: 999px;        /* DS alias */

  /* ─── Layout (preserved from v1) ──────────────── */
  --container-max:      1200px;
  --hero-narrow-max:    640px;
  --content-narrow-max: 720px;
  --sidebar-width:      232px;
  --topnav-height:      60px;
  --workbar-height:     56px;

  /* ─── Shadows (light theme · navy-based) ─────── */
  --shadow-sm:   0 1px 2px  rgba(0, 18, 40, 0.06);
  --shadow:      0 4px 12px rgba(0, 18, 40, 0.08);
  --shadow-lg:   0 16px 40px rgba(0, 18, 40, 0.12);
  --shadow-xl:   0 24px 60px rgba(0, 18, 40, 0.16);
  --shadow-glow-lime: 0 8px 24px rgba(125, 221, 93, 0.35);  /* DS brand glow */

  /* ─── DS v0.1 Gradients ──────────────────────── */
  --g-sunshine:   linear-gradient(135deg, var(--yellow-300) 0%, var(--lime-400) 100%);
  --g-fresh:      linear-gradient(135deg, var(--lime-400) 0%, var(--green-400) 100%);
  --g-bloom:      linear-gradient(135deg, var(--yellow-300) 0%, var(--lime-400) 50%, var(--green-400) 100%);
  --g-meadow:     linear-gradient(90deg, var(--green-400), var(--lime-400), var(--yellow-300));
  --g-glow:       radial-gradient(circle at 30% 30%, var(--yellow-300), var(--lime-400) 40%, var(--green-400) 100%);
  --g-whisper:    linear-gradient(180deg, var(--lime-50) 0%, var(--bg-page) 100%);
  --g-night:      linear-gradient(180deg, var(--navy-700) 0%, var(--navy-900) 100%);
  --g-night-lime: linear-gradient(135deg, var(--navy-900) 0%, var(--lime-900) 100%);

  /* ─── Motion ─────────────────────────────────── */
  --transition:      0.15s ease;
  --transition-slow: 0.3s ease;
}

/* ─── Typography step-up at md (768px+) ──────── */
@media (min-width: 768px) {
  :root {
    --fs-display: 72px;
    --fs-h1:      32px;
    --fs-h2:      24px;
  }
}

/* ────────────────────────────────────────────────
 * BASE STYLES
 * ──────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg-app);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text);
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.015em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); }

a { color: var(--lime-600); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--lime-700); }

button { font-family: inherit; }

/* ────────────────────────────────────────────────
 * LAYOUT UTILITIES
 * ──────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-narrow {
  width: 100%;
  max-width: var(--content-narrow-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-hero {
  width: 100%;
  max-width: var(--hero-narrow-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* ─── Card grid · Decision 3 (Selective B) ───── */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Split layout · Decision 3 (validator) ───── */
.split-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 1024px) {
  .split-layout {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
  }
}

/* ────────────────────────────────────────────────
 * LAYOUT SHELL · Decision 1 (Hybrid-1 route-based)
 * Applied via body[data-layout="marketing|workspace"]
 * ──────────────────────────────────────────────── */

/* ─── Marketing mode · top nav ───────────────── */
.topnav {
  height: var(--topnav-height);
  border-bottom: 1px solid var(--border);
  background: var(--bg-app);
  display: flex;
  align-items: center;
  padding: 0 var(--space-8);
  gap: var(--space-8);
  position: sticky;
  top: 0;
  z-index: 50;
}

.topnav-items { display: flex; gap: var(--space-1); flex: 1; margin-left: var(--space-5); }
.topnav-item {
  color: var(--text-mute);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: var(--transition);
}
.topnav-item:hover { color: var(--text); background: var(--bg-card-hover); }
.topnav-item.active { color: var(--lime-700); background: var(--lime-100); }

/* ─── Workspace mode · sidebar + workbar ─────── */
.workspace-layout {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  padding: var(--space-5) var(--space-3);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.workspace-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.workbar {
  height: var(--workbar-height);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  padding: 0 var(--space-7);
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* Mobile: sidebar collapses to drawer (impl per-page) */
@media (max-width: 767px) {
  .workspace-layout { flex-direction: column; }
  .sidebar {
    width: 100%; height: auto; position: relative;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

/* ────────────────────────────────────────────────
 * SHARED COMPONENTS
 * ──────────────────────────────────────────────── */

/* Brand mark */
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-bold);
  font-size: 17px;
  color: var(--text);
}
.brand-mark {
  width: 30px; height: 30px;
  border-radius: var(--radius);
  background: var(--g-fresh);
  display: flex; align-items: center; justify-content: center;
  color: var(--navy-900);
  font-weight: var(--fw-bold);
  font-size: 14px;
}
.brand-name { letter-spacing: -0.01em; }
.brand-name .accent { color: var(--lime-600); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  border: none;
  font-weight: var(--fw-semibold);
  font-size: 14px;
  cursor: pointer;
  transition: var(--transition);
  font-family: inherit;
}
.btn-primary {
  background: var(--lime-400);
  color: var(--navy-900);
}
.btn-primary:hover {
  background: var(--lime-500);
  box-shadow: var(--shadow-glow-lime);
}
.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-ghost:hover {
  border-color: var(--lime-400);
  color: var(--lime-700);
}

/* Avatar */
.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--g-fresh);
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--navy-900);
  flex-shrink: 0;
}

/* Chip / tag */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fs-tiny);
  color: var(--text-mute);
}
.chip-amber {
  background: var(--amber-bg);
  border-color: var(--amber);
  color: var(--amber);
}
.chip-green {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success-text);
}
.chip-lime {
  background: var(--lime-100);
  border-color: var(--lime-400);
  color: var(--lime-700);
}
.chip-yellow {
  background: var(--yellow-soft);
  border-color: var(--yellow-400);
  color: var(--yellow-700);
}

/* Cards */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

/* Heart accent (จุดเด่นของ "ใจ") */
.heart-accent { color: var(--lime-600); }

/* ────────────────────────────────────────────────
 * PHASE 1B · Desktop chrome (md+ only)
 * Mobile UX unchanged · cj-bottom-nav stays as floor nav at <md
 * ──────────────────────────────────────────────── */

/* Wrapper: inert below md (display:contents → unwrapped layout)
 * flex container at md+ so [sidebar | main] sit side-by-side.
 * Intentionally NOT using .workspace-layout — that class is
 * flex-always; this one gates on viewport. */
.cj-workspace-shell { display: contents; }

@media (max-width: 767px) {
  /* Force-hide any element marked desktop-only · !important
   * because element-specific display rules (e.g. .topnav has
   * display:flex baked into tokens.css §2) would otherwise win. */
  .cj-desktop-only { display: none !important; }
}

@media (min-width: 768px) {
  .cj-workspace-shell { display: flex; min-height: 100vh; }
  .cj-bottom-nav { display: none !important; }
  /* Override shell.css:31 unconditional 68px bottom padding */
  body { padding-bottom: 0 !important; }
}

/* Sidebar item · ported from foundation reference §6 */
.sidebar-nav {
  display: flex; flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-4);
}
.sidebar-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--text-mute);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: var(--transition);
}
.sidebar-item:hover { background: var(--bg-card-hover); color: var(--text); }
.sidebar-item.active { background: var(--lime-100); color: var(--lime-700); }
.sidebar-item.disabled { opacity: 0.45; pointer-events: none; cursor: not-allowed; }
.sidebar-item .icon {
  width: 20px; height: 20px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-item .badge {
  margin-left: auto;
  background: var(--bg-card-hover); color: var(--text-dim);
  font-size: 10px; font-weight: var(--fw-semibold);
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
}
.sidebar .brand {
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
  text-decoration: none;
}


/* ════════════════════════════════════════════════════════════
 * Legacy --cj-* bridge · added Phase D1.6
 * ════════════════════════════════════════════════════════════
 * shell.css + template inline <style> declare an older --cj-*
 * prefix system (Phase 1A and prior · dark theme defaults).
 * This bridge maps those legacy names to new DS v0.1 tokens
 * so the cascade resolves to light theme without touching
 * shell.css or the FROZEN templates (quote_validator.html etc).
 *
 * !important defends against:
 *   • shell.css :root --cj-bg: #0a1612 (etc)
 *   • template inline <style> :root --cj-bg: #0a1612 (etc)
 *
 * Removable once D3 migrates templates to new token names.
 * ════════════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --cj-bg-deep:        var(--navy-700)       !important;
  --cj-bg:             var(--bg-app)         !important;
  --cj-bg-2:           var(--bg-card)        !important;
  --cj-surface:        var(--bg-card)        !important;
  --cj-surface-strong: var(--bg-card-hover)  !important;
  --cj-surface-hover:  var(--bg-card-hover)  !important;

  /* Brand · primary action */
  --cj-primary:        var(--lime-400)       !important;
  --cj-primary-soft:   var(--lime-100)       !important;
  --cj-primary-bg:     var(--lime-50)        !important;

  /* Text · light-theme readable */
  --cj-text:           var(--text)           !important;
  --cj-text-high:      var(--text)           !important;
  --cj-text-mid:       var(--text-mute)      !important;
  --cj-text-low:       var(--text-dim)       !important;
  --cj-text-muted:     var(--text-mute)      !important;

  /* Borders */
  --cj-border:         var(--border)         !important;
  --cj-border-glow:    var(--lime-200)       !important;

  /* Status */
  --cj-error:          var(--red)            !important;

  /* Typography */
  --cj-font-display:   var(--font-display)   !important;
  --cj-font-body:      var(--font-body)      !important;

  /* Misc */
  --cj-bottom-nav-h:   68px                  !important;
}


/* ════════════════════════════════════════════════════════════
 * Tailwind text rescue · D1.6.5
 * ════════════════════════════════════════════════════════════
 * quote_validator.html v0.9 FROZEN uses Tailwind CDN text-*
 * utility classes designed for dark backgrounds. After light
 * theme flip, these become invisible (contrast ~1.05:1 vs cream).
 *
 * Targeted overrides map each found class to readable equivalent.
 * Removable when D3 migrates templates off Tailwind utilities.
 * ════════════════════════════════════════════════════════════ */

/* Primary text · was hero/body on dark → readable navy */
.text-emerald-50,
.text-emerald-100 {
  color: var(--text) !important;
}

/* Warnings · amber on dark → darker amber readable on cream */
.text-amber-50,
.text-amber-100 {
  color: #92400E !important;  /* amber-800 */
}
.text-amber-300 {
  color: #B45309 !important;  /* amber-700 */
}

/* Errors · light red on dark → darker red readable */
.text-red-50,
.text-red-100 {
  color: #991B1B !important;  /* red-800 */
}

/* Info · cyan accent → darker cyan readable */
.text-cyan-300 {
  color: #0E7490 !important;  /* cyan-700 */
}

/* Decorative pinks · use muted neutral OR readable rose */
.text-rose-200,
.text-rose-300 {
  color: var(--text-mute) !important;
}
.text-rose-400 {
  color: #BE185D !important;  /* rose-700 */
}

/* Note: bg-*-500 utilities (bg-emerald-500, bg-amber-500, bg-red-500,
 * bg-rose-500, bg-cyan-300/400) are saturated mid-tones that work as
 * backgrounds on either theme — left untouched. */


/* ════════════════════════════════════════════════════════════
 * Inline <style> rescue · D1.6.6 · quote_validator.html
 * ════════════════════════════════════════════════════════════
 * Template has 135 lines of inline <style> hardcoded for dark theme.
 * Biggest single issue: body { color: #ecfdf5 } inherits to all text,
 * invisible on cream bg. Plus .glass*, .drop-zone, .chip, .sev-*,
 * .jai-bubble use light colors meant for dark backgrounds.
 *
 * All overrides with !important to win over inline <style>.
 * Removable when D3 refactors template to use tokens directly.
 * ════════════════════════════════════════════════════════════ */

/* PRIMARY · body text color cascade root (biggest single fix) */
body {
  color: var(--text) !important;
}

/* Glass surfaces · opaque white-ish for light theme */
.glass {
  background: rgba(255, 255, 255, 0.80) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}
.glass-strong {
  background: rgba(255, 255, 255, 0.92) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
.glass-subtle {
  background: rgba(255, 255, 255, 0.60) !important;
  border-color: var(--border-soft) !important;
}
.glass-input {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.glass-input:focus {
  background: #ffffff !important;
  border-color: var(--lime-400) !important;
  box-shadow: 0 0 0 4px var(--lime-100) !important;
}

/* Drop zone · file upload */
.drop-zone {
  background: var(--lime-50) !important;
  border-color: var(--lime-400) !important;
}
.drop-zone:hover,
.drop-zone.dragging {
  background: var(--lime-100) !important;
  border-color: var(--lime-500) !important;
}
.drop-zone.has-file {
  background: var(--lime-100) !important;
  border-color: var(--lime-500) !important;
}

/* Severity chips (alerts) · keep tinted bg, darken text for read */
.sev-green        { color: var(--green-700) !important; }
.sev-green-strong { color: var(--green-700) !important; font-weight: 600; }
.sev-yellow       { color: #92400E !important; }  /* amber-800 */
.sev-yellow-strong{ color: #B45309 !important; font-weight: 600; }
.sev-orange       { color: #9A3412 !important; }  /* orange-800 */
.sev-orange-strong{ color: #C2410C !important; font-weight: 600; }
.sev-red          { color: #991B1B !important; }  /* red-800 */
.sev-red-strong   { color: #B91C1C !important; font-weight: 600; }

/* Region & tag chips (pills) */
.chip {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text-mute) !important;
}
.chip:hover {
  background: var(--bg-card-hover) !important;
}
.chip.active {
  background: var(--lime-100) !important;
  border-color: var(--lime-400) !important;
  color: var(--lime-700) !important;
}

/* Jai chat bubble */
.jai-bubble {
  background: #ffffff !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
.jai-bubble::before {
  background: #ffffff !important;
  border-left-color: var(--border) !important;
  border-bottom-color: var(--border) !important;
}

/* CTA primary disabled (was: dark teal text on dark) */
.cta-primary:disabled {
  background: var(--bg-card-hover) !important;
  color: var(--text-dim) !important;
}


/* ════════════════════════════════════════════════════════════
 * Aggressive text rescue · D1.6.7
 * ════════════════════════════════════════════════════════════
 * Last invisible-text cases (hero h1, labels, chip span text)
 * have React JSX inline style={{color:'#ecfdf5'}} which compiles
 * to <h1 style="color: rgb(236, 253, 245)">. Inline style attr
 * has level-3 specificity, beats class rules. External !important
 * still wins. Use attribute selector + element targets.
 * ════════════════════════════════════════════════════════════ */

/* Headings · React inline styles common on h1/h2 */
h1, h2, h3, h4, h5, h6 {
  color: var(--text) !important;
}

/* Form labels */
label {
  color: var(--text) !important;
}

/* Inline-style color catch · hex form (rare) */
[style*="#ecfdf5"],
[style*="#d1fae5"],
[style*="#a7f3d0"],
[style*="#6ee7b7"] {
  color: var(--text) !important;
}

/* Inline-style color catch · rgb form (React renders this way) */
[style*="rgb(236, 253, 245)"],   /* #ecfdf5 emerald-50 */
[style*="rgb(209, 250, 229)"],   /* #d1fae5 emerald-100 */
[style*="rgb(167, 243, 208)"],   /* #a7f3d0 emerald-200 */
[style*="rgb(110, 231, 183)"] {  /* #6ee7b7 emerald-300 */
  color: var(--text) !important;
}

/* Amber/orange/red inline catches */
[style*="rgb(254, 243, 199)"],   /* #fef3c7 amber-100 */
[style*="rgb(252, 211, 77)"]  {  /* #fcd34d amber-300 */
  color: #B45309 !important;
}
[style*="rgb(254, 226, 226)"],   /* #fee2e2 red-100 */
[style*="rgb(252, 165, 165)"] {  /* #fca5a5 red-300 */
  color: #991B1B !important;
}
[style*="rgb(255, 237, 213)"],   /* #ffedd5 orange-100 */
[style*="rgb(253, 186, 116)"] {  /* #fdba74 orange-300 */
  color: #9A3412 !important;
}

/* Force descendants of .chip / .sev-* to inherit parent color
 * (catches <span> wrapped text with its own light color) */
.chip *,
.chip span,
.sev-green *, .sev-yellow *,
.sev-orange *, .sev-red * {
  color: inherit !important;
}


/* ════════════════════════════════════════════════════════════
 * Custom text-text-* utility rescue · D1.6.8
 * ════════════════════════════════════════════════════════════
 * quote_validator.html uses custom Tailwind theme extension
 * classes (text-text-high/mid/low) defined via CDN config to
 * map to OLD --cj-text-* tokens (light colors for dark theme).
 * Override for light theme readability.
 * ════════════════════════════════════════════════════════════ */
.text-text-high { color: var(--text)      !important; }
.text-text-mid  { color: var(--text-mute) !important; }
.text-text-low  { color: var(--text-dim)  !important; }


/* ════════════════════════════════════════════════════════════
 * Font activation · D1.8
 * ════════════════════════════════════════════════════════════
 * quote_validator.html inline <style> hardcodes
 *   body { font-family: 'IBM Plex Sans Thai', system-ui, sans-serif }
 * which bypasses the --cj-font-body bridge. Force brand body font.
 * Removable when D3 refactors the template off inline <style>.
 * ════════════════════════════════════════════════════════════ */
body {
  font-family: var(--font-body) !important;
}


/* ════════════════════════════════════════════════════════════
 * Logo wiring · D1.9
 * ════════════════════════════════════════════════════════════
 * Full-color logo lockup (mascot + wordmark) replaces the old
 * CSS gradient square .brand-mark + .brand-name text in
 * _shell.html topnav + sidebar brand. Sized to fit both.
 * ════════════════════════════════════════════════════════════ */
.brand-logo {
  height: 38px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  /* slightly larger in sidebar where vertical space allows */
  .sidebar .brand-logo { height: 42px; }
}