/* ============================================================
   Bettermode — Color tokens
   Source: Bettermode Visual Identity Standards v2.0 (June 2026), §3.0–3.2
   ============================================================ */

:root {
  /* ---- Core palette (named in the brand book) ----
     Pairing law lives in guidelines/design-rules.md §1. Headlines:
     · Better Green + Spark are FILLS, never text inks — and no
       green-family text or highlight on dark surfaces, ever.
     · On dark (Signal/Reach): accent = Bloom; highlight = Bloom
       half-height swash; green only as CTA fill / switch glyph / check icon.
     · Green budget: one CTA + max one more green moment per view. */
  --bm-rise:    #F4F1EA; /* Rise   — warm off-white / paper */
  --bm-green:   #46CB1A; /* Better Green — primary action FILL (never text) */
  --bm-bloom:   #CAB9ED; /* Bloom  — soft lavender; THE accent on dark surfaces */
  --bm-spark:   #BEF750; /* Spark  — lime highlight FILL, light surfaces only */
  --bm-signal:  #182342; /* Signal — deep navy (primary ink) */
  --bm-reach:   #2E1167; /* Reach  — deep violet */

  /* ---- Extended brand accents (from type-highlight + photo treatments) ---- */
  --bm-violet:      #9A68FF; /* highlight / interactive violet */
  --bm-green-deep:  #38A215; /* highlight green on light */
  --bm-green-ink:   #27720E; /* dark green text on light */
  --bm-paper:       #FBF9F5; /* card paper (template surface) */
  --bm-black:       #000000;
  --bm-white:       #FFFFFF;
  --bm-rule:        #8E8E8E; /* ~50% black hairline rule on product shots */

  /* ---- Tints (brand book §3.1: start from defined tints, never random opacity) ---- */
  /* Reach over white */
  --bm-reach-80: #574185;
  --bm-reach-60: #816ca3;
  --bm-reach-40: #ab9fc2;
  --bm-reach-20: #d5cfe0;
  /* Signal over white */
  --bm-signal-80: #464f6b;
  --bm-signal-60: #747b90;
  --bm-signal-40: #a3a7b5;
  --bm-signal-20: #d1d3da;
  /* Green over white */
  --bm-green-80: #6bd548;
  --bm-green-60: #90df76;
  --bm-green-40: #b5eaa3;
  --bm-green-20: #daf4d1;
  /* Bloom over white */
  --bm-bloom-60: #ded3f3;
  --bm-bloom-40: #e9e2f7;
  --bm-bloom-20: #f4f1fb;
  /* Spark over white */
  --bm-spark-40: #e5fbb9;
  --bm-spark-20: #f2fddc;

  /* ============================================================
     Semantic aliases (light / default surface = Rise paper)
     ============================================================ */
  --surface-page:     var(--bm-rise);
  --surface-card:     var(--bm-white);
  --surface-raised:   var(--bm-paper);
  --surface-sunken:   #efece3;
  --surface-inverse:  var(--bm-signal);
  --surface-brand:    var(--bm-reach);
  --surface-accent:   var(--bm-bloom-20);

  --text-primary:     var(--bm-signal);
  --text-secondary:   var(--bm-signal-60);
  --text-muted:       var(--bm-signal-40);
  --text-inverse:     var(--bm-white);
  --text-brand:       var(--bm-reach);
  --text-link:        var(--bm-violet);
  --text-on-green:    var(--bm-signal);

  --border-subtle:    rgba(24,35,66,0.10);
  --border-default:   rgba(24,35,66,0.16);
  --border-strong:    rgba(24,35,66,0.28);
  --border-rule:      var(--bm-rule);

  /* Action colors */
  --action-primary:        var(--bm-green);
  --action-primary-hover:  var(--bm-green-deep);
  --action-primary-text:   var(--bm-signal);
  --action-secondary:      var(--bm-signal);
  --action-secondary-text: var(--bm-white);
  --action-accent:         var(--bm-violet);

  /* Highlight (the "better" marker) — see typography.css for usage.
     Spark on light; Bloom (solid marker) on dark; green/violet = legacy,
     light-only. Never a green/Spark swash on Signal, Reach, or photos. */
  --highlight-spark:  var(--bm-spark);
  --highlight-bloom:  var(--bm-bloom);
  --highlight-green:  var(--bm-green-deep);
  --highlight-violet: var(--bm-violet);

  /* Status (derived from palette; Bettermode has no separate semantic set) */
  --status-success: var(--bm-green);
  --status-info:    var(--bm-violet);
  --status-warning: #E8A53D;
  --status-danger:  #E0512F;

  --focus-ring: var(--bm-violet);
}

/* ============================================================
   Dark / inverse theme — apply on .bm-dark wrappers (navy product UI)
   ============================================================ */
.bm-dark {
  --surface-page:    var(--bm-signal);
  --surface-card:    #1f2c52;
  --surface-raised:  #26345e;
  --surface-sunken:  #131c36;
  --surface-inverse: var(--bm-rise);
  --surface-brand:   var(--bm-reach);
  --surface-accent:  #2a2058;

  --text-primary:    var(--bm-white);
  --text-secondary:  rgba(255,255,255,0.70);
  --text-muted:      rgba(255,255,255,0.45);
  --text-inverse:    var(--bm-signal);
  --text-brand:      var(--bm-bloom);
  --text-link:       var(--bm-bloom);

  --border-subtle:   rgba(255,255,255,0.10);
  --border-default:  rgba(255,255,255,0.18);
  --border-strong:   rgba(255,255,255,0.32);

  --action-secondary:      var(--bm-white);
  --action-secondary-text: var(--bm-signal);
}