/* ==========================================================================
   Bli Metach (בלי מתח) — Design tokens (light + dark)
   Source of truth for colors, type, radius, spacing, shadows.
   Theme resolution order:
     1. <html data-theme="light|dark">  → explicit user choice (wins)
     2. prefers-color-scheme             → system setting (when no data-theme)
   ========================================================================== */

:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bm-bg:               #F6F7F4; /* page background ("paper") */
  --bm-surface:          #FFFFFF; /* cards, sheets, inputs */
  --bm-surface-2:        #EEF1F3; /* subtle fills, hover rows, progress track */
  --bm-surface-inverse:  #0D1B2A;
  --bm-border:           #DDE2E6;
  --bm-border-strong:    #C5CDD5;

  /* Text */
  --bm-text:             #0D1B2A;
  --bm-text-muted:       #5B6B7C;
  --bm-text-inverse:     #FFFFFF;

  /* Brand / primary (green) */
  --bm-primary:          #2BD98A; /* fills: buttons, progress, selected states */
  --bm-primary-hover:    #22C47B;
  --bm-on-primary:       #0D1B2A; /* text/icons ON a primary fill — never white */
  --bm-primary-text:     #0B7D4C; /* green used AS text/links/icons on light bg (AA) */
  --bm-primary-soft:     #E6FBF1; /* correct-answer row, success banners */

  /* Accent (multimeter yellow) — use sparingly */
  --bm-accent:           #F5D04A;
  --bm-on-accent:        #0D1B2A;
  --bm-accent-text:      #8A6A00;
  --bm-accent-soft:      #FDF6D8;

  /* Feedback */
  --bm-danger:           #D93036; /* wrong answer, errors */
  --bm-on-danger:        #FFFFFF;
  --bm-danger-soft:      #FDECEC;

  /* "Display" = multimeter LCD panel for seven-segment numbers.
     Intentionally dark in BOTH themes. */
  --bm-display-bg:       #0D1B2A;
  --bm-display-fg:       #2BD98A;
  --bm-display-border:   transparent;

  /* Focus ring (≥3:1 against bg) */
  --bm-focus:            #0B7D4C;

  /* Logo tile colors (for inline/adaptive SVG) */
  --bm-logo-text:        #0D1B2A;
  --bm-logo-tile:        #0D1B2A;
  --bm-logo-glyph:       #2BD98A;

  --bm-shadow-sm: 0 1px 2px rgba(13, 27, 42, .06), 0 1px 3px rgba(13, 27, 42, .08);
  --bm-shadow-md: 0 8px 24px rgba(13, 27, 42, .10);
}

/* System dark (only when the user did not force a theme) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bm-bg:               #0A1520;
    --bm-surface:          #0F1E2E;
    --bm-surface-2:        #152A40;
    --bm-surface-inverse:  #F6F7F4;
    --bm-border:           #22374D;
    --bm-border-strong:    #2E4862;
    --bm-text:             #EAF0F5;
    --bm-text-muted:       #8FA1B3;
    --bm-text-inverse:     #0D1B2A;
    --bm-primary:          #2BD98A;
    --bm-primary-hover:    #4BE3A0;
    --bm-on-primary:       #0D1B2A;
    --bm-primary-text:     #2BD98A;
    --bm-primary-soft:     #123A2D;
    --bm-accent:           #F5D04A;
    --bm-on-accent:        #0D1B2A;
    --bm-accent-text:      #F5D04A;
    --bm-accent-soft:      #3A3216;
    --bm-danger:           #FF6B6B;
    --bm-on-danger:        #0D1B2A;
    --bm-danger-soft:      #3A1A1F;
    --bm-display-bg:       #07111B;
    --bm-display-fg:       #2BD98A;
    --bm-display-border:   #22374D;
    --bm-focus:            #2BD98A;
    --bm-logo-text:        #FFFFFF;
    --bm-logo-tile:        #2BD98A;
    --bm-logo-glyph:       #0D1B2A;
    --bm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
    --bm-shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  }
}

/* Explicit dark (user toggle) — keep identical to the block above */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bm-bg:               #0A1520;
  --bm-surface:          #0F1E2E;
  --bm-surface-2:        #152A40;
  --bm-surface-inverse:  #F6F7F4;
  --bm-border:           #22374D;
  --bm-border-strong:    #2E4862;
  --bm-text:             #EAF0F5;
  --bm-text-muted:       #8FA1B3;
  --bm-text-inverse:     #0D1B2A;
  --bm-primary:          #2BD98A;
  --bm-primary-hover:    #4BE3A0;
  --bm-on-primary:       #0D1B2A;
  --bm-primary-text:     #2BD98A;
  --bm-primary-soft:     #123A2D;
  --bm-accent:           #F5D04A;
  --bm-on-accent:        #0D1B2A;
  --bm-accent-text:      #F5D04A;
  --bm-accent-soft:      #3A3216;
  --bm-danger:           #FF6B6B;
  --bm-on-danger:        #0D1B2A;
  --bm-danger-soft:      #3A1A1F;
  --bm-display-bg:       #07111B;
  --bm-display-fg:       #2BD98A;
  --bm-display-border:   #22374D;
  --bm-focus:            #2BD98A;
  --bm-logo-text:        #FFFFFF;
  --bm-logo-tile:        #2BD98A;
  --bm-logo-glyph:       #0D1B2A;
  --bm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .40);
  --bm-shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
}

/* --------------------------------------------------------------------------
   Theme-independent tokens
   -------------------------------------------------------------------------- */
:root {
  /* Fonts — load Rubik + Heebo (Google Fonts) */
  --bm-font-display: "Rubik", "Heebo", system-ui, sans-serif;   /* headings, buttons, brand */
  --bm-font-body:    "Heebo", "Rubik", system-ui, sans-serif;   /* body text, UI labels */
  --bm-font-mono:    ui-monospace, "SF Mono", Menlo, monospace; /* code only — NOT for numbers */

  /* Type scale (size / line-height) */
  --bm-text-display: 48px; --bm-lh-display: 1.05; /* Rubik 800 */
  --bm-text-h1:      36px; --bm-lh-h1:      1.1;  /* Rubik 800 */
  --bm-text-h2:      28px; --bm-lh-h2:      1.15; /* Rubik 700 */
  --bm-text-h3:      22px; --bm-lh-h3:      1.25; /* Rubik 700 */
  --bm-text-lg:      18px; --bm-lh-lg:      1.55; /* Heebo 400 */
  --bm-text-md:      16px; --bm-lh-md:      1.6;  /* Heebo 400 — default body */
  --bm-text-sm:      14px; --bm-lh-sm:      1.5;  /* Heebo 400/500 */
  --bm-text-xs:      12px; --bm-lh-xs:      1.4;  /* Heebo 500 */

  /* Radius */
  --bm-radius-sm:   8px;
  --bm-radius-md:  12px;  /* buttons, inputs, answer options */
  --bm-radius-lg:  16px;  /* cards */
  --bm-radius-xl:  24px;  /* sheets, modals */
  --bm-radius-full: 999px;

  /* Spacing (4px grid) */
  --bm-space-1: 4px;  --bm-space-2: 8px;  --bm-space-3: 12px; --bm-space-4: 16px;
  --bm-space-5: 20px; --bm-space-6: 24px; --bm-space-8: 32px; --bm-space-10: 40px;
  --bm-space-12: 48px; --bm-space-16: 64px;

  /* Motion */
  --bm-ease: cubic-bezier(.2, .8, .2, 1);
  --bm-dur-fast: 120ms;
  --bm-dur: 200ms;
}

/* Sensible base (optional — remove if the project has its own reset) */
html { background: var(--bm-bg); color: var(--bm-text); font-family: var(--bm-font-body); }
.bm-num { font-variant-numeric: tabular-nums; } /* any changing number in Rubik/Heebo */