/* Fido theme — the tokens every page shares. DESIGN.md is the rule book and
   this file is the only place a colour, radius, shadow, duration or font is
   defined: pages and ui.html use the tokens, never a raw value
   (tests/test_design.py holds the line). Warm neutrals stay — that is the
   brand — but the brand orange is now the one accent for anything you can
   press or have selected, and the data hues below carry the colour on
   stages, tiles and charts. Light first; the two dark blocks must stay
   identical to each other (the media query is the "Auto" setting, the
   attribute is the switch in Settings). */
:root{
  color-scheme:light;
  /* Neutrals: warm, a step closer to neutral than before so colour reads clean on them. */
  --bg:#fdfcfa; --bg2:#f6f5f1; --bg3:#eeece6; --card:#ffffff;
  --ink:#24211d; --ink2:#5f5a53; --ink3:#8e887f; --line:#e9e6e0; --line2:#dcd8d0;
  --hover:rgba(60,50,40,.05);
  /* Brand: the orange of the mark. -ink is the readable version for text on a
     soft; -soft is the tint behind a selected or active thing; -glow is for rings. */
  --brand:#e0783d; --brand-2:#c2582a; --brand-ink:#b3562a; --brand-soft:#fdeee3;
  --brand-glow:rgba(224,120,61,.28); --ring:rgba(224,120,61,.26);
  --sel:#fbf1e9;
  --grad-brand:linear-gradient(135deg,#ec8b4e 0%,#e0743a 55%,#cb602d 100%);
  /* Data and status hues, each with a soft. Status: green/amber/red. Info: blue.
     Stages: slate → cyan → blue → purple → indigo → green | red. */
  --blue:#2f7fe0; --blue-soft:#e7f0fc; --cyan:#0aa6a6; --cyan-soft:#dcf4f2;
  --purple:#7f5af0; --purple-soft:#eee9ff; --green:#1a9d6b; --green-soft:#e0f4ea;
  --amber:#df8a0a; --amber-soft:#fcf0d9; --red:#e2483f; --red-soft:#fbe9e6;
  --indigo:#5b4fd6; --indigo-soft:#ebe9fc; --slate:#6b7d95; --slate-soft:#e9edf2;
  --pink:#e0479a; --pink-soft:#fde8f2;
  /* Elevation: warm-tinted, layered, low alpha. sm = resting card, base = hover,
     lift = popover/drawer, pop = modal/palette/toast, btn = the primary button. */
  --shadow-sm:0 1px 2px rgba(40,32,24,.05),0 1px 1px rgba(40,32,24,.03);
  --shadow:0 1px 2px rgba(40,32,24,.05),0 8px 24px -12px rgba(40,32,24,.16);
  --shadow-lift:0 2px 4px rgba(40,32,24,.06),0 18px 40px -14px rgba(40,32,24,.22);
  --shadow-pop:0 4px 8px rgba(40,32,24,.08),0 28px 64px -20px rgba(40,32,24,.32);
  --shadow-btn:0 1px 2px rgba(120,60,20,.18),0 6px 14px -6px rgba(224,120,61,.55);
  --scrim:rgba(28,22,16,.38);
  /* Shape. --radius (14) is a card; sm is a button or input; md a menu or
     board card; lg a dialog; pill is a pill. */
  --radius-xs:6px; --radius-sm:8px; --radius-md:10px; --radius:14px; --radius-lg:18px; --radius-pill:999px;
  /* Motion. 1 = hover/colour, 2 = small moves, 3 = things entering, 4 = a flourish. */
  --dur-1:.12s; --dur-2:.2s; --dur-3:.32s; --dur-4:.5s;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-in:cubic-bezier(.4,0,1,1); --ease-spring:cubic-bezier(.34,1.4,.64,1);
  /* Type. Inter (variable, optical sizes) from Google Fonts, the system stack until it lands. */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#171614; --bg2:#1e1c19; --bg3:#2a2723; --card:#201e1b;
    --ink:#f1ece3; --ink2:#aca497; --ink3:#7f776c; --line:#2f2b26; --line2:#3d3830;
    --hover:rgba(255,240,220,.06);
    --brand:#f08a50; --brand-2:#d86a35; --brand-ink:#f5a878; --brand-soft:#3a2518;
    --brand-glow:rgba(240,138,80,.32); --ring:rgba(240,138,80,.34);
    --sel:#2f2219;
    --grad-brand:linear-gradient(135deg,#f5945a 0%,#e77a40 55%,#cf6431 100%);
    --blue:#6bb0f7; --blue-soft:#1b2a3a; --cyan:#3fc9c9; --cyan-soft:#14302f;
    --purple:#a996ff; --purple-soft:#28213f; --green:#4cc79b; --green-soft:#163128;
    --amber:#ecb04c; --amber-soft:#372813; --red:#f2857e; --red-soft:#3a1f1c;
    --indigo:#9a8ef5; --indigo-soft:#262244; --slate:#93a4bb; --slate-soft:#232a33;
    --pink:#f07ab8; --pink-soft:#3a2130;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.45),0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lift:0 2px 4px rgba(0,0,0,.5),0 18px 40px -14px rgba(0,0,0,.7);
    --shadow-pop:0 4px 8px rgba(0,0,0,.5),0 28px 64px -20px rgba(0,0,0,.8);
    --shadow-btn:0 1px 2px rgba(0,0,0,.4),0 6px 14px -6px rgba(240,138,80,.5);
    --scrim:rgba(0,0,0,.64);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#171614; --bg2:#1e1c19; --bg3:#2a2723; --card:#201e1b;
  --ink:#f1ece3; --ink2:#aca497; --ink3:#7f776c; --line:#2f2b26; --line2:#3d3830;
  --hover:rgba(255,240,220,.06);
  --brand:#f08a50; --brand-2:#d86a35; --brand-ink:#f5a878; --brand-soft:#3a2518;
  --brand-glow:rgba(240,138,80,.32); --ring:rgba(240,138,80,.34);
  --sel:#2f2219;
  --grad-brand:linear-gradient(135deg,#f5945a 0%,#e77a40 55%,#cf6431 100%);
  --blue:#6bb0f7; --blue-soft:#1b2a3a; --cyan:#3fc9c9; --cyan-soft:#14302f;
  --purple:#a996ff; --purple-soft:#28213f; --green:#4cc79b; --green-soft:#163128;
  --amber:#ecb04c; --amber-soft:#372813; --red:#f2857e; --red-soft:#3a1f1c;
  --indigo:#9a8ef5; --indigo-soft:#262244; --slate:#93a4bb; --slate-soft:#232a33;
  --pink:#f07ab8; --pink-soft:#3a2130;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.45),0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lift:0 2px 4px rgba(0,0,0,.5),0 18px 40px -14px rgba(0,0,0,.7);
  --shadow-pop:0 4px 8px rgba(0,0,0,.5),0 28px 64px -20px rgba(0,0,0,.8);
  --shadow-btn:0 1px 2px rgba(0,0,0,.4),0 6px 14px -6px rgba(240,138,80,.5);
  --scrim:rgba(0,0,0,.64);
}
*{box-sizing:border-box}
/* overflow-wrap:anywhere is inherited and only ever acts on a word that would
   otherwise poke out of its box, so a long email or URL breaks instead of
   spilling over a card, a button or the edge of a phone screen. */
body{margin:0;background:var(--bg);color:var(--ink);overflow-x:hidden;overflow-wrap:anywhere;
  font:14.5px/1.55 var(--font);font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;border-radius:var(--radius-sm)}
button,a,[role=button]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
input,select,textarea{font:inherit;color:inherit}
input[type=checkbox],input[type=radio],input[type=range],progress{accent-color:var(--brand)}
a{color:var(--brand-ink)}
::selection{background:var(--brand-soft);color:var(--ink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* ── Shared keyframes: the only animations a page may use (see DESIGN.md §6) ── */
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop-in{from{opacity:0;transform:scale(.96) translateY(6px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes grow-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes grow-y{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 var(--brand-glow)}100%{box-shadow:0 0 0 9px transparent}}

/* ── Shared primitives ───────────────────────────────────────────────────
   .ic-chip: a tinted square behind an icon; set --t to a hue token.
   .skel:    a loading placeholder; render bars, never the word "Loading". */
.ic-chip{--t:var(--ink3);display:inline-grid;place-items:center;width:28px;height:28px;border-radius:9px;flex:none;
  background:color-mix(in srgb,var(--t) 14%,var(--card));color:var(--t)}
.ic-chip.brand{--t:var(--brand)}.ic-chip.blue{--t:var(--blue)}.ic-chip.cyan{--t:var(--cyan)}.ic-chip.purple{--t:var(--purple)}
.ic-chip.indigo{--t:var(--indigo)}.ic-chip.green{--t:var(--green)}.ic-chip.amber{--t:var(--amber)}.ic-chip.red{--t:var(--red)}
.ic-chip.slate{--t:var(--slate)}.ic-chip.pink{--t:var(--pink)}
.skel{display:flex;flex-direction:column;gap:12px;padding:4px 0}
.skel i,.skel b{display:block;border-radius:var(--radius-md);
  background:linear-gradient(90deg,var(--bg3) 25%,var(--bg2) 50%,var(--bg3) 75%);
  background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.skel .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.skel .row i{height:74px;border-radius:var(--radius)}
.skel .blk{height:220px;border-radius:var(--radius)}
.skel .ln{height:14px;width:40%}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}