/* ═══ Quiet Stanza — the writing desk design system ═══
   Ported from App.xaml. Light theme only: the product is a lit desk.
   This sheet holds the faces, the tokens and the base; the rest is split by area (common,
   shell, settings, … reader), linked from index.html in the order they cascade, then
   desk.css (how the desk fits the room) and page.css (the page every twin shares). */

/* Each face is served as a WOFF2 subset (Latin, Latin-1, Latin Extended-A — the macrons —
   General Punctuation and the arrows, shapes and dingbats the desk draws); the full TTF stays
   behind it for a browser that cannot take WOFF2. Font Awesome carries only the glyphs the
   app sets, so it is a few kilobytes and may swap in rather than hide the icon. */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond.woff2") format("woff2"),
       url("../fonts/EBGaramond.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Italic.woff2") format("woff2"),
       url("../fonts/EBGaramond-Italic.ttf") format("truetype");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Playwrite NZ";
  src: url("../fonts/PlaywriteNZ.woff2") format("woff2"),
       url("../fonts/PlaywriteNZ.ttf") format("truetype");
  font-weight: 100 400;
  font-style: normal;
  font-display: swap;
}
/* The public page's typed letter: Courier Prime (OFL, fonts/CourierPrime-OFL.txt). */
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/CourierPrime-Regular.woff2") format("woff2"),
       url("../fonts/CourierPrime-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("../fonts/CourierPrime-Bold.woff2") format("woff2"),
       url("../fonts/CourierPrime-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* The welcome letter's signature, a pointed-pen roundhand: bundled so the first open has
   it before the server has fetched any hand. */
@font-face {
  font-family: "Pinyon Script";
  src: url("../fonts/PinyonScript.woff2") format("woff2"),
       url("../fonts/PinyonScript.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Font Awesome 6 Free";
  src: url("../fonts/fa-solid-900.woff2?v=52b42c4a") format("woff2"),
       url("../fonts/fa-solid-900.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* the writing desk palette */
  --paper: #F3EEE3;
  --sheet: #FBF8EF;
  --sheet-edge: #E2D9C3;
  --ink: #1F2833;
  --ink-soft: #2D3B4C;
  --text-primary: #2B2A24;
  --text-secondary: #6E685A;
  --rule-line: #D9CDB3;
  /* ProceduralInk strokes extend past the line box; canvases grow by this on every side. */
  --ink-bleed: 10px;
  --margin-red: #C06A50;
  --wax: #A03A26;
  --wax-hover: #86301F;
  --wax-pressed: #6E2818;
  --laurel: #4C7A5B;
  /* a chosen option, tab or card: bottle-green ink, darker than laurel */
  --chosen: #2C5440;
  --chosen-hover: #234434;
  /* a favourite's heart, on the Progress table */
  --favourite: #E8287C;
  --gold: #A8842C;
  --rail-text: #9AA5B1;
  --chip: #EAE3D0;
  --eco-yellow: #F0BB0C;
  --eco-yellow-type: #8A6A06;

  /* The letter's paper and the desk it lies on (the public pages, onboarding, the desk). One
     source: public.css and the components use these. The watermark path is from the root, as
     the components' styles are served from elsewhere. */
  --desk: #D3CAB8;
  --desk-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  --letter-paper: #FCF9F1;
  /* Light from the top left, a shade deeper at the far corner. */
  --letter-light:
    radial-gradient(120% 90% at 12% 0%, rgba(255, 255, 255, 0.55), transparent 58%),
    radial-gradient(110% 100% at 100% 100%, rgba(110, 90, 60, 0.07), transparent 62%);
  /* Laid and chain lines, a faint mottle and a fine grain. */
  --letter-make:
            repeating-linear-gradient(to bottom, rgba(110, 90, 60, 0.03) 0 1px, transparent 1px 3px),
            repeating-linear-gradient(to right, transparent 0 97px, rgba(110, 90, 60, 0.045) 97px 98px),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)' opacity='0.12'/%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
  --letter-make-size: auto, auto, 700px 700px, 160px 160px;
  /* A lighter rim, a hairline, the tight shadow of a sheet lying flat, a lifted corner. */
  --letter-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.7),
    0 0 0 1px rgba(80, 64, 40, 0.08),
    0 1px 1.5px rgba(60, 48, 30, 0.16),
    0 4px 12px -4px rgba(60, 48, 30, 0.2),
    16px 20px 22px -16px rgba(60, 48, 30, 0.38);
  --letter-watermark: url("/img/landing/watermark-qs-tile.png");
  --eco-yellow-border: #D8A70E;
  /* the pen marker on the writing ruler: the yellow of a highlighter */
  --pen-marker: #f2c230;
  /* A Rhodia pad's colours are set on each pad (GiftPadCatalog: --pad-cover, --pad-board,
     --pad-cover-type); these are only the fallbacks where none is, the classic orange. Never
     derive a colour from --pad-* here: :root has no pad. */
  --pad-cover-default: #FF6A00;
  --pad-board-default: #C24F00;
  --pad-cover-type-default: #2A1208;

  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  /* the bundled hand; choosing another in Settings overrides these at runtime (qsFont.use) */
  --hand: "Playwrite NZ", "EB Garamond", cursive;
  /* Overridden to "Playwrite NZ Guides" once the server has fetched the tracing face */
  --hand-guides: "Playwrite NZ Guides", "Playwrite NZ", "EB Garamond", cursive;
  /* the welcome letter, written as if by pen */
  --letter: "Pinyon Script", "EB Garamond", cursive;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* the bundled hand as type, for the welcome and the cover (not the writer's own --hand) */
  --script: "Playwrite NZ", var(--serif);

  --rail-width: 118px;
  --radius-card: 6px;
  --radius-sheet: 12px;

  /* ISO 216 A5 notebook twin — physical millimetres (CSS `mm` unit). */
  --a5-w: 148mm;
  --a5-h: 210mm;
  --journal-gutter: 1.5mm;
  --journal-band: 4mm;
  --journal-leaf-top: 2.5mm;
  --journal-margin-x: 11mm;
  --journal-margin-top: 8mm;
  --journal-margin-bottom: 6mm;
  --journal-pagenum-band: 8mm;
  --journal-book-w: calc(var(--a5-w) * 2 + var(--journal-gutter));
  --journal-book-h: calc(var(--journal-band) + var(--a5-h));
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* The desk the whole app sits on, as on the public pages: a warm stone with a coarse grain. */
  background: var(--desk-grain) 0 0 / 220px 220px, var(--desk);
  color: var(--text-primary);
  font-family: var(--ui);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}