/*
 * BENGOS DESIGN TOKENS — Direction B "Reading Room" (green & brass)
 * Chosen 2026-07-02. Alternates A "Counsel" and C "Legal Pad" archived in
 * project memory (project_design_direction_b.md).
 *
 * This file is the single source of truth for color, type roles, spacing,
 * radius, and shadows. Rules:
 *   - Every stylesheet references these tokens; no raw hex outside this file
 *     (legacy hex in base.css/minimal.css is grandfathered until the polish pass).
 *   - Loaded LAST in base.html so its :root definitions and Bootstrap bridge
 *     win over base.css, minimal.css, and the Bootstrap CDN defaults.
 *   - Dark theme tokens are defined but only activate under
 *     [data-theme="dark"] — deliberate: light-only at launch, dark is opt-in
 *     post-launch. Do not add a prefers-color-scheme media query before the
 *     dark theme has been QA'd.
 *
 * Semantic rules of the palette:
 *   - Green  = brand / primary action. Keep it DEEP — lighter greens drift
 *     toward finance/health apps.
 *   - Brass  = highlight, achievement, secondary emphasis. Never a button fill.
 *   - Typing cursor (re-themed 2026-07-03): bar = brass (--cursor-bar), char
 *     bg = green-biased neutral (--cursor-char-bg). The char bg must stay a
 *     NEUTRAL — distinct from correct/incorrect feedback tints and the
 *     yellow/green/pink user-highlight colors. All colors app-wide may be
 *     re-themed for brand consistency (user directive 2026-07-03); the patent
 *     names specific colors only as examples.
 */

:root {
  /* ---- primitives: palette ------------------------------------------- */
  --green-900: #143c2d;
  --green-800: #1e5741;   /* brand anchor */
  --green-700: #276a50;
  --green-300: #aecbbb;
  --green-200: #cfe0d6;
  --green-100: #e2ece6;
  --green-050: #eef5f0;

  --brass-700: #8a6d2c;
  --brass-600: #b08d3e;   /* brass anchor */
  --brass-100: #f3ead6;

  --paper-000: #fdfefc;   /* raised surface */
  --paper-100: #f6f7f4;   /* page ground */
  --paper-200: #eceee9;   /* inset / wells */

  --ink-900: #1b221e;     /* primary text */
  --ink-600: #414c45;     /* secondary text */
  --ink-500: #5e6a62;     /* muted text */

  --line-300: #cfd6d0;    /* strong border */
  --line-200: #dfe3dd;    /* default border */
  --line-100: #eaede8;    /* hairline */

  --red-700: #a03232;     /* danger/error */
  --red-100: #f6e4e4;
  --amber-700: #9a6d0c;   /* warning text */
  --amber-100: #f8eecd;

  /* ---- semantic aliases ---------------------------------------------- */
  --bg-page: var(--paper-100);
  --bg-surface: var(--paper-000);
  --bg-inset: var(--paper-200);
  --text-primary: var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted: var(--ink-500);
  --border-default: var(--line-200);
  --border-strong: var(--line-300);
  --border-hairline: var(--line-100);

  --brand: var(--green-800);
  --brand-hover: var(--green-900);
  --brand-soft: var(--green-050);
  --brand-contrast: #eef5f0;          /* text on brand fills */
  --accent-brass: var(--brass-600);
  --accent-brass-deep: var(--brass-700);
  --accent-brass-soft: var(--brass-100);

  --danger: var(--red-700);
  --danger-soft: var(--red-100);
  --warning: var(--amber-700);
  --warning-soft: var(--amber-100);
  --success: var(--green-700);
  --success-soft: var(--green-100);

  /* Typing-cursor scheme (re-themed 2026-07-03; previously blue #0b5fff + gray #b0b0b0).
     Bar = brass (the theme's highlight channel — the cursor is a live highlighter).
     Char bg = green-biased NEUTRAL on purpose: it must stay distinct from
     correct/incorrect feedback (green/red tints) and the yellow/green/pink
     user highlight colors. Do not make it a saturated brand color. */
  --cursor-bar: var(--accent-brass);
  --cursor-char-bg: #adb8b0;

  /* ---- type page accents ------------------------------------------------
     Study decks (Navigator left panel): learn = brand green (active work),
     review = brass (returning to what you earned), idle = neutral ink,
     optional = muted plum (off-track extras — the one hue outside green/brass,
     kept desaturated so it reads as an aside, not a new brand color). */
  --deck-learn: var(--brand);
  --deck-learn-soft: var(--brand-soft);
  --deck-review: var(--accent-brass-deep);
  --deck-review-soft: var(--accent-brass-soft);
  --deck-idle: var(--text-muted);
  --deck-idle-soft: var(--bg-inset);
  --deck-optional: #6d5a7a;
  --deck-optional-soft: #efeaf3;

  /* Tag chips (pointed-flag labels). Active = brass, echoing the highlight
     channel; idle = paper well. */
  --tag-active-bg: var(--accent-brass-soft);
  --tag-active-ink: var(--accent-brass-deep);
  --tag-idle-bg: var(--bg-inset);
  --tag-idle-ink: var(--text-muted);

  /* Exam-frequency flames */
  --flame-lit: var(--accent-brass);
  --flame-unlit: var(--border-strong);

  /* ---- type roles ------------------------------------------------------
     display  — marketing headlines, large numbers (editorial serif)
     body     — all UI chrome, running text
     mono     — WPM / accuracy / counts / code
     passage  — the typing surface (documented choice; user-overridable via
                the passage-font preference in user_pref_styles.html) */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-passage: "Literata", "Merriweather", Georgia, "Times New Roman", serif;

  /* ---- scale ----------------------------------------------------------- */
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.25rem;
  --space-7: 3.5rem;
  --shadow-sm: 0 1px 2px rgba(27, 34, 30, 0.06);
  --shadow-md: 0 3px 12px rgba(27, 34, 30, 0.10);
  --focus-ring: 0 0 0 0.2rem rgba(30, 87, 65, 0.22);
}

/* ---- dark theme (opt-in; not shipped at launch) ------------------------ */
:root[data-theme="dark"] {
  --paper-000: #1a221c;
  --paper-100: #121814;
  --paper-200: #0d120f;
  --ink-900: #e6ebe5;
  --ink-600: #b4c0b8;
  --ink-500: #8fa096;
  --line-300: #43524a;
  --line-200: #263129;
  --line-100: #1f2822;

  --brand: #4fa97f;
  --brand-hover: #66bb92;
  --brand-soft: #1b2f25;
  --brand-contrast: #0d1a12;
  --accent-brass: #cba85a;
  --accent-brass-deep: #dcbe78;
  --accent-brass-soft: #2c2517;

  --danger: #d47070;
  --danger-soft: #3a2222;
  --warning: #d9b04a;
  --warning-soft: #332a14;
  --success: #4fa97f;
  --success-soft: #1b2f25;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 3px 12px rgba(0, 0, 0, 0.5);
  --focus-ring: 0 0 0 0.2rem rgba(79, 169, 127, 0.3);

  --cursor-bar: var(--accent-brass);
  --cursor-char-bg: #4a5850;

  --deck-optional: #a692b5;
  --deck-optional-soft: #2b2430;
  /* deck-learn/review/idle, tag-*, flame-* aliases resolve through their
     re-mapped primitives above — no explicit dark overrides needed. */
}

/* ---- legacy variable bridge --------------------------------------------
   Older sheets (minimal.css, base.css) consume these names. Re-pointed to
   tokens so the whole app follows the theme without rewriting them yet.
   NOTE: --accent means "primary text color" in minimal.css but is also the
   fallback chain for the cursor bar in base.css — keep it ink, never brand. */
:root {
  --bg: var(--bg-page);
  --panel: var(--bg-inset);
  --muted: var(--text-muted);
  --accent: var(--text-primary);
  --glass: rgba(27, 34, 30, 0.03);
}

/* ---- Bootstrap 5.3 bridge -----------------------------------------------
   Keeps Bootstrap as machinery (grid/modal/tabs) while its skin follows the
   tokens. Full Bootstrap removal is a post-launch project. */
:root {
  --bs-body-bg: var(--bg-page);
  --bs-body-color: var(--text-primary);
  --bs-body-font-family: var(--font-body);
  --bs-secondary-color: var(--text-muted);
  --bs-border-color: var(--border-default);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-lg);

  --bs-primary: var(--green-800);
  --bs-primary-rgb: 30, 87, 65;
  --bs-link-color: var(--green-800);
  --bs-link-color-rgb: 30, 87, 65;
  --bs-link-hover-color: var(--green-900);
  --bs-link-hover-color-rgb: 20, 60, 45;

  --bs-success-rgb: 39, 106, 80;
  --bs-danger: var(--red-700);
  --bs-danger-rgb: 160, 50, 50;
  --bs-warning-rgb: 154, 109, 12;

  --bs-focus-ring-color: rgba(30, 87, 65, 0.22);
}

body {
  background: var(--bg-page);           /* kills the old blue gradient */
  color: var(--text-primary);
  font-family: var(--font-body);
}

.btn-primary {
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-color: var(--brand-contrast);
  --bs-btn-hover-bg: var(--brand-hover);
  --bs-btn-hover-border-color: var(--brand-hover);
  --bs-btn-hover-color: var(--brand-contrast);
  --bs-btn-active-bg: var(--brand-hover);
  --bs-btn-active-border-color: var(--brand-hover);
  --bs-btn-active-color: var(--brand-contrast);
  --bs-btn-disabled-bg: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-disabled-color: var(--brand-contrast);
  --bs-btn-focus-shadow-rgb: 30, 87, 65;
}

.btn-outline-primary {
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
  --bs-btn-hover-color: var(--brand-contrast);
  --bs-btn-active-bg: var(--brand);
  --bs-btn-active-border-color: var(--brand);
  --bs-btn-active-color: var(--brand-contrast);
  --bs-btn-disabled-color: var(--brand);
  --bs-btn-disabled-border-color: var(--brand);
  --bs-btn-focus-shadow-rgb: 30, 87, 65;
}

/* "info" buttons take the brass accent (secondary emphasis) */
.btn-outline-info {
  --bs-btn-color: var(--accent-brass-deep);
  --bs-btn-border-color: var(--accent-brass);
  --bs-btn-hover-bg: var(--accent-brass);
  --bs-btn-hover-border-color: var(--accent-brass);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--accent-brass);
  --bs-btn-active-border-color: var(--accent-brass);
  --bs-btn-active-color: #fff;
  --bs-btn-focus-shadow-rgb: 176, 141, 62;
}
.btn-info {
  --bs-btn-bg: var(--accent-brass);
  --bs-btn-border-color: var(--accent-brass);
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--accent-brass-deep);
  --bs-btn-hover-border-color: var(--accent-brass-deep);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--accent-brass-deep);
  --bs-btn-active-border-color: var(--accent-brass-deep);
  --bs-btn-active-color: #fff;
}

/* Neutral secondary buttons follow the ink/line tokens instead of Bootstrap gray */
.btn-outline-secondary {
  --bs-btn-color: var(--text-secondary);
  --bs-btn-border-color: var(--border-strong);
  --bs-btn-hover-bg: var(--bg-inset);
  --bs-btn-hover-border-color: var(--border-strong);
  --bs-btn-hover-color: var(--text-primary);
  --bs-btn-active-bg: var(--bg-inset);
  --bs-btn-active-border-color: var(--border-strong);
  --bs-btn-active-color: var(--text-primary);
  --bs-btn-disabled-color: var(--text-muted);
  --bs-btn-disabled-border-color: var(--border-default);
}

/* Danger buttons follow the theme's red tokens */
.btn-danger {
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: var(--red-700);
  --bs-btn-hover-border-color: var(--red-700);
}
.btn-outline-danger {
  --bs-btn-color: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: var(--danger);
  --bs-btn-hover-border-color: var(--danger);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--danger);
  --bs-btn-active-border-color: var(--danger);
  --bs-btn-active-color: #fff;
}

.btn-success {
  --bs-btn-bg: var(--success);
  --bs-btn-border-color: var(--success);
  --bs-btn-hover-bg: var(--green-800);
  --bs-btn-hover-border-color: var(--green-800);
  --bs-btn-active-bg: var(--green-800);
  --bs-btn-active-border-color: var(--green-800);
}

input[type="radio"], input[type="checkbox"] { accent-color: var(--brand); }

.form-control:focus,
.form-select:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}
.form-check-input:focus {
  border-color: var(--brand);
  box-shadow: var(--focus-ring);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--brand);
  --bs-nav-pills-link-active-color: var(--brand-contrast);
}
.nav-link { color: var(--brand); }
.nav-link:hover, .nav-link:focus { color: var(--brand-hover); }

.card, .modal-content {
  background-color: var(--bg-surface);
  border-color: var(--border-default);
}

.badge.text-bg-primary, .badge.bg-primary {
  background-color: var(--brand) !important;
  color: var(--brand-contrast) !important;
}

.dropdown-item.active, .dropdown-item:active {
  background-color: var(--brand);
  color: var(--brand-contrast);
}

.page-link { color: var(--brand); }
.page-item.active .page-link {
  background-color: var(--brand);
  border-color: var(--brand);
}

.text-primary { color: var(--brand) !important; }
/* "info" is used decoratively in this app — map it to the brass accent */
.text-info { color: var(--accent-brass-deep) !important; }

/* Progress bars (dashboard) */
.progress-bar { background-color: var(--brand); }

/* Alerts follow the semantic soft colors */
.alert-success { --bs-alert-bg: var(--success-soft); --bs-alert-color: var(--green-900); --bs-alert-border-color: var(--green-100); }
.alert-danger  { --bs-alert-bg: var(--danger-soft);  --bs-alert-color: var(--danger);  --bs-alert-border-color: var(--danger-soft); }
.alert-warning { --bs-alert-bg: var(--warning-soft); --bs-alert-color: var(--warning); --bs-alert-border-color: var(--warning-soft); }

/* Navbar: deep library green replaces Bootstrap bg-dark near-black */
.navbar.bg-dark {
  background-color: var(--green-900) !important;
}
.navbar-dark .navbar-brand { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.01em; }
/* Bootstrap navbar-dark defaults links to 55%-alpha white — unreadable on deep green */
.navbar-dark .navbar-nav .nav-link { color: rgba(246, 247, 244, 0.88); }
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus { color: #ffffff; }
.navbar-dark .navbar-nav .nav-link.active { color: #ffffff; }

/* Brand wordmark — "Bengos" with a brass typing-cursor bar under the final letter
   (echoes the app's brass current-character cursor). Navbar is always deep green
   in both themes, so brand colors are pinned, not theme-flipped. */
.navbar-dark .navbar-brand.brand-logo { color: #fdfefc; font-size: 1.45rem; }
.brand-logo .brand-cursor { border-bottom: 2.5px solid var(--accent-brass); padding-bottom: 2px; }
@media (max-width: 991.98px) {
  .navbar-dark .navbar-brand.brand-logo { font-size: 1.15rem; }
}

/* ---- app-wide type polish ---------------------------------------------- */
h1, h2 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.005em; }
h1, h2, h3 { color: var(--text-primary); text-wrap: balance; }

/* Stats read in mono with lined-up digits */
.stat-mono, #live-stats, .wpm-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}