/* ============================================================
   theme.css
   Finlingo design system — restrained, editorial, finance-grade.

   - Single accent: emerald green. Gold is reserved for streaks
     only. Red is reserved for losses.
   - No metallic gradients, no decorative shadows, no glow.
   - Type: Inter (display + body), IBM Plex Mono (numerals only).
   ============================================================ */

/* ── DARK MODE (DEFAULT) ─────────────────────────────────────── */
:root {
  /* ── Surfaces ─────────────────────────────────────────────────
     Deliberately near-black, with very small luminance steps so
     elevation reads as structure rather than decoration.        */
  --bg:       #0A101B;          /* page background — deep navy   */
  --bg2:      #10151D;          /* card / input surface (filled, no border needed) */
  --bg3:      #192230;          /* hover, inactive fill — raised navy */
  --surface:  #10151D;           /* elevated layers              */

  /* ── Borders ─────────────────────────────────────────────────
     Subtle blue-gray, hairline first. Not neutral gray.        */
  --border:   #222C39;
  --border2:  #303D4C;

  /* ── Text scale ──────────────────────────────────────────────
     Warm-white primary, cool-gray secondary. Body recedes;
     headings hold the column.                                  */
  --text:       #F4F6F8;
  --text-sub:   #B3BBC7;
  --muted:      #7F8998;
  --muted2:     #56606D;

  /* ── Accents ─────────────────────────────────────────────────
     Emerald is the brand and the only positive signal.         */
  --green:      #ffffff;
  --green-dim:  rgba(255,255,255,0.10);
  --green-text: #ffffff;

  --red:        #c03b3b;
  --red-dim:    rgba(192,59,59,0.12);
  --red-text:   #e96a6a;

  /* Gold — reserved for streaks. Flat tone, no gradient. */
  --gold:       #b08a2c;
  --gold-dim:   rgba(176,138,44,0.12);
  --gold-text:  #d4a843;

  /* Platinum — flat slate. No metallic gradients. */
  --plat:               #aab2bf;
  --plat-dim:           rgba(170,178,191,0.10);
  --plat-text:          #e6e8ec;
  --plat-border:        rgba(170,178,191,0.18);
  --plat-border-strong: rgba(170,178,191,0.34);
  --plat-card:          var(--bg2);
  --plat-cta:           #e6e8ec;
  --plat-cta-hover:     #ffffff;
  --plat-shadow:        none;

  /* Shared finance-accent surface (used for "boost" callouts) */
  --boost-surface:      var(--bg2);
  --boost-border:       rgba(255,255,255,0.18);
  --boost-icon-surface: rgba(255,255,255,0.08);
  --boost-icon-border:  rgba(255,255,255,0.16);
  --boost-label:        var(--green-text);

  /* High-contrast navy surfaces (active tabs, dark chips) */
  --contrast-strong-bg:       #192230;
  --contrast-strong-bg-hover: #1F2A3A;
  --contrast-strong-text:     #f4f6fa;
  --contrast-strong-border:   rgba(170,182,199,0.18);

  /* ── Typography ──────────────────────────────────────────────
     Single sans-serif (Inter) for everything textual.
     IBM Plex Mono is RESERVED for numeric values: XP counts,
     dollar amounts, percentages, ticker symbols. Use --font-num
     ONLY for those. Labels, headings, body, buttons, descriptions,
     and form labels all use --font-b.

     --font-m is kept for backward compatibility but now points
     at Inter — every legacy `var(--font-m)` site renders as
     sans-serif. Numeric selectors have been migrated to --font-num. */
  --font-d:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-b:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-m:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-num: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Geometry ────────────────────────────────────────────────
     Slimmer radii. Cards aren't pillows.                       */
  --radius:       10px;
  --radius-sm:    6px;
  --radius-pill:  99px;

  /* ── Shadows — minimal. Used for the app shell only. ──────── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.55);

  /* ── App shell ── */
  --shell-bg:     #05080E;
  --shell-shadow: 0 16px 48px rgba(0,0,0,0.55);

  /* ── Topbar / Nav ── */
  --topbar-bg:  #0B111C;
  --nav-bg:     #0B111C;

  /* ── Primary button — mint brand accent (Phase 2). Brand-constant
     across themes: the accent is the same in light and dark. ── */
  --btn-primary-bg:       var(--fl-accent);
  --btn-primary-bg-hover: var(--fl-accent-hover);
  --btn-primary-text:     #06231A;   /* dark green ink for contrast on mint */
}


/* ── LIGHT MODE ──────────────────────────────────────────────── */
[data-theme="light"] {
  --bg:       #ffffff;
  --bg2:      #f6f7f9;
  --bg3:      #eef0f3;
  --surface:  #ffffff;

  --border:   #e6e8ec;
  --border2:  #d2d6dd;

  --text:     #0b0d10;
  --text-sub: #3a414c;
  --muted:    #6b7280;
  --muted2:   #98a0ad;

  --green:      #ffffff;
  --green-dim:  rgba(255,255,255,0.10);
  --green-text: #ffffff;

  --red:        #c0322f;
  --red-dim:    rgba(192,50,47,0.08);
  --red-text:   #a82323;

  --gold:       #9a7616;
  --gold-dim:   rgba(154,118,22,0.10);
  --gold-text:  #7a5e10;

  --plat:               #5d6775;
  --plat-dim:           rgba(93,103,117,0.10);
  --plat-text:          #1f2937;
  --plat-border:        rgba(93,103,117,0.18);
  --plat-border-strong: rgba(93,103,117,0.34);
  --plat-card:          var(--bg2);
  --plat-cta:           #0b0d10;
  --plat-cta-hover:     #1d222c;
  --plat-shadow:        none;

  --boost-surface:      var(--bg2);
  --boost-border:       rgba(15,138,72,0.22);
  --boost-icon-surface: rgba(15,138,72,0.10);
  --boost-icon-border:  rgba(15,138,72,0.20);
  --boost-label:        var(--green-text);

  --contrast-strong-bg:       #0b0d10;
  --contrast-strong-bg-hover: #1d222c;
  --contrast-strong-text:     #ffffff;
  --contrast-strong-border:   rgba(11,13,16,0.18);

  --shadow-sm:  0 1px 2px rgba(15,18,24,0.06);
  --shadow-md:  0 4px 16px rgba(15,18,24,0.08);
  --shadow-lg:  0 12px 40px rgba(15,18,24,0.10);

  --shell-bg:     #f1f3f6;
  --shell-shadow: 0 16px 48px rgba(15,18,24,0.10);

  --topbar-bg:  #ffffff;
  --nav-bg:     #ffffff;

  --btn-primary-bg:       var(--fl-accent);
  --btn-primary-bg-hover: var(--fl-accent-hover);
  --btn-primary-text:     #06231A;
}


/* ============================================================
   CANONICAL PRIMITIVE LAYER  (Phase 1 — unified token foundation)
   Single source of truth for the dark "phone-canvas" surfaces,
   the mint brand accent, the type ramp, radii, spacing, motion,
   and focus. The Learn/Market (--v3-*) and Classroom (--cl-*)
   systems alias onto these primitives (see coach.css / classroom.css).

   Deliberately NOT theme-switched: the dark canvas is constant on the
   surfaces that consume these (Learn, Market, Classroom are always
   dark regardless of the light/dark toggle) — matching current behavior.

   Market ± deltas (--mkt-*, defined in coach.css) stay INDEPENDENT so
   bright green keeps its "market-positive only" meaning and never bleeds
   into the restrained mint accent.

   NOTE: the accent is namespaced --fl-accent (not a bare --accent) on
   purpose — practice.css has pre-existing dangling var(--accent) refs
   that will be wired to --fl-accent in Phase 7, not silently altered now.
   ============================================================ */
:root {
  /* ── Surfaces — navy ramp, deep → raised. Deliberately tonal:
     page navy → near-black card → lighter navy raised/hover, so
     elevation reads as structure, not decoration. ── */
  --fl-bg-deep:         #070B12;   /* outermost page, below the canvas    */
  --fl-bg:              #0A101B;   /* canvas background — deep navy        */
  --fl-surface-passive: #0B0D10;   /* quiet / completed / recessed — near-black */
  --fl-surface:         #10151D;   /* interactive card base — near-black navy */
  --fl-surface-raised:  #151C27;   /* featured / focal card — lighter navy */
  --fl-surface-hover:   #192230;   /* hover fill — raised navy             */

  /* ── Borders — subtle blue-gray, not neutral gray ── */
  --fl-border:          #222C39;
  --fl-border-strong:   #303D4C;
  --fl-border-hover:    rgba(160,182,214,0.30);
  --fl-divider:         rgba(160,182,214,0.08);

  /* ── Shared card treatment (overlay sheen + top inset) ── */
  --fl-overlay:         linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  --fl-overlay-hover:   linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.012));
  --fl-inset:           inset 0 1px 0 rgba(255,255,255,0.04);

  /* ── Text ramp — warm-white heading → cool-gray faint (meta).
     Spec-named aliases (--fl-text-*) map onto the same ramp so
     new markup can use either name. ── */
  --fl-heading:         #FFFFFF;   /* important page headings only        */
  --fl-title:           #F4F6F8;   /* section + card titles — warm white  */
  --fl-eyebrow:         #C6CEDA;
  --fl-body:            #C9D0DB;   /* cool-gray body                      */
  --fl-sub:             #B3BBC7;   /* cool-gray secondary                 */
  --fl-muted:           #7F8998;
  --fl-faint:           #56606D;

  /* Spec canonical text aliases (identical ramp, spec names). */
  --fl-text-primary:    #F4F6F8;
  --fl-text-secondary:  #B3BBC7;
  --fl-text-muted:      #7F8998;
  --fl-text-faint:      #56606D;

  /* ── Mint accent — the single restrained brand accent.
     Navy pass tightens it to #69DDA5. Market ± deltas (--mkt-*)
     stay independent so market-green never bleeds into this. ── */
  --fl-accent:          #69DDA5;
  --fl-accent-hover:    #80E8B7;
  --fl-accent-soft:     rgba(105,221,165,0.10);
  --fl-accent-border:   rgba(105,221,165,0.30);

  /* ── Radii ── */
  --fl-radius-card:     16px;
  --fl-radius-control:  12px;
  --fl-radius-chip:     10px;
  --fl-radius-icon:     12px;
  --fl-radius-pill:     999px;

  /* ── Spacing scale ── */
  --fl-space-1:  6px;
  --fl-space-2:  10px;
  --fl-space-3:  14px;
  --fl-space-4:  18px;
  --fl-space-6:  24px;
  --fl-section-gap: 30px;          /* separation between major sections   */

  /* ── Motion — subtle, no bounce, 150–250ms ── */
  --fl-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --fl-dur:      180ms;
  --fl-dur-fast: 150ms;

  /* ── Focus ring — visible, never color-only ── */
  --fl-focus:    rgba(255,255,255,0.78);
}


/* ============================================================
   SHARED COMPONENT TOKENS  (Phase 2)
   Semantic tokens that map the GLOBAL shared components onto the
   mint accent + primitive surfaces. Components reference THESE
   semantic tokens, not raw --fl-* primitives. Keeping them here
   means Phases 3–8 restyle screens by pointing at the same tokens.

   Market ± deltas (--mkt-*) and the 452 legacy --green sites are
   intentionally NOT routed through these — the accent is applied
   only to the enumerated shared components in Phase 2.
   ============================================================ */
:root {
  --nav-active:           var(--fl-accent);        /* bottom-nav / primary-nav active text + indicator */
  --nav-active-soft:      var(--fl-accent-soft);    /* active-tab pill fill                             */
  --progress-fill:        var(--fl-accent);         /* shared progress-bar fill                         */
  --chip-selected-bg:     var(--fl-accent-soft);    /* selected chip / segment surface                 */
  --chip-selected-border: var(--fl-accent-border);
  --chip-selected-text:   var(--fl-accent);
  --focus-ring:           rgba(118,214,162,0.45);   /* mint focus-visible outline                       */
}


/* ── GLOBAL SMOOTH TRANSITION (on theme toggle) ──────────────── */
body.theme-transitioning,
body.theme-transitioning * {
  transition:
    background-color 0.18s ease,
    border-color     0.18s ease,
    color            0.18s ease,
    box-shadow       0.18s ease !important;
}


/* ── BODY-COPY SOFTENING ─────────────────────────────────────── */
.course-body       { color: var(--text-sub); }
.course-body p     { color: var(--text-sub); }
.course-body strong{ color: var(--text); }

.choice       { color: var(--text-sub); }
.choice.selected,
.choice.correct,
.choice.incorrect { color: var(--text); }

.fb-body { color: var(--muted); }

.recent-title  { color: var(--text); }
.recent-unit   { color: var(--muted2); }

.next-sub { color: var(--muted); }

.lb-name { color: var(--text); }
.lb-sub  { color: var(--muted2); }
.lb-xp   { color: var(--text-sub); }

.pstat-val       { color: var(--text); }
.profile-row-val { color: var(--text-sub); }

.tier-desc { color: var(--muted); }

.result-sub { color: var(--muted); }

.auth-tagline { color: var(--muted); }


/* ── ICON SOFTENING ──────────────────────────────────────────── */
.pill svg { opacity: 0.8; }

.nb svg { opacity: 0.7; }
.nb.active svg { opacity: 1; }

.profile-row-icon svg { opacity: 0.75; }

.pn.locked .pn-icon svg  { opacity: 0.45; }
.pn.completed .pn-icon svg { opacity: 0.85; }


/* ── THEME TOGGLE BUTTON ─────────────────────────────────────── */
.theme-toggle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.14s, border-color 0.14s;
  flex-shrink: 0;
}
.theme-toggle:hover { background: var(--bg3); border-color: var(--border2); }
.theme-toggle svg   { width: 13px; height: 13px; stroke: var(--muted); fill: none; stroke-width: 1.8; }

.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }


/* ============================================================
   STITCH FIDELITY FOUNDATION — TOKENS  (Phase A)

   Presentation-only design language matching the Stitch / Lumina
   reference (see STITCH_FIDELITY_AUDIT.md). This block adds TOKENS
   ONLY. The consuming utility classes live in base.css; existing
   screens are NOT restyled here — later phases (Home/Learn/Market/
   Mastery/Coach) opt into these primitives. Nothing changes routes,
   logic, data, APIs, or behavior.

   Namespacing rule: the display + label faces are added as NEW
   tokens (--fl-font-display / --fl-font-label). The legacy
   --font-d / --font-b / --font-m are deliberately left untouched so
   no existing type site shifts until a phase migrates it.
   ============================================================ */
:root {
  /* ── Faces — Stitch pairs Hanken Grotesk (display) with JetBrains
     Mono (labels/tickers). Inter remains the body workhorse. ── */
  --fl-font-display: 'Hanken Grotesk', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fl-font-label:   'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Mono-label ramp — the primary section-label language.
     Uppercase, wide-tracked, low-contrast. ── */
  --fl-label-size:     0.68rem;
  --fl-label-weight:   500;
  --fl-label-tracking: 0.14em;
  --fl-label-color:    var(--fl-muted);   /* default low-contrast (legible on navy) */
  --fl-label-dim:      var(--fl-faint);    /* extra-quiet */
  --fl-label-bright:   var(--fl-eyebrow);  /* raised emphasis */

  /* ── Hybrid CTA tokens (approved decision) ──────────────────────
     Marquee progression actions = WHITE fill / dark ink.
     Everything else keeps the mint brand accent (--fl-accent).
     This does NOT revert the mint migration — only marquee CTAs
     that opt into .btn-marquee become white. ── */
  --cta-marquee-bg:         #FFFFFF;
  --cta-marquee-bg-hover:   #ECEEF1;
  --cta-marquee-text:       #0B0D0F;
  --cta-secondary-bg:       var(--fl-surface);
  --cta-secondary-bg-hover: var(--fl-surface-hover);
  --cta-secondary-text:     var(--fl-title);
  --cta-secondary-border:   var(--fl-border-strong);
  --cta-secondary-accent:   var(--fl-accent);

  /* ── Progress track — thin, technical, less gamified.
     Fill is mint (functional/goal progress); a neutral variant
     uses white per the Stitch "neutral = white" rule. ── */
  --fl-track-h:        4px;
  --fl-track-bg:       rgba(255,255,255,0.08);
  --fl-track-fill:     var(--fl-accent);
  --fl-track-fill-neutral: var(--fl-title);
  --fl-track-radius:   var(--fl-radius-pill);

  /* ── Card elevation ramp (primitives defined in base.css) ── */
  --fl-card-pad:       var(--fl-space-6);

  /* ── Near-black content-card system (quiet premium surface) ──────
     Extends the Learn track-card treatment (coach.css:8357, a flat
     #0f1010 panel over the navy page) into a SHARED token layer so
     answer cards, content cards, market cards, coach cards, and
     selectors all read from one neutral near-black surface. No
     gradients, no glossy inset, no raised blue-gray fills, no heavy
     shadows — the page and cards separate through hairline borders
     and spacing, not large color differences.

       black-1  = primary content/interactive card surface
       black-2  = nested option/row + recessed surface (slightly lighter)
       black-3  = quiet/disabled surface (lowest, no blue tint)
     Borders stay neutral white-alpha (not the blue-gray --fl-border)
     so nothing reads as a raised navy panel. ── */
  --fl-card-black:          #0f1010;
  --fl-card-black-nested:   #121416;
  --fl-card-black-quiet:    #0c0d0d;
  --fl-card-black-border:        rgba(255,255,255,0.07);
  --fl-card-black-border-hover:  rgba(255,255,255,0.12);
  /* Selected = restrained mint border + faint mint tint (not a block) */
  --fl-card-black-selected-bg:     rgba(105,221,165,0.06);
  --fl-card-black-selected-border: rgba(105,221,165,0.32);
}

[data-theme="light"] {
  /* Marquee CTA in light mode: invert to a dark primary so the
     "high-impact primary" reading survives on a light canvas.
     (The Learn/Market/Mastery canvases stay dark regardless — this
     only matters on any light-themed surface that opts in.) */
  --cta-marquee-bg:       #0B0D0F;
  --cta-marquee-bg-hover: #1D222C;
  --cta-marquee-text:     #FFFFFF;
  --fl-track-bg:          rgba(11,13,16,0.10);
}