/* css/tokens.css
 *
 * Palette, type scale and the primitives everything else is expressed in.
 * Dark values are chosen rather than inverted -- see the comment on the
 * dark block.
 */

/* ------------------------------------------------------------------------
 * Palette: Apple's system grays. Chrome is neutral; colour belongs to data
 * (task highlights) and to a single accent used for "today", selection and
 * primary action. Anything else competing for attention is a bug.
 * --------------------------------------------------------------------- */
:root {
  --canvas:    #ffffff;
  --chrome:    #f5f5f7;
  --chrome-2:  #ebebed;
  --fill:      #f2f2f7;
  --sep:       #d2d2d7;
  --sep-soft:  #e5e5ea;

  --text:      #1d1d1f;
  --text-2:    #55555a;
  --text-3:    #6e6e73;

  --accent:    #007aff;
  --accent-ink:#ffffff;
  --ok:        #34c759;
  --danger:    #ff3b30;

  --shadow:    0 0 0 .5px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-lg: 0 0 0 .5px rgba(0,0,0,.08), 0 8px 28px rgba(0,0,0,.09);

  --radius:    12px;
  --radius-sm: 8px;

  /* How much of a note's ink is mixed into the page to fill its card. The
     palette is the phone's saturated colour, which at full strength would
     leave body text unreadable — these are the two strengths where the tint
     still reads as "this note is coral" and the text still clears contrast.
     Dark needs more because a saturated hue over near-black goes muddy long
     before it goes legible. */
  --note-tint: 22%;
  --note-edge: 34%;

  /* The chosen face, if any. `applyFont` sets `--pick` on :root and clears it
     for the default; unset, the var() falls through to Madefor and the stack
     below is exactly what it always was. Putting the choice INSIDE --sans
     means every rule that already reads --sans follows it — the alternative
     was restyling several hundred declarations. */
  --sans: var(--pick, "Madefor"), -apple-system, BlinkMacSystemFont, "SF Pro Text",
          system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  /* Display cut for headline sizes only — tighter spacing that reads well
     large and muddy at body size, which is why it is a separate token.
     A picked face wins here too: leaving headings on MadeforDisplay while the
     body changed made the page look like two different designs. */
  --display: var(--pick, "MadeforDisplay"), var(--sans);
  /* The UI stack, deliberately WITHOUT --pick. For the few labels that must
     stay readable no matter what the user picked — chiefly the font-picker's
     own tile names, which describe a face and must not be set in it: a
     handwriting or pixel face renders its own name illegibly at 12px. */
  --ui: "Madefor", -apple-system, BlinkMacSystemFont, "SF Pro Text",
        system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Dark values are chosen, not inverted: separators lighten, the accent
   brightens (#0A84FF is Apple's dark-mode blue), and the canvas stays off
   black so elevated surfaces above it remain readable. */
@media (prefers-color-scheme: dark) {
  :root {
    --canvas:   #1c1c1e;
    --chrome:   #000000;
    --chrome-2: #2c2c2e;
    --fill:     #2c2c2e;
    --sep:      #38383a;
    --sep-soft: #2f2f31;

    --text:     #f5f5f7;
    --text-2:   #b0b0b6;
    --text-3:   #98989d;

    --accent:   #0a84ff;
    --ok:       #30d158;
    --danger:   #ff453a;

    --shadow:    0 0 0 .5px rgba(255,255,255,.08);
    --shadow-lg: 0 0 0 .5px rgba(255,255,255,.09), 0 8px 28px rgba(0,0,0,.5);

    --note-tint: 30%;
    --note-edge: 42%;
  }
}

/* Manual override. Placed after the media query so an explicit choice wins
   over the system preference in both directions. */
:root[data-force="light"] {
  --canvas: #ffffff; --chrome: #f5f5f7; --chrome-2: #ebebed; --fill: #f2f2f7;
  --sep: #d2d2d7; --sep-soft: #e5e5ea;
  --text: #1d1d1f; --text-2: #55555a; --text-3: #6e6e73;
  --accent: #007aff; --ok: #34c759; --danger: #ff3b30;
  --shadow: 0 0 0 .5px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-lg: 0 0 0 .5px rgba(0,0,0,.08), 0 8px 28px rgba(0,0,0,.09);
  --note-tint: 22%; --note-edge: 34%;
  color-scheme: light;
}
:root[data-force="dark"] {
  --canvas: #1c1c1e; --chrome: #000000; --chrome-2: #2c2c2e; --fill: #2c2c2e;
  --sep: #38383a; --sep-soft: #2f2f31;
  --text: #f5f5f7; --text-2: #b0b0b6; --text-3: #98989d;
  --accent: #0a84ff; --ok: #30d158; --danger: #ff453a;
  --shadow: 0 0 0 .5px rgba(255,255,255,.08);
  --shadow-lg: 0 0 0 .5px rgba(255,255,255,.09), 0 8px 28px rgba(0,0,0,.5);
  --note-tint: 30%; --note-edge: 42%;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  background: var(--chrome);
  color: var(--text);
  /* One knob for the whole app: every font-size below is an `em` against this
     value, so the scale moves as a unit and the proportions the design was
     drawn at survive. Raised twice now — 14 → 15.5 → 17. Must stay in px: an
     `em` here would compound against the browser's own 16px root and silently
     change the whole scale.

     17px is not arbitrary. It is the iOS body size, and this app's whole type
     system is `em` against this one number, so the desktop app now sets body
     text at the same optical size the phone does. At 15.5 the secondary rows
     (`0.82em` → 12.7px) had fallen below the ~13px floor where a UI stops
     being comfortably readable; they now land at 13.9. */
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* The app is a window that fills the viewport and scrolls inside its own
     panes. The PAGE must not scroll — a page-level scrollbar next to a
     pane-level one is two scrollbars for one surface. */
  overflow: hidden;
}
/* Signed out, there is no window: the auth card is a normal document and
   wants a normal page scroll on a short viewport. */
body.signed-out { overflow: auto; }
/* The sign-in card still reads best as a narrow centred column. The APP no
   longer uses this wrapper at all — it is a three-pane window (see `.win`
   below) — so `.wrap` is now the auth surface only. */