/* ============================================================================
   StrataSnap — Design System (single source of truth)
   ----------------------------------------------------------------------------
   StrataSnap is its own product brand (a Strata Match product). Modern, calm,
   high-legibility for older volunteer councils. iOS-clean structure with a
   distinct royal-blue identity and a cool-slate neutral ramp.

   Cascade: brand.css (Strata Match base) → app.css (THIS — StrataSnap tokens,
   overrides everything) → proto.css (components, consume tokens only).

   RULES enforced downstream:
   • One accent (royal blue) — interactive only (buttons, links, selection, focus).
   • Five distinct status hues — never reuse the accent for a status.
   • Three radii + pill. Three spacing rhythms. Cards = border, no shadow.
   • Shadow only on floating/sticky/sheet surfaces.
   ========================================================================== */

:root{
  /* ── Type ─────────────────────────────────────────────────── */
  --font-display:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-sans:   'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (app-specific — overrides brand.css editorial scale) */
  --fs-display: 27px;   /* screen titles (dashboard building name)  */
  --fs-title:   22px;   /* page titles                              */
  --fs-h2:      17px;   /* section headings                         */
  --fs-body:    16px;   /* body / inputs                            */
  --fs-sm:      14px;   /* secondary                                */
  --fs-meta:    13px;   /* metadata                                 */
  --fs-eyebrow: 11px;   /* mono uppercase labels                    */
  --lh-tight: 1.15;
  --lh-body:  1.5;
  --tracking-eyebrow: 0.18em;

  /* ── Neutral — cool slate (modern, high-contrast, accessible) ─ */
  --ink-900:#0E1A2B;   /* titles                       */
  --ink-800:#1B2A41;   /* strong headings              */
  --ink-700:#33415C;   /* body strong / primary text   */
  --ink-600:#4B5870;   /* body                         */
  --ink-500:#697587;   /* secondary text               */
  --ink-400:#94A0B0;   /* metadata / muted             */
  --ink-300:#C2C9D4;   /* placeholder / disabled       */
  --ink-200:#DEE3EA;   /* strong hairline              */
  --ink-100:#EDF0F4;
  --ink-50: #F6F8FB;

  /* ── Surfaces ─────────────────────────────────────────────── */
  --white:  #FFFFFF;
  --page:   #FFFFFF;                               /* card / content surface */
  --raise:  #F4F6F9;                               /* grouped bg, wells, tiles */
  --sunken: #ECEFF4;                               /* inset / track */
  --line:   #EBEEF3;                               /* inset row separators */
  --line2:  #E0E5EC;                               /* card hairline */
  --line-strong:#CDD4DE;                           /* emphasis hairline */
  --text-inverse:var(--white);
  --header-bg: linear-gradient(180deg,#EDF2FC 0%, #F7FAFE 100%); /* tinted header band */
  --header-line:#E2EAF6;
  --surface-blue-soft:#F8FBFF;
  --line-muted:rgba(133,148,170,.24);
  --line-muted-light:rgba(133,148,170,.18);
  --line-muted-soft:rgba(105,117,135,.16);
  --scrim:rgba(15,13,10,.50);
  --overlay-dark-62:rgba(20,18,14,.62);
  --white-75:rgba(255,255,255,.75);

  /* ── Accent — StrataSnap royal blue (interactive only) ────── */
  --acc:#1E50C8; --acc-strong:#1A45AE; --acc-press:#163C97;
  --acc-text:#1A45AE;
  --acc-tint:#EAF0FC; --acc-tint-border:#C9D8F6;
  --ink-btn:#1E50C8; --ink-btn-press:#1A45AE;       /* legacy alias → accent */

  /* ── Status ramp — five DISTINCT, accessible hues ─────────── */
  --st-blue:#2563EB;   --st-blue-bg:#E7EEFE;   /* New        (info blue)        */
  --st-violet:#6D45D9; --st-violet-bg:#EFE9FC; /* In review  (true indigo ≠ New)*/
  --st-amber:#B26B0E;  --st-amber-bg:#FBEFD9;  /* Waiting    (clean amber)      */
  --st-green:#1E8A5B;  --st-green-bg:#E2F4EC;  /* Resolved                      */
  --st-urgent:#C4332B; --st-urgent-bg:#FBE7E5; /* Urgent / overdue              */
  --st-grey:#697587;   --st-grey-bg:#EEF1F5;   /* Closed                        */
  --st-teal:#2563EB;   --st-teal-bg:#E7EEFE;   /* legacy alias → New blue       */
  /* subtle tint borders (1px lines on status tints) */
  --st-blue-line:#CBDCF9; --st-amber-line:#F1DFB8; --st-green-line:#C9E6D5; --st-urgent-line:#F3C9C2;
  --acc-light:#9BC0FF;   /* accent on dark surfaces (logo, sign-in) */
  --success:#1E8A5B; --warning:#B26B0E; --danger:#C4332B;

  /* ── Radii — 3-step + pill ────────────────────────────────── */
  --r-xs:8px;    /* tiny icon tiles, chips, tags, badges-square */
  --r-sm:10px;   /* thumbs, inputs, small buttons, search       */
  --r-md:14px;   /* cards, panels, list rows, buttons           */
  --r-lg:20px;   /* sheets, hero cards                          */
  --r-pill:999px;/* status badges, filter chips                 */
  --ios-radius:   14px;  /* compat alias → --r-md */
  --ios-radius-sm:10px;  /* compat alias → --r-sm */

  /* ── Spacing — 4 / 8 grid ─────────────────────────────────── */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;

  /* ── Elevation — cards flat; shadow only floats/sticky/sheets  */
  --el-1: 0 1px 2px rgba(14,26,43,.05);
  --el-2: 0 8px 28px -12px rgba(14,26,43,.30);
  --shadow-card-subtle:0 1px 2px rgba(20,18,14,.04);
  --shadow-login-card:0 24px 60px -28px rgba(14,26,43,.28);
  --shadow-modal:0 30px 80px -20px rgba(0,0,0,.50);
  --shadow-toast:0 16px 40px -12px rgba(0,0,0,.50);
  --shadow-switch-knob:0 1px 3px rgba(0,0,0,.20);
  --shadow-accent-active:0 2px 8px -3px rgba(30,80,200,.50);
  --shadow-accent-card:0 14px 34px -20px rgba(30,80,200,.65);
  --ios-shadow: var(--el-1);

  /* ── Focus ring ───────────────────────────────────────────── */
  --focus: 0 0 0 3px var(--acc-tint);

  /* ── Motion ───────────────────────────────────────────────── */
  --ease: cubic-bezier(0.33, 1, 0.68, 1);
  --t-fast:140ms; --t-med:220ms;
}

*{ box-sizing:border-box; -webkit-font-smoothing:antialiased; }
body{
  font-family: var(--font-sans);
  font-weight: 400;
  font-variant-numeric: normal;
  letter-spacing: 0;
  line-height: var(--lh-body);
  color: var(--ink-700);
}
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--ink-900);
  line-height: var(--lh-tight);
}

/* ── StrataSnap logo — wordmark + signature L-tick (echoes Strata Match) ── */
.wordmark{ display:inline-flex; align-items:baseline; line-height:1.1; white-space:nowrap; }
.wm-text{ font-family:var(--font-display); font-weight:700; letter-spacing:-.022em; }
.wm-snap{ position:relative; display:inline-block; font-style:italic; padding-right:0.04em; }
.wm-tick{ position:absolute; top:-0.06em; right:-0.30em; width:0.40em; height:0.40em;
  border-top:0.085em solid var(--acc); border-right:0.085em solid var(--acc); }
.wm-snap{ color:var(--acc); }
.wm-light .wm-text{ color:var(--text-inverse); } .wm-light .wm-snap{ color:var(--acc-light); }
.wm-light .wm-tick{ border-color:var(--acc-light); }
.wm-dark .wm-text{ color:var(--ink-900); }