/*
 * Tokens and typography. Decisions: docs/design/DESIGN.md; pixels: docs/design/maquette.html.
 * Propshaft serves every file of this folder; each one styles its own block.
 */

:root {
  --paper: #ffffff; --paper-2: #f3f1ec; --paper-ink: #1f2328; --paper-muted: #5e646d; --dot: #cfd3d8;
  --pen: #cf3e2c; --accent: #2f46b6; --shadow: rgba(70, 45, 20, .3);
  --wood: #b78c5d; --wood-2: #a77b4d; --wood-3: #c69c6d;
  --postit: #ffd84a; --postit-ink: #2a2410; --postit-blue: #9fd3f0; --postit-blue-ink: #12222c;
  --polaroid: #ffffff; --code-bg: rgba(24, 34, 56, .07);
  --eraser: #e9a6a6; --crumb: #9a8f86; --obj-dim: 1; --day-show: block; --night-show: none;
  --mark: var(--postit); --mark-ink: var(--postit-ink);
  --glass-rim: rgba(70, 76, 84, .5); --glass-tint: rgba(215, 228, 238, .16);
  --tab-ink: #1f1f1f; --t-eng: #9fc8a4; --t-ai: #e8a990; --t-product: #a9bde6; --t-maker: #e6cd7c; --t-food: #c9acd9;

  --f-ui: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --f-hand: "Shantell Sans", system-ui, sans-serif;
  --f-body: "Newsreader", Georgia, serif;
}

/* Dark tokens, twice: following the system, or forced by the theme toggle. Keep both blocks in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #232428; --paper-2: #2c2d32; --paper-ink: #ebe9e4; --paper-muted: #a5a6ab; --dot: #3c3e44;
    --pen: #ff7d69; --accent: #95a7ff; --shadow: rgba(0, 0, 0, .6);
    --wood: #3a291c; --wood-2: #312218; --wood-3: #443120;
    --postit: #d9b63a; --postit-ink: #2a2410; --postit-blue: #6fa7c6; --postit-blue-ink: #0c1a22;
    --polaroid: #e9e7e2; --code-bg: rgba(255, 255, 255, .07);
    --eraser: #a9706f; --crumb: #6d6158; --obj-dim: .78; --day-show: none; --night-show: block;
    --mark: var(--paper); --mark-ink: var(--pen);
    --glass-rim: rgba(200, 206, 214, .45); --glass-tint: rgba(215, 228, 238, .05);
    --tab-ink: #16181c; --t-eng: #7fa784; --t-ai: #c98a72; --t-product: #8aa0c9; --t-maker: #c7ae5f; --t-food: #a98fba;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #232428; --paper-2: #2c2d32; --paper-ink: #ebe9e4; --paper-muted: #a5a6ab; --dot: #3c3e44;
  --pen: #ff7d69; --accent: #95a7ff; --shadow: rgba(0, 0, 0, .6);
  --wood: #3a291c; --wood-2: #312218; --wood-3: #443120;
  --postit: #d9b63a; --postit-ink: #2a2410; --postit-blue: #6fa7c6; --postit-blue-ink: #0c1a22;
  --polaroid: #e9e7e2; --code-bg: rgba(255, 255, 255, .07);
  --eraser: #a9706f; --crumb: #6d6158; --obj-dim: .78; --day-show: none; --night-show: block;
  --mark: var(--paper); --mark-ink: var(--pen);
  --glass-rim: rgba(200, 206, 214, .45); --glass-tint: rgba(215, 228, 238, .05);
  --tab-ink: #16181c; --t-eng: #7fa784; --t-ai: #c98a72; --t-product: #8aa0c9; --t-maker: #c7ae5f; --t-food: #a98fba;
  color-scheme: dark;
}

/* Shantell Sans kept tidy: no informal shapes, no bounce. Titles at 650, pen writing at 500. */
h1, h2, h3, .hand {
  font-family: var(--f-hand);
  font-variation-settings: "INFM" 0, "BNCE" 0;
}
h1, h2, h3 { font-weight: 650; line-height: 1.15; text-wrap: balance; }
.hand { font-weight: 500; }

/* Small interface caption, e.g. "Latest note". */
.label {
  margin: 0;
  font-family: var(--f-ui);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper-muted);
}

/* A note visitors cannot see yet (drafts show in development only): stamped in red pen. */
.status-stamp {
  display: inline-block;
  margin: 10px 0 4px;
  padding: 2px 12px;
  border: 2px solid var(--pen);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  rotate: -3deg;
  color: var(--pen);
  font-size: 1.05rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.status-stamp--small { margin: 0 0 0 10px; padding: 0 8px; font-size: .75rem; vertical-align: .15em; }

body {
  margin: 0;
  color: var(--paper-ink);
  font-family: var(--f-ui);
}

a { color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }