/* ================================================================
   BMSI Design Tokens — canonical (per BMSI-BRAND.md)
   Teal #2EBDC2 primary · Indigo #302682 anchor · Lime #A6CC38 accent
   ================================================================ */
:root {
  /* Brand */
  --indigo:      #302682;
  --indigo-dark: #241c66;
  --indigo-light:#3d32a3;
  --indigo-tint: #ebe9f6;

  --teal:        #2ebdc2;
  --teal-dark:   #26a0a5;
  --teal-tint:   #e4f7f8;

  --lime:        #a6cc38;
  --lime-tint:   #f2f8df;

  --eco:         #74cb36;
  --mantra:      #ffff00;   /* mantra only — never general UI */

  /* Legacy brand names (navy era) — now resolve to indigo */
  --navy:        var(--indigo);
  --navy-dark:   var(--indigo-dark);
  --navy-light:  var(--indigo-light);
  --navy2:       var(--indigo-tint);

  /* Neutrals */
  --ink:         #1a1a1a;
  --text:        #4d4d4d;
  --muted:       #808080;
  --subtle:      #9aa0a6;
  --border:      #d9d9d9;
  --border-soft: #e8e8e8;
  --surface:     #ffffff;
  --surface-2:   #f6f8f4;
  --surface-3:   #eff2ec;

  /* Status */
  --green:  #1e7e34;  --green2:  #eaf6ed;
  --blue:   #269ce0;  --blue2:   #e7f3fc;
  --amber:  #b7650a;  --amber2:  #fef3e2;
  --red:    #d64545;  --red2:    #fdecea;

  /* Avatar / category swatches (deterministic by initial / category) */
  --swatch-navy:   #302682;
  --swatch-teal:   #2ebdc2;
  --swatch-violet: #7c3aed;
  --swatch-rust:   #b45309;
  --swatch-sky:    #269ce0;
  --swatch-rose:   #9d174d;
  --swatch-forest: #15803d;
  --swatch-bronze: #92400e;

  /* Type — Commissioner display, Mulish body (Avenir web substitute) */
  --font-display: "Commissioner", "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, monospace;

  /* Spacing (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px;

  /* Radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;

  /* Elevation — always indigo-tinted, never black/heavy */
  --sh-1: 0 1px 3px rgba(48, 38, 130, .06);
  --sh-2: 0 4px 14px rgba(48, 38, 130, .08);
  --sh-3: 0 16px 40px rgba(48, 38, 130, .16);

  /* Focus */
  --focus-ring: 0 0 0 3px rgba(46, 189, 194, .35);

  /* Motion */
  --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms var(--ease-std);
  --t-base: 200ms var(--ease-std);
  --t-slow: 320ms var(--ease-out);

  /* Brand gradients — CTA bands only, use sparingly */
  --grad-brand: linear-gradient(120deg, #2ebdc2, #269ce0);
  --grad-eco:   linear-gradient(120deg, #a6cc38, #2ebdc2);

  /* ----------------------------------------------------------
     Legacy aliases — map old variable names views reference inline
     to the canonical tokens above. Do not add new uses; these
     exist purely to keep historical inline styles rendering.
     ---------------------------------------------------------- */
  --bg:                var(--surface-2);
  --brand-navy:        var(--indigo);
  --brand-navy-light:  var(--indigo-light);
  --brand-navy-tint:   var(--indigo-tint);
  --brand-orange:      var(--amber);

  --surface-1:         var(--surface);

  --ink-2:             var(--muted);
  --ink-3:             var(--subtle);

  --line:              var(--border);
  --line-2:            var(--border-soft);

  --danger:            var(--red);
  --danger-bg:         var(--red2);
  --danger-ink:        #c0392b;

  --warning:           #e8a33d;
  --warn:              var(--amber);
  --warning-bg:        var(--amber2);
  --warning-ink:       #b7650a;

  --success:           var(--green);
  --success-bg:        var(--green2);
  --success-ink:       #1e7e34;

  --info:              var(--blue);
  --info-bg:           var(--blue2);

  --shadow-sm:         var(--sh-1);
  --shadow-md:         var(--sh-2);
  --shadow-card:       var(--sh-2);
}

/* ================================================================
   Base reset
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
  background: var(--surface-2);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--blue);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--indigo); }

img, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
code, kbd, pre, samp { font-family: var(--font-mono); }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--indigo);
  text-wrap: balance;
}
h1 { font-size: 26px; line-height: 1.1;  letter-spacing: -0.02em; }
h2 { font-size: 20px; line-height: 1.15; letter-spacing: -0.02em; }
h3 { font-size: 16px; line-height: 1.3; }
p  { margin: 0; text-wrap: pretty; }

::placeholder { color: var(--subtle); }

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 4px;
}

/* Utility — used widely */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.tabular { font-variant-numeric: tabular-nums; }