/* Vendored humanist display face for the OurCiv masthead + headings.
   Fraunces (Undercase Type), SIL Open Font License 1.1. Subset + instanced to a
   single variable weight axis (opsz pinned to the display cut, SOFT 28, WONK 0);
   Latin + common punctuation only, ~35KB woff2, no CDN. License text vendored at
   apps/web/public/fonts/Fraunces-OFL.txt. See brand/BRAND.md. Body + UI stay on
   the system sans; only display type uses this face. */
@font-face {
  font-family: 'Fraunces';
  src: url('../fonts/fraunces-display.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* OurCiv brand tokens, "Front porch" direction (design/porch).
   ---------------------------------------------------------------------------
   OurCiv is the consumer face of CivBot. The look is a warm, small-town paper:
   humanist type, generous whitespace, terracotta used sparingly as the single
   action color, gold reserved for welcome moments, paper depth via surface
   steps (never gradients). See docs/ui-revamp/ourciv/porch/DESIGN.md.

   Light is the default (:root). Dark is a *selected* set ("porch at night"),
   not an inversion; it is declared twice so a [data-theme] toggle wins over the
   OS both ways. The categorical / sequential / diverging chart ramps and the
   status colors are the dataviz-validated sets from brand/BRAND.md and are kept
   unchanged. Every value is a plain CSS custom property. No em-dashes. */

:root {
  color-scheme: light;

  /* --- paper / ink / accent (warm newsprint) --- */
  --paper:        #f6f0e4;  /* page plane, warm cream newsprint */
  --paper-warm:   #efe6d6;  /* sunken / secondary surface */
  --paper-sunk:   #e8ddc9;  /* track / inset */
  --paper-edge:   #ece1cd;  /* masthead band / standing-head tint */
  --card:         #fffdf8;  /* raised surface, warm white */
  --ink:          #24201b;  /* primary text, warm near-black */
  --ink-soft:     #554e44;  /* secondary text */
  --ink-mute:     #837a6c;  /* muted captions / axis labels (non-essential) */
  --rule:         #ddd0bb;  /* hairline divider */
  --rule-strong:  #c8b89f;  /* control border */
  --rule-ink:     #24201b;  /* masthead / standing-head rule (ink weight) */
  --accent:       #a8482a;  /* terracotta, the single action color */
  --accent-ink:   #ffffff;  /* text on --accent */
  --accent-quiet: #8f3d23;  /* accent hover / pressed */
  --accent-wash:  #f3e2d7;  /* faint terracotta tint (active row, selected) */
  --gold:         #b9883c;  /* welcome accent (badges, invite moments) */
  --gold-ink:     #7a5a1e;  /* text on --gold-soft */
  --gold-soft:    #f4e7cb;  /* welcome surface (gold moment, never for body) */
  --focus:        #a8482a;  /* focus ring */

  /* --- chart surface + chrome (dataviz roles; validated, unchanged) --- */
  --surface-1:      #fcfcfb;
  --text-primary:   #24201b;
  --text-secondary: #554e44;
  --text-muted:     #837a6c;
  --grid:           #efe9df;
  --axis:           #cdbfac;
  --border-hair:    rgba(36,32,27,0.10);

  /* --- categorical (fixed order, never cycled; validated) --- */
  --cat-1:#2a78d6; --cat-2:#eb6834; --cat-3:#1baf7a; --cat-4:#eda100;
  --cat-5:#e87ba4; --cat-6:#008300; --cat-7:#4a3aa7; --cat-8:#e34948;
  --series-1:#2a78d6;

  /* --- sequential (single hue: blue; validated) --- */
  --seq-100:#cde2fb; --seq-200:#9ec5f4; --seq-300:#6da7ec; --seq-400:#3987e5;
  --seq-500:#256abf; --seq-600:#184f95; --seq-700:#0d366b;

  /* --- diverging (blue <-> red, gray midpoint; validated) --- */
  --div-neg:#2a78d6; --div-mid:#f0efec; --div-pos:#e34948;

  /* --- status (fixed, never themed; always icon + label) --- */
  --st-good:#0ca30c; --st-warning:#fab219; --st-serious:#ec835a; --st-critical:#d03b3b;
  --good-text:#006300; --bad-text:#a33c3c;

  /* --- spacing scale (4px base) --- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;

  /* --- radius (editorial crisp; pill reserved for status + toggles) --- */
  --r-sm:3px; --r-md:5px; --r-lg:7px; --r-xl:11px; --r-pill:999px;

  /* --- shadow (soft, warm-neutral; prefer a rule over a shadow) --- */
  --shadow-sm:0 1px 2px rgba(36,32,27,.07);
  --shadow-md:0 6px 20px rgba(36,32,27,.12);
  --shadow-lg:0 16px 40px rgba(36,32,27,.20);

  /* --- type: humanist serif masthead + system sans body --- */
  --font-display:'Fraunces', Georgia, 'Times New Roman', 'Noto Serif', serif;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --fs-xs:.75rem; --fs-sm:.85rem; --fs-base:1rem; --fs-lg:1.15rem;
  --fs-xl:1.45rem; --fs-2xl:2rem; --fs-3xl:clamp(2.1rem,6vw,3.4rem);
  --lh-tight:1.08; --lh-snug:1.22; --lh-normal:1.6;
  --tracking-kicker:.14em;  /* small-caps standing-head kicker */

  /* --- shell metrics (mobile-first PWA shell; UI-REVAMP-SPEC section 9) --- */
  --tabbar-h:   3.75rem;   /* 60px bottom tab bar */
  --topbar-h:   3.25rem;   /* 52px context bar */
  --rail-w:     16rem;     /* left rail at >=900px */
  --touch-min:  44px;      /* WCAG 2.2 AA target floor */
  --sheet-max:  min(520px, 92vw);
  --safe-top:    env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left:   env(safe-area-inset-left);
  --safe-right:  env(safe-area-inset-right);
}

/* Dark selected via the theme toggle (wins over OS). Porch at night: a warm
   lamp-lit brown-black, not a neutral inversion. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#16130d; --paper-warm:#201b12; --paper-sunk:#2b2417; --paper-edge:#241d12; --card:#211d15;
  --ink:#ece4d6; --ink-soft:#c6bca9; --ink-mute:#8f8574;
  --rule:#37301f; --rule-strong:#4b4029; --rule-ink:#c6bca9;
  --accent:#e59468; --accent-ink:#16130d; --accent-quiet:#f0a67e; --accent-wash:#2e2013;
  --gold:#dcae5d; --gold-ink:#f0d79a; --gold-soft:#2c2414;
  --focus:#e59468;

  --surface-1:#1a1a19; --text-primary:#ece4d6; --text-secondary:#c6bca9; --text-muted:#8f8574;
  --grid:#2b2a26; --axis:#383835; --border-hair:rgba(236,228,214,0.10);

  --cat-1:#3987e5; --cat-2:#d95926; --cat-3:#199e70; --cat-4:#c98500;
  --cat-5:#d55181; --cat-6:#008300; --cat-7:#9085e9; --cat-8:#e66767;
  --series-1:#3987e5;
  --seq-100:#184f95; --seq-200:#256abf; --seq-300:#3987e5; --seq-400:#5598e7;
  --seq-500:#86b6ef; --seq-600:#b7d3f6; --seq-700:#cde2fb;
  --div-neg:#3987e5; --div-mid:#383835; --div-pos:#e66767;

  --good-text:#0ca30c; --bad-text:#e07c7c;

  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 6px 20px rgba(0,0,0,.55);
  --shadow-lg:0 16px 40px rgba(0,0,0,.65);
}

/* Dark by OS preference, only when the viewer has not forced light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:#16130d; --paper-warm:#201b12; --paper-sunk:#2b2417; --paper-edge:#241d12; --card:#211d15;
    --ink:#ece4d6; --ink-soft:#c6bca9; --ink-mute:#8f8574;
    --rule:#37301f; --rule-strong:#4b4029; --rule-ink:#c6bca9;
    --accent:#e59468; --accent-ink:#16130d; --accent-quiet:#f0a67e; --accent-wash:#2e2013;
    --gold:#dcae5d; --gold-ink:#f0d79a; --gold-soft:#2c2414;
    --focus:#e59468;

    --surface-1:#1a1a19; --text-primary:#ece4d6; --text-secondary:#c6bca9; --text-muted:#8f8574;
    --grid:#2b2a26; --axis:#383835; --border-hair:rgba(236,228,214,0.10);

    --cat-1:#3987e5; --cat-2:#d95926; --cat-3:#199e70; --cat-4:#c98500;
    --cat-5:#d55181; --cat-6:#008300; --cat-7:#9085e9; --cat-8:#e66767;
    --series-1:#3987e5;
    --seq-100:#184f95; --seq-200:#256abf; --seq-300:#3987e5; --seq-400:#5598e7;
    --seq-500:#86b6ef; --seq-600:#b7d3f6; --seq-700:#cde2fb;
    --div-neg:#3987e5; --div-mid:#383835; --div-pos:#e66767;

    --good-text:#0ca30c; --bad-text:#e07c7c;

    --shadow-sm:0 1px 2px rgba(0,0,0,.5);
    --shadow-md:0 6px 20px rgba(0,0,0,.55);
    --shadow-lg:0 16px 40px rgba(0,0,0,.65);
  }
}

/* Scoped theme overrides so a single subtree can be forced light or dark on a
   page that is otherwise the other mode (used by the kit gallery to show both
   modes at once, and available for a deliberate dark band on a light page).
   These mirror the selected dark / light sets above. */
.civ-theme-light {
  color-scheme: light;
  --paper:#f6f0e4; --paper-warm:#efe6d6; --paper-sunk:#e8ddc9; --paper-edge:#ece1cd; --card:#fffdf8;
  --ink:#24201b; --ink-soft:#554e44; --ink-mute:#837a6c;
  --rule:#ddd0bb; --rule-strong:#c8b89f; --rule-ink:#24201b;
  --accent:#a8482a; --accent-ink:#ffffff; --accent-quiet:#8f3d23; --accent-wash:#f3e2d7;
  --gold:#b9883c; --gold-ink:#7a5a1e; --gold-soft:#f4e7cb; --focus:#a8482a;
}
.civ-theme-dark {
  color-scheme: dark;
  --paper:#16130d; --paper-warm:#201b12; --paper-sunk:#2b2417; --paper-edge:#241d12; --card:#211d15;
  --ink:#ece4d6; --ink-soft:#c6bca9; --ink-mute:#8f8574;
  --rule:#37301f; --rule-strong:#4b4029; --rule-ink:#c6bca9;
  --accent:#e59468; --accent-ink:#16130d; --accent-quiet:#f0a67e; --accent-wash:#2e2013;
  --gold:#dcae5d; --gold-ink:#f0d79a; --gold-soft:#2c2414; --focus:#e59468;
  --good-text:#0ca30c; --bad-text:#e07c7c;
}