/*
 * Night Desk: design tokens.
 *
 * A detective working late: lamp-lit dark wood, a corkboard wall, kraft
 * folders, cream paper, brass and red string. This is the only file in the
 * site that may contain literal colour values. Every other stylesheet reads
 * the custom properties defined here.
 *
 * One look, every scheme:
 *   - On screen the Night Desk block at the end of this file applies whatever
 *     the operating system prefers and whatever data-theme says. There is no
 *     light/dark switch any more (the old Birch Archive dark palettes were
 *     removed on 2026-10-16; they out-ranked the Night Desk in OS dark mode).
 *   - The base block below keeps the document-paper tokens (pen, stamps,
 *     newsprint, carbon ...) that the Night Desk does not redefine.
 *   - Print always uses the print-safe palette.
 */

/* ------------------------------------------------------------------ */
/* Theme-independent tokens                                            */
/* ------------------------------------------------------------------ */
:root {
  /* Families. Self-hosted in base.css; fallbacks keep metrics close.
     In hands b, c and d the second family is self-hosted too: it supplies
     the characters the first one lacks (Turkish ğ İ ş, and ı for hand c;
     the Spanish ordinals ª º and superscripts ² ³ for hand d). Hand e
     carries all of them itself. The build reads these stacks to check case
     text against the shipped fonts. */
  --font-display: 'Sofia Sans Condensed', 'Noto Kufi Arabic', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Spectral', 'Markazi Text', Georgia, 'Times New Roman', serif;
  --font-mono: 'Azeret Mono', 'Noto Kufi Arabic', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-hand-officer: 'Kalam', 'Aref Ruqaa', 'Comic Sans MS', cursive;
  --font-hand-a: 'Caveat', 'Aref Ruqaa Ink', 'Bradley Hand', cursive;
  /* The desk's own handwriting (photo names, sticky notes, folder notes, tags, the
     player's notes): hand a's Latin face, with the plainer Marhey for Arabic, which
     reads more easily at label size than hand a's Ruqʿah (owner, 23 Oct). */
  --font-hand-ui: 'Caveat', 'Marhey', 'Bradley Hand', cursive;
  --font-hand-b: 'Homemade Apple', 'Ms Madi', 'Mirza', 'Brush Script MT', cursive;
  --font-hand-c: 'Nothing You Could Do', 'Annie Use Your Telescope', 'Katibeh', 'Segoe Print', cursive;
  --font-hand-d: 'Marck Script', 'Kaushan Script', 'Alkalami', 'Snell Roundhand', cursive;
  --font-hand-e: 'Shadows Into Light Two', 'Marhey', 'Chalkboard', cursive;

  /* Type scale (fluid between 360px and 1440px). */
  --t-0: 0.8125rem;
  --t-1: 0.9375rem;
  --t-2: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);
  --t-3: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --t-4: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);
  --t-5: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
  --t-6: clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
  --t-7: clamp(2.75rem, 1.9rem + 3.8vw, 4.5rem);

  --lh-body: 1.6;
  --lh-snug: 1.3;
  --lh-tight: 1.04;

  /* Letter spacing for condensed capitals. */
  --track-label: 0.08em;
  --track-caps: 0.12em;
  --track-wide: 0.22em;

  /* Spacing: 4 / 8 / 12 / 16 / 24 / 32 / 48 (+ 64). */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Shape and layout. */
  --r: 2px;
  --hair: 1px;
  --measure: 68ch;
  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --tap: 44px;

  /* Motion. Durations collapse to zero under prefers-reduced-motion. */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur: 140ms;
  --dur-slow: 220ms;

  /* Stacking. */
  --z-header: 20;
  --z-toast: 60;
  --z-skip: 100;

  /*
   * One lake-depth contour line, 480 x 16, seamless when repeated
   * horizontally. Used only as a mask (alpha), so the line takes its
   * colour from the element's background-color token.
   */
  --contour-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 16' width='480' height='16'%3E%3Cpath d='M0 9C22 9 38 5 64 5S104 11 132 11S170 4 206 4.5S252 12 284 11.5S322 6 352 6.5S404 12 432 10.5S466 9 480 9' fill='none' stroke='black' stroke-width='1'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------------ */
/* Base palette: document-paper tokens, and the fallback page colours  */
/* for media other than screen and print. On screen the Night Desk     */
/* block below overrides every page colour.                            */
/* ------------------------------------------------------------------ */
:root,
[data-theme] {
  color-scheme: light;

  --bg: #F1EEE6;
  --surface: #FBFAF6;
  --ink: #1C2326;
  --ink-muted: #56616A;
  --rule: #D3CCBC;
  --rule-strong: #857E6C;
  --accent: #2E5C50;
  --on-accent: #FBFAF6;
  --mark: #8E3B2A;
  --on-mark: #FBFAF6;
  --mark-wash: #F3E4DC;
  --wash: #DDE4D3;
  --warn: #7A5B12;
  --warn-wash: #F6EBD3;
  --focus: var(--accent);

  /* Physical documents (renderers). */
  --paper: #FDFBF5;
  --paper-ink: #1F2326;
  --paper-muted: #5A6066;
  --paper-rule: #B9C7D3;
  --paper-margin: #C98B7E;
  --pen: #26386B;
  --stamp-red: #A33A2B;
  --stamp-blue: #2C4C8C;
  --stamp-black: #24282A;
  --redact: #111416;
  --newsprint: #ECE6D6;
  --thermal: #FAFAF6;
  --carbon: #E4E8EE;

  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2356616A' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* Dialog veil. Declared on ::backdrop itself because older engines do not
   let ::backdrop inherit custom properties from the page. */
::backdrop {
  --backdrop: rgb(16 21 23 / 0.55);
}

/* ------------------------------------------------------------------ */
/* Print: black on white whatever the screen theme                     */
/* ------------------------------------------------------------------ */
@media print {
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme="dark"],
  [data-theme="light"],
  [data-theme="dark"] {
    color-scheme: light;

    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --ink: #000000;
    --ink-muted: #3B4247;
    --rule: #A6A6A6;
    --rule-strong: #5C5C5C;
    --accent: #1F4A3F;
    --on-accent: #FFFFFF;
    --mark: #7A2E1F;
    --on-mark: #FFFFFF;
    --mark-wash: #FFFFFF;
    --wash: #F2F4EF;
    --warn: #5C440C;
    --warn-wash: #FFFFFF;
    --focus: var(--accent);

    --paper: #FFFFFF;
    --paper-ink: #000000;
    --paper-muted: #3B4247;
    --paper-rule: #9AA8B4;
    --paper-margin: #9A6A60;
    --pen: #1C2A55;
    --stamp-red: #7A2E1F;
    --stamp-blue: #1F3870;
    --stamp-black: #000000;
    --redact: #000000;
    --newsprint: #FFFFFF;
    --thermal: #FFFFFF;
    --carbon: #FFFFFF;

    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23000000' stroke-width='1.5'/%3E%3C/svg%3E");
  }
}

/* ==========================================================================
   NIGHT DESK (2026-10-14): the site's single look, chosen by the user.
   Lamp-lit dark wood + corkboard. Overrides the base page colours in every
   colour scheme; only print differs. Documents keep their own paper colours
   (documents.css).
   The :root selectors carry specificity (0,2,0) so that no root rule keyed on
   data-theme or prefers-color-scheme can out-rank this block again.
   ========================================================================== */
@media screen {
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme],
  [data-theme] {
    --bg: #17110c;
    --surface: #221910;
    --ink: #efe7d6;
    --ink-muted: #bba98a;
    --rule: #3a2c20;
    --accent: #d9a35a;        /* brass / lamp light: links, focus, primary buttons */
    --mark: #c0392b;          /* red string, wax, alerts */
    --wash: #2c2117;
    --focus: #f0c27a;
    /* Redefined here so the light-mode Birch values never leak into the
       Night Desk (near-white text on brass was ~2.2:1). */
    --on-accent: #1d130b;     /* dark wood on brass: 8.1:1 */
    --rule-strong: #6e5840;
    --on-mark: #fbf4e6;       /* on --mark #c0392b: 5.0:1 */
    --mark-wash: #3a1d16;
    --warn: #e2b866;
    --warn-wash: #33260f;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23bba98a' stroke-width='1.5'/%3E%3C/svg%3E");
    /* Same arrow for selects printed on paper (dialogs, slips). */
    --select-arrow-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235b5246' stroke-width='1.5'/%3E%3C/svg%3E");

    --wall: #1b1611;
    --cork: #9a7348;
    --cork-dark: #7d5a35;
    --frame: #3a2a1c;
    --wood: #2a1a10;
    --wood-2: #33200f;
    --lamp: rgba(255, 196, 120, .30);
    --paper: #efe7d6;
    --paper-2: #e6dcc6;
    --kraft: #c9a873;
    --kraft-dark: #a9864f;
    --paper-ink: #1d1a16;
    --paper-ink-soft: #5b5246;
    --wax: #8e1f1b;
    --string: #b3221d;
    --note-yellow: #f1dc7a;
    --note-pink: #e9b9a0;
    --brass: #b8925a;
    --prop-shadow: 0 8px 16px rgba(0, 0, 0, .55);
    --prop-shadow-lift: 0 16px 28px rgba(0, 0, 0, .6);
    /* The one shadow colour (black), as rgb channels: rgb(var(--shade) / .4).
       Used for shadows, the wood grain and the cork grain only. */
    --shade: 0 0 0;
    /* Small loose props: sticky notes, labels, polaroids, pinned cards. */
    --pin-shadow: 0 5px 10px rgb(var(--shade) / .42);
    /* Paper lying flat on kraft or on another paper. */
    --paper-shadow: 0 2px 4px rgb(var(--shade) / .3);
    /* Cork grain: fine and coarse fractal noise as black at low alpha, tiled. */
    --cork-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch' result='f'/%3E%3CfeColorMatrix in='f' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 -.36' result='a'/%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.11' numOctaves='3' seed='3' stitchTiles='stitch' result='c'/%3E%3CfeColorMatrix in='c' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .7 0 0 0 -.3' result='b'/%3E%3CfeMerge%3E%3CfeMergeNode in='b'/%3E%3CfeMergeNode in='a'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
    color-scheme: dark;
  }

  /* The veil behind a dialog: the desk in shadow (declared on ::backdrop, see above). */
  ::backdrop {
    --backdrop: rgb(23 17 12 / 0.74);
  }
}