/* Every colour and font the product uses, and nothing else. Changing the palette or the type is
   a swap of this one file: app.css and the templates only ever say var(--...), and
   tests/test_guards.py fails if a colour or a font family appears anywhere else.

   A light table at night. Roast is the table. Film is cool and unlit until a light is on it.
   The lamp is the only accent and it means one thing: the light is on here. It is light, not
   ink or decoration: a lit strip, the switch that is on, the count when something is lit, and
   at most one filled button on a screen. Never a tag, a rank, a link or a border for its own sake.

   The typefaces are served from our own /static/fonts (SIL Open Font Licence, see
   fonts/LICENSE.txt). No page loads anything from another site. */

@font-face{
  font-family:"Bricolage Grotesque"; font-style:normal; font-weight:400 800; font-stretch:75% 100%; font-display:swap;
  src:url("/static/fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Bricolage Grotesque"; font-style:normal; font-weight:400 800; font-stretch:75% 100%; font-display:swap;
  src:url("/static/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-stretch:75% 100%; font-display:swap;
  src:url("/static/fonts/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-stretch:75% 100%; font-display:swap;
  src:url("/static/fonts/instrument-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* the radar's own three faces (its plotting sheet, see the radar section below): B612 and B612 Mono for words and numbers, Newsreader for sentences */
@font-face{
  font-family:"B612"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/static/fonts/b612-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"B612"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/static/fonts/b612-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"B612 Mono"; font-style:normal; font-weight:400; font-display:swap;
  src:url("/static/fonts/b612-mono-400-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"B612 Mono"; font-style:normal; font-weight:700; font-display:swap;
  src:url("/static/fonts/b612-mono-700-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Newsreader"; font-style:normal; font-weight:400 600; font-display:swap;
  src:url("/static/fonts/newsreader-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* the table */
  --roast:#241812;      /* the ground every page sits on */
  --roast-top:#2E2018;  /* the same ground, a shade warmer at the very top of a page */
  --walnut:#33241B;     /* bars and raised panels */
  --well:#1A110C;       /* sunk panels, and the inside of a field */
  --gate:#110A07;       /* the dark a strip of film is cut from */

  /* film: three cool tints, so neighbouring blocks read as separate */
  --film:#45514E;
  --film-b:#3A4643;
  --film-c:#505D59;

  /* words */
  --paper:#F5EADB;      /* text, and the fill of an ordinary main button */
  --ash:#BBAE9F;        /* secondary text */

  /* the lamp: the light is on here */
  --lamp:#FFB454;
  --lamp-glow:rgba(255,180,84,.24);       /* the spill round a lit strip */
  --lamp-glow-wide:rgba(255,180,84,.2);   /* the wider spill round the one strip that is always lit */
  --lamp-clear:rgba(255,180,84,0);
  --on-lamp:var(--roast);                 /* words on a lamp fill */
  --lamp-ink:var(--lamp);                 /* the lamp as words, in the two places it may be (a theme whose accent is only ever a fill sets them in its text colour) */
  --lit-a:linear-gradient(180deg,#FFCE86,#FFB454 58%,#F2A342);  /* a lit block, in the three tints */
  --lit-b:linear-gradient(180deg,#FFC578,#F9AB48 58%,#EA9A3A);
  --lit-c:linear-gradient(180deg,#FFD596,#FFBC62 58%,#F5A94B);

  /* the ordinary main button: paper here. A theme may make it the accent, and then, on a screen that already has its one
     lamp button, the others step back to outlines (--second-*): here those are the same as the main, so nothing changes */
  --main-fill:var(--paper);
  --main-ink:var(--roast);
  --main-edge:var(--paper);
  --second-fill:var(--paper);
  --second-ink:var(--roast);
  --second-edge:var(--paper);
  --main-hover:var(--ash);
  --main-hover-edge:var(--ash);
  --second-hover:var(--ash);
  --second-hover-edge:var(--ash);

  /* what must not be missed (a use-by date, a low wallet): here it is simply said in paper; a theme may fill it */
  --flag-fill:transparent;
  --flag-ink:var(--paper);
  --flag-edge:var(--edge);
  --flag-spread:0px;

  /* lines, all cut from paper or ash: never a new hue */
  --rule:rgba(245,234,219,.14);        /* dividers */
  --line:rgba(245,234,219,.5);         /* the edge of a button or a field in focus */
  --line-hover:rgba(245,234,219,.55);
  --edge:rgba(187,174,159,.55);        /* the edge of a field, a chip, an empty frame */
  --underline:rgba(187,174,159,.7);    /* under a link */
  --sprocket:rgba(245,234,219,.22);    /* a strip's sprocket holes */
  --paper-clear:rgba(245,234,219,0);

  /* whole fills that need more than one colour */
  --ground:linear-gradient(180deg, var(--roast-top), var(--roast) 260px);
  --sprockets:repeating-linear-gradient(180deg, var(--sprocket) 0 4px, var(--paper-clear) 4px 9px);
  --sprockets-lit:repeating-linear-gradient(180deg, var(--lamp) 0 4px, var(--lamp-clear) 4px 9px);

  /* the radar: a plotting sheet with its own colours and faces, the same in every theme (Danny, 2026-10-07: the original
     Live radar). No theme file sets these; radar-match.css turns them to the theme's own for an admin comparing the two. */
  --radar-sheet:#EEF2EC;    /* the sheet */
  --radar-ink:#0E1F1A;      /* words and the heavy lines */
  --radar-green:#0B6B4F;    /* labels and the scale */
  --radar-grid:#B9D3C7;     /* the grid, and the time gone by in the steps */
  --radar-mark:#B5127A;     /* the marks, and the one button */
  --radar-on-mark:#FFFFFF;  /* a mark's number, and the words on the button */
  --radar-hi:#F2E24B;       /* the mark being looked at */
  --radar-on-hi:#0E1F1A;    /* its number */
  --radar-crowd:#6F877E;    /* the crowd of videos found */
  --radar-done:#FF5A1F;     /* a step that is done, and the time gone by in the one being worked on */
  --radar-on-done:#1A1814;  /* the words on it */
  --radar-word:"B612", "Verdana", system-ui, sans-serif;
  --radar-num:"B612 Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radar-say:"Newsreader", "Iowan Old Style", Georgia, serif;

  /* type: Bricolage Grotesque, set narrow, for display; Instrument Sans for text;
     tabular numerals on every price and count */
  --font-display:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --font-text:"Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --numerals:tabular-nums;

  /* shape */
  --radius:6px;
  --radius-small:4px;
  /* "Corners: rounded" (an admin's switch: app/themes.py, round.css): how round each kind of thing is, and the two
     colours of the soft shadow that stands where a card's heavy edge was */
  --round-card:14px;
  --round-thumb:10px;
  --round-field:10px;
  --round-pill:999px;
  --round-shade:rgba(0,0,0,.36);
  --round-shade-wide:rgba(0,0,0,.26);

  /* the bars' height and the page's side gutter */
  --bar:52px;
  --gut:20px;
  /* where the top bar ends: the bar, plus the phone's own top inset once the product is on a home screen */
  --top:calc(var(--bar) + env(safe-area-inset-top, 0px));
}
@media (min-width:900px){ :root{ --bar:56px; --gut:40px } }