/* =============================================================================
   Japan Stock Dojo — Design Tokens (v2 · neutral-surface / single green accent)

   Mirrors frontend/src/styles/tokens.css (the app). See docs/product/design_system.md.
   Supersedes the old crimson/blue/amber palette (v1.1).

   RULES: neutral base, ONE brand accent (green --a), price-direction up/down. Single --bar for
   neutral data bars. The score-band family is weak=rose / neutral=grey. --gold = compliance only.
   Two radii (--r-sm 8, --r-lg 14). The accent, info, solid, neutral, cat-N, heading and shadow
   entries are backward-compat aliases mapped onto the new palette (LP markup still uses some).
   NOTE: never write a literal star-slash inside this comment — it closes the block early.
   ========================================================================== */

:root {
  /* ---- typography ---------------------------------------------------- */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body: 'Public Sans', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --fs-2xs: 10px;  --fs-xs: 11px;  --fs-sm: 12.5px; --fs-md: 14px;
  --fs-lg: 16px;   --fs-xl: 20px;  --fs-2xl: 26px;  --fs-3xl: 34px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.25; --lh-normal: 1.5; --lh-relaxed: 1.65; --track-label: .08em;

  /* ---- spacing (4px base) ------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 48px;

  /* ---- radius (two tiers; legacy xs/md/pill kept for compat) -------- */
  --r-sm: 8px; --r-lg: 14px; --r-xs: 8px; --r-md: 14px; --r-pill: 999px;

  /* ===== LIGHT theme ================================================= */
  color-scheme: light;

  --bg: #EEF0F4;
  --surface: #FFFFFF;
  --surface-2: #F4F5F8;
  --border: #DFE2E8;
  --border-strong: #CBCFD7;
  --border-card: #DDE0E7;
  --text: #16181C;
  --muted: #6B7280;
  --faint: #9CA1AB;

  /* brand — the ONLY accent */
  --a: #178A5C;
  --a-strong: #126B47;
  --a-soft: rgba(23, 138, 92, .10);
  --on-a: #FFFFFF;

  --bar: #7CB894;             /* uniform neutral data-bar */
  --gold: #9A7B1F;            /* compliance-only, never an accent */

  /* price-direction semantics ONLY */
  --up: #1A8C5E;   --up-soft: rgba(26, 140, 94, .12);
  --down: #C44552; --down-soft: rgba(196, 69, 82, .11);
  --flat: #6B7280; --flat-soft: rgba(107, 114, 128, .10);

  /* score bands — own family (weak = rose, neutral = grey) */
  --score-weak: #C24A63;    --score-weak-soft: rgba(194, 74, 99, .13);
  --score-neutral: #A6ABB2; --score-neutral-soft: rgba(166, 171, 178, .16);
  --score-solid: #4FA177;   --score-solid-soft: rgba(79, 161, 119, .15);
  --score-strong: #2A8A5A;  --score-strong-soft: rgba(42, 138, 90, .13);

  /* ---- backward-compat aliases -------------------------------------- */
  --accent: var(--a);
  --accent-strong: var(--a-strong);
  --accent-soft: var(--a-soft);
  --on-accent: var(--on-a);
  --heading: var(--text);
  --info: var(--a);              --info-soft: var(--a-soft);
  --solid: var(--score-solid);   --solid-soft: var(--score-solid-soft);
  --neutral: var(--score-neutral); --neutral-soft: var(--score-neutral-soft);
  --gold-soft: rgba(154, 123, 31, .12);
  --cat-1: var(--a);  --cat-2: var(--score-solid); --cat-3: var(--gold);
  --cat-4: var(--flat); --cat-5: var(--muted);
  --shadow-1: 0 1px 2px rgba(16, 22, 32, .05);
  --shadow-2: 0 4px 16px rgba(16, 22, 32, .08);
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--a) 35%, transparent);
}

/* ===== DARK theme (LP default) ====================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0E1014;
  --surface: #15181E;
  --surface-2: #1B1F27;
  --border: #23262E;
  --border-strong: #2E323C;
  --border-card: #1E2128;
  --text: #E6E8EC;
  --muted: #8A9099;
  --faint: #5E646E;

  --a: #3ECF8E;
  --a-strong: #5BE0A4;
  --a-soft: rgba(62, 207, 142, .13);
  --on-a: #06140D;

  --bar: #5FBE92;
  --gold: #E0B24E;

  --up: #3ECF8E;   --up-soft: rgba(62, 207, 142, .14);
  --down: #F0697E; --down-soft: rgba(240, 105, 126, .14);
  --flat: #8A9099; --flat-soft: rgba(138, 144, 153, .13);

  --score-weak: #D2697D;    --score-weak-soft: rgba(210, 105, 125, .20);
  --score-neutral: #7E848C; --score-neutral-soft: rgba(126, 132, 140, .22);
  --score-solid: #5FBE92;   --score-solid-soft: rgba(95, 190, 146, .20);
  --score-strong: #4FB985;  --score-strong-soft: rgba(79, 185, 133, .20);

  --gold-soft: rgba(224, 178, 78, .13);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, .45);
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--a) 45%, transparent);
}