/* ==========================================================================
   Wrencloud Tools — design tokens. The ONE copy.

   Paper and ink. The page is paper; the tools sit on it as sheets, the way a
   form sits on a desk. Four marks carry all of the colour, and each means one
   thing only:

     violet   anything you can press
     marker   pink behind text: something someone else could see — what an
              upload site would be handed, metadata a photo is carrying
     bar      black over text: something that never leaves this page
     green    it worked: a match, a pass, a file that came out clean

   Loaded first by index.html and by every tool page, before site.css and
   kit.css. Nothing else may declare a colour, a text size or a corner radius
   as a raw value that one of these already names. README → "Design rules".
   ========================================================================== */

:root {
  /* ---- The fixed palette. These never change with the theme. ----------- */
  --paper:      #EDE9E1;
  --sheet:      #FAF8F3;
  --sheet-2:    #F3F0E9;
  --sheet-hl:   #F1EDE4;
  --sheet-rule: #DAD4C8;
  --band:       #E4DFD5;
  --white:      #FFFFFF;
  --ink:        #16140F;
  --ink-2:      #4A453D;
  --ink-3:      #655F54;
  --rule:       #CFC8BA;
  --violet:     #4A2FD0;
  --violet-hover: #2E1A9E;
  --marker:     #F7B8E7;
  --bar:        #0F0E0C;

  /* ---- The page. These change in dark mode; sheets do not (below). ------ */
  --bg:          var(--paper);
  --fg:          var(--ink);
  --fg-2:        var(--ink-2);
  --fg-3:        var(--ink-3);
  --line:        var(--rule);             /* a divider: decorative, exempt from 3:1 */
  --line2:       #BDB5A6;                 /* a stronger divider, still decorative */
  --line-strong: var(--ink);              /* the 2px rule over a section */
  --act:         var(--violet);
  --act-hover:   var(--violet-hover);
  --act-fg:      var(--white);
  --foot:        var(--band);
  --focus:       var(--violet);
  --raise:       var(--sheet);            /* a surface on the page */
  --raise-2:     var(--white);            /* a control on that surface */
  --raise-3:     var(--sheet-2);          /* hover */
  --ok:          #08704C;
  --warn:        #8A5300;
  --danger:      #B3261E;
  --shadow:      0 1px 0 rgba(22, 20, 15, .06), 0 24px 44px -32px rgba(22, 20, 15, .5);
  --scrim:       rgba(22, 20, 15, .5);       /* behind the tool list drawer */

  /* Tints for a state: a wash to sit behind it, a line to edge it. */
  --ok-wash:     rgba(8, 112, 76, .10);
  --ok-line:     rgba(8, 112, 76, .55);
  --warn-wash:   rgba(138, 83, 0, .10);
  --warn-line:   rgba(138, 83, 0, .55);
  --danger-wash: rgba(179, 38, 30, .09);
  --danger-line: rgba(179, 38, 30, .55);
  --marker-wash: rgba(247, 184, 231, .55);
  --checker:     repeating-conic-gradient(#FFFFFF 0% 25%, #E9E5DC 0% 50%) 50% / 16px 16px;

  /* ---- The names the tools were written against, pointed at the above. -- */
  --shell:       var(--bg);
  --bg2:         var(--raise);
  --bg3:         var(--raise-2);
  --bg4:         var(--raise-3);
  --text:        var(--fg);
  --nav:         var(--fg);
  --muted:       var(--fg-2);
  --faint:       var(--fg-3);
  --accent:      var(--act);
  --accent2:     var(--act);
  --accent-soft: var(--act);
  --on-accent:   var(--act-fg);
  --accent-wash: rgba(74, 47, 208, .09);
  --accent-line: rgba(74, 47, 208, .55);
  --edge:        var(--line-strong);      /* the outline of a control: ink, 3:1 and up */
  --edge-hover:  var(--line-strong);
  --pin:         var(--fg);

  /* ---- Type ---------------------------------------------------------------
     Archivo for everything you read at a glance, condensed to 70% width and
     800 weight for headlines. Newsreader for anything you read at length.
     Martian Mono for labels and for every kind of output. */
  --font:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif:   'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:    'Martian Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Seven steps for text, and fluid display sizes for headlines only. A size
     that seems to fall between two steps takes the nearer one. */
  --fs-label: 11px;    /* mono, uppercase: labels, tags, kickers */
  --fs-cap:   13px;    /* captions, hints, dense output */
  --fs-ui:    15px;    /* controls, tool text, nav, footers, small serif */
  --fs-body:  17px;    /* reading text, buttons */
  --fs-read:  19px;    /* serif answers and definitions */
  --fs-lead:  22px;    /* serif ledes, questions, card titles */
  --fs-head:  26px;    /* small headlines, big readouts */
  /* Display: condensed Archivo 800 only, at 32px and above. */
  --fs-display: clamp(32px, 3.2vw, 46px);   /* readouts */
  --fs-h2:      clamp(32px, 3vw, 44px);     /* section headlines */
  --fs-h1:      clamp(40px, 4.2vw, 60px);   /* a page's headline */

  /* ---- Shape and space ---------------------------------------------------
     One radius. Circles (50%) are a shape, not a radius, and are allowed for
     dots; nothing else is rounded. */
  --r:      2px;
  --gutter: clamp(16px, 2.8vw, 40px);
  --max:    1440px;
  --col-gap: 24px;
  --sec-gap: clamp(48px, 5vw, 72px);

  /* The control panel: a header across the top, the tool list down the
     left, the work in the rest. */
  --hdr-h:  64px;
  --side-w: 272px;

  /* ---- Targets -----------------------------------------------------------
     WCAG 2.2 §2.5.8 asks for 24×24 at level AA. Under a coarse pointer the
     floor rises to a thumb-sized 44 — see kit.css. Buttons in the page
     chrome are 48 everywhere. */
  --tap:  24px;
  --tap-coarse: 44px;
  --btn:  48px;

  color-scheme: light;
}
@media (pointer: coarse) {
  :root { --tap: var(--tap-coarse); }
}

/* Dark mode is dimmed daylight: the room darkens, the paperwork does not.
   Sheets, and the tools on them, stay paper-coloured in both. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          #211F1A;
    --fg:          #EDE9E1;
    --fg-2:        #BDB6A8;
    --fg-3:        #A39C8E;
    --line:        #3A362E;
    --line2:       #4A453C;
    --line-strong: #EDE9E1;
    --act:         #B7A6FF;
    --act-hover:   #D3C9FF;
    --act-fg:      #16140F;
    --foot:        #1A1814;
    --focus:       #B7A6FF;
    --raise:       #2A2721;
    --raise-2:     #33302A;
    --raise-3:     #3A362E;
    --ok:          #5FD3A4;
    --warn:        #F2C36B;
    --danger:      #FF9C8F;
    --accent-wash: rgba(183, 166, 255, .12);
    --accent-line: rgba(183, 166, 255, .55);
    --shadow:      0 44px 90px -40px rgba(0, 0, 0, .95);
    color-scheme: dark;
  }
}

/* A sheet is a document, and documents are paper in any light. Everything
   inside one — a tool included — reads the daylight values whatever the
   page around it is doing. */
.sheet, .ob-app {
  --bg:          var(--sheet);
  --fg:          var(--ink);
  --fg-2:        var(--ink-2);
  --fg-3:        var(--ink-3);
  --line:        var(--sheet-rule);
  --line2:       var(--rule);
  --line-strong: var(--ink);
  --act:         var(--violet);
  --act-hover:   var(--violet-hover);
  --act-fg:      var(--white);
  --focus:       var(--violet);
  --raise:       var(--sheet);
  --raise-2:     var(--white);
  --raise-3:     var(--sheet-2);
  --ok:          #08704C;
  --warn:        #8A5300;
  --danger:      #B3261E;
  --accent-wash: rgba(74, 47, 208, .09);
  --accent-line: rgba(74, 47, 208, .55);
  --ok-wash:     rgba(8, 112, 76, .10);
  --ok-line:     rgba(8, 112, 76, .55);
  --warn-wash:   rgba(138, 83, 0, .10);
  --warn-line:   rgba(138, 83, 0, .55);
  --danger-wash: rgba(179, 38, 30, .09);
  --danger-line: rgba(179, 38, 30, .55);
  color-scheme: light;
}