/* ============================================================
   THEME: light — TradeOn
   Aesthetic: "Spectra editorial × Rams retro lab."
   Pale retro grey-sage bg, vivid orange accent,
   Haas weight choreography (Thin 200 / Light 300 / Medium 500 / Black 900).
   References: searchsystem.co (Ryoji Ikeda / Spectra), Aeonik Fono UI,
   Dieter Rams red-orange palette member (ED3F1C lineage).
   Decision spec: themes/context_theme.md
   ============================================================ */

[data-theme="light"] {
  /* surfaces — pale retro grey-sage, Aeonik Fono lineage */
  --bg: #e3e4dc;
  --bg-grad: none;
  --panel: #ecede5;
  --panel-2: #d8d9d1;
  --panel-3: #cccdc5;
  --border: #c0c1b8;
  --border-soft: #d2d3ca;
  --hair: rgba(20, 22, 18, 0.07);

  /* ink — warm darks, not pure black */
  --text: #14160e;
  --text-strong: #000000;
  --text-dim: #4a4c42;
  --text-faint: #7a7c70;
  --text-ghost: #a8aaa0;

  /* primary accent — vivid orange */
  --accent: #DC3E1A;
  --accent-fade: rgba(220, 62, 26, 0.06);
  --accent-soft: rgba(220, 62, 26, 0.12);
  --accent-line: rgba(220, 62, 26, 0.32);
  --accent-strong: rgba(220, 62, 26, 0.50);
  --accent-glow: none;
  --accent-ink: #ffffff;

  /* alert accent — same as primary (orange already loud) */
  --accent-2: #DC3E1A;
  --accent-2-soft: rgba(220, 62, 26, 0.12);
  --accent-2-line: rgba(220, 62, 26, 0.32);
  --accent-2-glow: none;

  /* functional — daytime-tuned for grey-sage bg */
  --warn: #c2410c;
  --red: #b91c1c;
  --green: #15803d;
  --blue: #1d4ed8;
  --purple: #7c3aed;

  /* body font weight — Haas Light for Spectra-editorial body */
  --body-weight: 300;
}

/* ----------------------------------------------------------------
   LIGHT — surface refinements
   No glows. Theme-tinted scrollbar. Slightly tighter letterspacing on Light weight.
   ---------------------------------------------------------------- */

[data-theme="light"] body {
  background: var(--bg);
  letter-spacing: -0.008em;
}

/* topbar tint on grey-sage (overrides hardcoded rgba(7,8,10,0.85)) */
[data-theme="light"] .topbar {
  background: rgba(236, 237, 229, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* brand mark — orange square with white "W" */
[data-theme="light"] .brand-mark {
  color: var(--accent-ink);
}

/* primary CTA — orange bg, white text */
[data-theme="light"] .btn.primary {
  color: var(--accent-ink);
}
[data-theme="light"] .btn.primary:hover {
  background: #e85230;
}

/* scrollbar — warm grey track, orange-hint thumb */
[data-theme="light"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-theme="light"] ::-webkit-scrollbar-track {
  background: var(--bg);
}
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #c0c1b8;
  border-radius: 5px;
  border: 2px solid var(--bg);
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(220, 62, 26, 0.6);
}

/* HAAS CHOREOGRAPHY — Spectra-editorial weight contrast.
   Big numerics + display titles use Thin 200.
   Section/module titles flip to Black 900 (binary contrast). */

[data-theme="light"] .stat-value,
[data-theme="light"] .module-title,
[data-theme="light"] .focus .h,
[data-theme="light"] h1 {
  font-weight: 200;
  letter-spacing: -0.025em;
}

[data-theme="light"] .card-title,
[data-theme="light"] .briefs-tab.active,
[data-theme="light"] .crumb .now {
  font-weight: 500;
}

[data-theme="light"] .note {
  border-style: dashed;
  border-color: var(--accent-line);
}