/* Wat: design tokens.
   A forest monastery's quiet, in print. Every colour, font, size, space,
   radius, shadow and duration lives here. Other CSS uses only these names.
   Colours are written light-dark(light, dark); the page follows
   prefers-color-scheme through color-scheme. */

:root {
  color-scheme: light dark;

  /* ---- Colour: ground ---- */
  --paper: light-dark(#F4EEE0, #17120D);        /* Plaster / Hall floor */
  --card: light-dark(#FBF8EF, #221A13);         /* Lime wash / Lamp-lit teak */
  --sunk: light-dark(#EAE2CE, #100C08);         /* Shade / Rafters */

  /* ---- Colour: ink ---- */
  --ink: light-dark(#2B2119, #EDE2CC);          /* Teak ink / Palm leaf */
  --ink-2: light-dark(#5F5244, #B9AA90);        /* Faded ink / Ash */
  --rule: light-dark(#D6CAB2, #3A2F23);         /* Hairline */
  --rule-strong: light-dark(#A8987C, #6A5843);  /* Heavy rule, field border */

  /* ---- Colour: the three pigments ---- */
  --ochre: light-dark(#C0822A, #D9962F);        /* Ochre robe: marks and rules, not text */
  --saffron: light-dark(#8A4B14, #E3A857);      /* Saffron-brown: labels, numerals */
  --forest: light-dark(#2E4A37, #9DBD9B);       /* Forest green: links, group marks */

  /* ---- Colour: roles ---- */
  --action: light-dark(#2E4A37, #E3A857);       /* Primary button: forest by day, the lamp by night */
  --action-hover: light-dark(#213828, #F0BC72);
  --action-ink: light-dark(#FBF8EF, #1B140C);
  --wet: light-dark(#B05A14, #FFC670);          /* Ink before it dries */
  --focus: light-dark(#B05A14, #FFC670);
  --fee: light-dark(#F1DFB3, #3B2A10);          /* Fee notice ground */
  --fee-ink: light-dark(#6A3F08, #F0C987);
  --mark-edge: light-dark(#FBF8EF, #17120D);    /* Thin edge that separates map marks */
  --chart-sea: light-dark(#F7F2E6, #130F0A);
  --chart-land: light-dark(#E4D8BC, #2C2218);
  --chart-coast: light-dark(#7A6A52, #8A765C);
  --chart-line: light-dark(#D9CDB4, #2B2219);
  --lamp: light-dark(rgba(192, 130, 42, 0), rgba(227, 168, 87, 0.13)); /* Lamplight on the dark page */
  --shade: light-dark(rgba(43, 33, 25, 0.28), rgba(0, 0, 0, 0.6));
  --scrim: light-dark(rgba(244, 238, 224, 0.92), rgba(23, 18, 13, 0.92));

  /* ---- Type ---- */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Charter, "Bitstream Charter", Georgia, ui-serif, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-label: 0.75rem;     /* 12: tracked capitals */
  --fs-small: 0.875rem;    /* 14 */
  --fs-note: 1rem;         /* 16 */
  --fs-body: 1.0625rem;    /* 17 */
  --fs-lead: clamp(1.1875rem, 1.05rem + 0.7vw, 1.4375rem);
  --fs-h3: 1.3125rem;      /* 21 */
  --fs-h2: clamp(1.625rem, 1.25rem + 1.9vw, 2.5rem);
  --fs-h1: clamp(2.375rem, 1.3rem + 5.4vw, 4.75rem);
  --fs-numeral: clamp(2.25rem, 1.6rem + 3vw, 4rem);

  --lh-tight: 1.04;
  --lh-head: 1.16;
  --lh-body: 1.62;
  --lh-ui: 1.25;
  --lh-snug: 1.5;

  --track-label: 0.13em;
  --track-tight: 0.05em;
  --track-head: -0.012em;
  --track-none: 0;

  --w-regular: 400;
  --w-bold: 700;

  /* ---- Space (4px base) ---- */
  --s-0: 0.125rem;  /* 2 */
  --s-1: 0.25rem;   /* 4 */
  --s-2: 0.5rem;    /* 8 */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.5rem;    /* 24 */
  --s-6: 2rem;      /* 32 */
  --s-7: 3rem;      /* 48 */
  --s-8: 4.5rem;    /* 72 */
  --s-9: 7rem;      /* 112 */

  --gutter: clamp(1rem, 5vw, 3rem);
  --shell: 72rem;
  --measure: 34rem;
  --measure-wide: 44rem;
  --margin-col: 6.5rem;    /* hanging numeral column on wide screens */
  --tap: 2.75rem;          /* 44: smallest touch target */
  --field-h: 3.25rem;
  --swatch-h: 3.5rem;
  --leaf-w: 11rem;
  --toast-w: 26rem;
  --lamp-h: 38rem;
  --quote-w: 22rem;
  --entry-title-w: 15rem;
  --spec-label-w: 13rem;
  --space-label-w: 9.5rem;
  --swatch-w: 10rem;
  --demo-w: 19rem;
  --demo-h: 6rem;
  --pick-h: 7.5rem;
  --shadow-box-w: 9rem;
  --bp-note: "two columns from 56rem; hanging numerals from 64rem";

  /* ---- Line and radius ---- */
  --hair: 1px;
  --line-2: 2px;
  --line-3: 3px;
  --stroke-fine: 0.7px;
  --stroke: 1.1px;
  --stroke-mark: 1.5px;
  --r-0: 0;
  --r-1: 2px;        /* cards: paper has corners */
  --r-2: 4px;        /* buttons, fields */
  --r-round: 999px;  /* marks only */

  /* ---- Shadow: paper lying on paper ---- */
  --shadow-rest: 0 var(--hair) 0 var(--rule);
  --shadow-card: 0 var(--hair) 0 var(--rule), 0 0.75rem 1.25rem -1rem var(--shade);
  --shadow-lift: 0 var(--hair) 0 var(--rule-strong), 0 1.5rem 2rem -1.25rem var(--shade);
  --shadow-key: 0 var(--line-2) 0 var(--rule-strong);
  --shadow-none: 0 0 0 transparent;

  /* ---- Motion: four tempos, two easings, nothing else ---- */
  --t-press: 110ms;   /* a key giving under the finger */
  --t-quick: 240ms;   /* hover, small state */
  --t-turn: 620ms;    /* a page turned: things arriving */
  --t-dry: 1400ms;    /* ink drying, a rule being drawn */
  --stagger: 80ms;
  --ease-settle: cubic-bezier(0.16, 0.84, 0.24, 1);
  --ease-even: cubic-bezier(0.45, 0.05, 0.35, 1);
  --rise: 1.5rem;
  --rise-small: 0.75rem;
  --press: 1px;
  --tilt: -0.35deg;
  --blur-wet: 1.2px;
  --toast-stay: 3600ms;
  --chart-travel: 1100ms;

  /* ---- Texture: plaster grain, felt not seen ---- */
  --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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .24 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scopes used on the design-language page to show both themes side by side. */
.theme-light { color-scheme: light; }
.theme-dark { color-scheme: dark; }