/*
  Colours, fonts and sizes, carried over from the wca-proto mockup so the real
  thing and the visual reference cannot drift apart. Everything else reads from
  here — change a value in this file and it changes everywhere.

  The light theme lives at the bottom: the same names with paler values, so no
  other file needs to know which theme is on.
*/

:root {
  /* --- surfaces, darkest to lightest --- */
  --bg-base:      #141414;   /* the page behind everything */
  --bg-panel:     #1C1F1E;   /* the sidebar */
  --bg-surface:   #262E2B;   /* cards and rows */
  --bg-raised:    #313B37;   /* something sitting on a card */

  /* --- paper (does NOT invert — it is a physical object) --- */
  --paper:        #EDE3D0;

  /* --- text --- */
  --text:         #E8E4DA;
  --text-soft:    #B6B3A8;
  --text-muted:   #A2A197;

  /* --- accents --- */
  --amber:        #C9873F;
  --amber-bright: #DBA05C;
  --teal:         #6E9AA6;
  /* Same split as --rust below, for the same reason. #6E9060 and #6E9AA6 are
     status *words* — "nadaje", "zdrowa", a character on przerwa — and as ink
     they come to 3.21:1 and 3.77:1 on something raised, under the 4.5 a word
     that small needs. Fills, borders and left-edges keep --green/--teal;
     anything that is read uses the -ink pair. The light theme's values already
     clear 4.5 everywhere, so there the two names are the same colour. */
  --green-ink:    #90AB85;
  --teal-ink:     #84AAB4;
  /* Zamrożona: the same fact as przerwa with no date on it, and the design
     wants it to read as the dimmer of the two. It cannot be dimmed with
     opacity — --teal-ink only just clears 4.5 at full strength, so 0.72 of it
     came to 3.18 on a card and the fact went quiet in the wrong way. This is
     the same colour pulled most of the way to grey at the *same* luminance:
     the teal fades, the contrast does not move. */
  --teal-faint:   #97A6AA;
  --rust:         #B5533F;
  /* The same rust, lightened until it can be read. #B5533F is a fill and an
     edge — as ink it comes to 2.83:1 on a card and 2.36:1 on something raised,
     and the first thing written in it is the error line. Fills and borders keep
     --rust; anything that is a word uses --danger below. */
  --rust-ink:     #DE8770;
  --green:        #6E9060;
  /* What is written on top of an accent fill — the primary button, an active
     filter chip, a hovered map pin. It cannot be one hardcoded value: the
     accent is a pale amber on the dark theme and a dark ochre on the light one,
     so the ink has to turn over with it. */
  --on-accent:    #221c12;


  /* --- lines --- */
  --line:         #35403C;
  /* The quartermaster's notebook: a grid you read through, not at. */
  --grid:         rgba(232, 228, 218, 0.05);
  /* The notebook itself, ready to lay over a panel's own colour. One
     declaration rather than four lines repeated per surface — the karta's head
     and the board's forum cards are the same piece of paper. Only --grid
     inverts between the themes; the ruling is the same on both. */
  --grid-lines:
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 26px);
  --line-bright:  #4A5651;
  /* The boundary of a control that has no fill to speak for it — the topbar's
     buttons, the pager, the rail's handle, the banner dots, an empty input.
     --line and --line-bright are hairlines you read *through*: at 1.29:1 and
     1.82:1 on a card they draw a section rule beautifully and tell nobody
     where the button is. WCAG wants 3:1 for the edge that identifies a
     control, so that edge gets its own name and the thirty decorative rules
     keep theirs. Only borders that are the whole affordance point here. */
  --line-control: #7E8783;

  /* --- shape --- */
  --sidebar-width: 268px;
  /* Square. Softly rounded boxes read as a decade ago; the pills and the
     map dots below keep their shape because a pill is not a rounded box. */
  --radius: 0;
  --shell-max: 1600px;

  /* --- the phone ---------------------------------------------------------
     One number, written down once. 46rem / 736px is where the rail stops
     being furniture and becomes a drawer, the map banner goes away, and a
     post's kit folds up.

     A custom property cannot be read inside a media query without a build
     step, so the queries spell 46rem literally. This is still the one place
     the number is *decided*: change it here, then

         grep -n "max-width: 46rem" client/css/

     finds every rule that follows it, and nothing else does.

     60rem stays what it always was — the tablet width where the rail stacks
     under the page and the banner's two halves come apart. The phone rules
     sit inside that, they do not replace it. */
  --bp-phone: 46rem;
  /* The board's ground on a phone, where the forest is not downloaded — see
     .view.wide in shell.css. Not picked: measured. The photograph averages
     #898B83, the board lays a 72% wash of #0E100E over it, and this is what
     that comes to. So the board keeps its colour and stops paying 1.5MB
     for it. */
  --board-ground: #31322F;
  /* How far the drawer comes in. Wide enough for the nav, never the whole
     screen: the strip of page still showing is what says it is a drawer. */
  --drawer-width: min(300px, 86vw);

  /* --- the board index -------------------------------------------------
     Taken from the forum's own theme rather than invented here:
     colors_tertiary.min.css. The panels really are all one colour on the dark
     board — what separates them there is the paper textures, not a lighter
     box. The light values at the bottom of this file are ours, not the
     forum's; the note there says why. */
  --fora-panel: #262E2B;   /* the card — the same green-grey as a post */
  --fora-inner: #313B37;   /* hairlines and fallbacks inside it */
  --fora-desc:  #999999;   /* .fora_opis span */
  --fora-link:  #CCCCCC;   /* .nene_fora a */
  --fora-ink:   #2B2A26;   /* the category name, written on the banner's paper */

  /* --- type --- */
  --font-script: 'Kaushan Script', 'Segoe Script', cursive;
  --font-title:  'Oswald', 'Arial Narrow', sans-serif;
  /* Post prose is the board's own body face, not a serif: whatcomesafter.pl
     sets "Open Sans" on body and the posts inherit it. */
  --font-prose:  'Open Sans', 'Segoe UI', Tahoma, sans-serif;
  --font-ui:     'Barlow', system-ui, sans-serif;
  --font-mono:   ui-monospace, 'Consolas', monospace;

  /* --- the caps labels ---------------------------------------------------
     The board is full of small uppercase labels: POGODA, BROŃ BIAŁA, SEZON 1,
     the rail's group headings, the crumbs, a column head in a table. There
     were thirty-two of them and they had drifted across nine sizes between
     0.58rem and 0.78rem — under 10px at the bottom, which is texture rather
     than a word, especially in caps with tracking on.

     Three steps, and every one of those rules now points at one of them, so
     "make the labels bigger" is this block rather than a sweep of the CSS.
     What decides the step is how much room the label has, not how important
     it is: --label-sm is for the ones that sit on top of something (a pin on
     the map, a corner of the weather card), --label is the ordinary one, and
     --label-lg is for the ones that head a column or a section. */
  --label-sm: 0.68rem;
  --label:    0.78rem;
  --label-lg: 0.82rem;

  /* --- the names the older screens already use ---------------------------
     app.css was written against these before the palette existed. They are
     aliases now, so the composer, the queue and the sheet re-theme for free
     and nothing had to be renamed in eight files at once. */
  --bg:      var(--bg-base);
  --panel:   var(--bg-surface);
  --panel-2: var(--bg-raised);
  --ink:     var(--text);
  --ink-dim: var(--text-muted);
  --accent:  var(--amber-bright);
  --danger:  var(--rust-ink);
  --measure: 68ch;
}

html[data-theme="light"] {
  /* Dark ink on pale paper, so the notebook grid inverts with everything else. */
  --grid:         rgba(36, 49, 45, 0.06);

  /* The surfaces invert their *order*, not just their values: on the dark
     theme a card is lighter than the page it sits on, so here it is paler.
     The board is a photograph of a forest with cards laid on it — at anything
     short of paper-pale they read as part of the trees, which is what made
     this theme hard to look at. */
  --bg-base:      #E4E7E1;   /* the page behind everything */
  --bg-panel:     #F1F2ED;   /* the sidebar */
  --bg-surface:   #FAFAF6;   /* cards and rows */
  --bg-raised:    #ECEEE7;   /* something sitting on a card */

  --text:         #1F2A26;
  --text-soft:    #4A5754;
  /* .muted on the page itself is the commonest pairing in the game, and at
     #64716C it came to 4.08:1 there — the one surface it had to clear. */
  --text-muted:   #5C6864;

  /* Ink in ~15 rules, and at #A9631F it came to 3.74:1 on the light page. */
  --amber:        #935416;
  --amber-bright: #8E5217;
  --teal:         #3F6E7A;
  --rust:         #9E3E2A;
  --rust-ink:     #9E3E2A;   /* already 5.29:1 on the light page — nothing to lift */
  /* The light accent is a dark ochre, so what is written on it is pale. */
  --on-accent:    #F7F4EC;
  --green:        #4C6B40;
  /* 4.83:1 and 4.52:1 on the page they sit on: dark ink on pale paper does not
     need the lift the dark theme's does, so here the word and the fill agree. */
  --green-ink:    #4C6B40;
  --teal-ink:     #3F6E7A;
  --teal-faint:   #576A6F;

  --line:         #C0CAC4;
  --line-bright:  #98A6A0;
  --line-control: #7A8480;

  /* The light board is *not* colors.css's — that file paints the panels a mid
     grey-green, which works on a forum with no photograph behind it and turns
     to fog on ours. Paper for the card, ink for the name, and the forest
     stays where it belongs: behind the cards, not through them. */
  --fora-panel: #F6F5F0;   /* the card — paper laid on the forest */
  --fora-inner: #E4E5DE;   /* hairlines and fallbacks inside it */
  --fora-desc:  #58615B;   /* .fora_opis span */
  --fora-link:  #2A322E;   /* .nene_fora a */

  /* The same sum with this theme's wash: #E9ECE5 at 84% over the same photo. */
  --board-ground: #DADCD5;
}

/* Initials stand in for a portrait that isn't there. They are written on the
   surface behind them, and in this theme that surface is nearly white. */
html[data-theme="light"] .portrait-initials { color: rgba(31, 42, 38, 0.5); }