/* The shared design system, part 1: tokens (issue #421). Colour, type, space, shape and motion, in both themes.
   cfs.eco and dendrofile.com both load this file; ops/cfs-site/src/brand.html documents every token.
   Change a token here and in brand.html together. */

@font-face { font-family: "Marcellus"; src: url("fonts/Marcellus-normal.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Marcellus SC"; src: url("fonts/MarcellusSC-normal.woff2") format("woff2");
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/SourceSerif4-normal.woff2") format("woff2");
             font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("fonts/SourceSerif4-italic.woff2") format("woff2");
             font-weight: 400; font-style: italic; font-display: swap; }

:root {
  /* Colour. Ink on paper; everything else is a quiet supporting voice. */
  --paper: #f8f6f1;      /* page: warm cotton-rag white */
  --paper-2: #efebe2;    /* alternate band */
  --ink: #161613;        /* the logo's black, a touch warm */
  --ink-2: #45453e;      /* running text */
  --ink-3: #6b6a61;      /* captions, on paper only */
  --rule: #d6d0c2;       /* hairlines */
  --fir: #2c4a38;        /* the one accent: links, buttons, focus */
  --on-fir: #f8f6f1;
  --lichen: #e2e7d6;     /* fir's tint, for chips and highlights */
  --cedar: #8a4429;      /* rare warm note: step numbers, the sample chip */
  --rings: #2c4a38;      /* the tree-ring motif, drawn very faint */
  --rings-alpha: .10;
  --logo-filter: none;
  --ink-band: #161613;
  /* The hosted app's additions (issue #408, docs/design/ux-review-2026-11-01.md). Ratios are against paper. */
  --error: #a3261b;      /* error text, invalid field edge, danger button. 6.8:1 */
  --error-tint: #f6e3df; /* error flash, late chip; --error on it 6.0:1 */
  --warn-tint: #f3ead2;  /* waiting chips, warning flash; --ink-2 on it 8.1:1 */
  --field-line: var(--ink-3);  /* input edges: --rule is 1.4:1, under the 3:1 a control's edge needs */

  /* Type. Source Serif 4 sets headings and text; Marcellus SC appears only small, for labels, buttons and navigation. */
  --display: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --caps: "Marcellus SC", "Marcellus", Palatino, Georgia, serif;
  --text: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --fs-0: .875rem;   /* caption */
  --fs-1: 1.0625rem; /* body on phones */
  --fs-2: 1.1875rem; /* body on wide screens, lede on phones */
  --fs-3: 1.5rem;    /* h3 */
  --fs-4: clamp(1.9rem, 4.2vw, 2.75rem);  /* h2 */
  --fs-5: clamp(2.4rem, 7vw, 4.6rem);     /* h1 */
  --track-caps: .14em;
  --fs-app-1: var(--fs-3);  /* app page h1: 24px, so the action stays above the fold */
  --fs-app-2: var(--fs-2);  /* app section h2 */

  /* Space, on a 4-pixel base. */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 7rem;
  --measure: 36rem;   /* longest line of running text */
  --page: 72rem;      /* widest content */
  --gutter: 16px;

  /* Shape and motion: letterpress, not app. Nearly square, no shadows. */
  --radius: 2px;
  --hair: 1px solid var(--rule);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;
  --target: 48px;
  --masthead: 64px;  /* the app's header height */
}

@media (min-width: 900px) { :root { --gutter: 40px; } }

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121410; --paper-2: #1a1d17; --ink: #ecebe4; --ink-2: #c2c1b6; --ink-3: #9a998e;
    --rule: #30352c; --fir: #a9c9ad; --on-fir: #121410; --lichen: #20271c; --cedar: #dd9775;
    --rings: #a9c9ad; --rings-alpha: .09;
    --logo-filter: invert(1) sepia(.12) brightness(.93);  /* warm paper-white, not cool grey */
    --ink-band: #262b22;  /* lighter than the page, so the band still reads (design review finding 10) */
    --error: #f0a08f; --error-tint: #2a1a16; --warn-tint: #262418;
  }
}