/* Zen Moments · tokens.css
   The project's own token set, structured on the static-sites design system
   (static-sites/docs/DESIGN_SYSTEM.md §1–6; names per §12). Every design
   value is defined here first; the other stylesheets consume var(--token).

   Fonts: a system stack only, for now. Self-hosted woff2 files under
   assets/fonts/ (a gentle serif for headings, a humanist sans for body) may
   replace it later: add the @font-face rules here, change --font-serif and
   --font-sans, and keep each page under the 150 KB budget (SITE §4).

   Palette: soft sage, sand and mist, with one deep ink for text.
   Contrast (WCAG 2.2 AA, text at least 4.5:1), computed 2026-10-07:
     light  ink #1e2823 on page 13.8:1, on mist 12.9:1, on sand 12.4:1
            secondary #4b5950 6.7:1 / 6.3:1 / 6.0:1
            link #2d5a43 7.2:1 / 6.7:1 / 6.4:1; white on the button 7.9:1
     dark   text #e8ebe4 on page 14.6:1, on mist 13.2:1, on sand 12.7:1
            secondary #b3bdb5 9.1:1 / 8.2:1 / 7.9:1
            link #a6cbb2 9.9:1 / 8.9:1 / 8.6:1; ink on the button 9.9:1 */

:root {
  color-scheme: light;

  /* Brand slots (§1.1) */
  --brand-primary: #2d5a43;   /* deep sage: links, the horizon line, the button */
  --brand-accent: #7a9c84;    /* sage: the circle in the mark */
  --brand-surface: #f5f4ee;   /* the page: sand-tinted mist */
  --brand-ink: #1e2823;       /* the one deep ink */

  /* Text (§1.2) */
  --color-text-primary: var(--brand-ink);
  --color-text-secondary: #4b5950;
  --color-text-on-dark: #e8ebe4;
  --color-link: var(--brand-primary);
  --color-link-hover: #1f4332;

  /* Surfaces and borders (§1.3) */
  --color-surface-page: var(--brand-surface);
  --color-surface-container: #e9eee7;   /* mist */
  --color-surface-sand: #efe7d8;        /* sand */
  --color-border-container: #cfd6cb;
  --color-frame-bg: var(--brand-surface);

  /* Button (§1.4) */
  --color-button-primary-bg: var(--brand-primary);
  --color-button-primary-hover: #1f4332;
  --color-button-text-on-primary: #ffffff;

  /* Shapes: decorative fills only, never text */
  --color-shape-sage: #a6c0ac;
  --color-shape-sage-deep: var(--brand-accent);
  --color-shape-sand: #e2d6bf;
  --color-shape-mist: #d7e1d8;

  /* Focus (§4.2) */
  --color-focus: var(--brand-primary);
  --outline-width: 3px;
  --outline-offset: 3px;

  /* Type (§2). System stacks; see the note at the top. */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --text-sm: 1rem;          /* 16 px: footer and metadata; nothing is smaller */
  --text-base: 1.125rem;    /* 18 px: body */
  --text-md: 1.25rem;       /* 20 px: lead paragraphs, h3 */
  --text-lg: 1.5rem;        /* 24 px: h2 */
  --text-xlg: 2rem;         /* 32 px: h1, the code in the email picture */
  --text-xxlg: 2.5rem;      /* 40 px: h1 from the md breakpoint */
  --leading-tight: 1.2;
  --leading-base: 1.6;
  --leading-loose: 1.75;

  /* Space (§3.1) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Widths (§3.2) */
  --measure-text: 65ch;
  --measure-narrow: 48ch;
  --max-content-width: 46rem;

  /* Radii, borders, shadow (§4) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  --radius-circle: 50%;
  --border-thin: 1px;
  --border-medium: 2px;
  --shadow-low: 0 1px 2px rgba(30, 40, 35, 0.06);

  /* Motion (§6.2) */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --breath-cycle: 10s;      /* one breath: 4 s in, 6 s out */
  --breath-rounds: 6;       /* six breaths make the minute */

  /* Z-index (§6.1) */
  --z-content: 1;
  --z-sticky: 100;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --brand-primary: #a6cbb2;
    --brand-accent: #4a6e58;
    --brand-surface: #151a17;
    --brand-ink: #e8ebe4;
    --color-text-secondary: #b3bdb5;
    --color-link-hover: #c4ddcc;
    --color-surface-container: #1d2420;
    --color-surface-sand: #242620;
    --color-border-container: #36403a;
    --color-button-primary-hover: #c4ddcc;
    --color-button-text-on-primary: #151a17;
    --color-shape-sage: #355546;
    --color-shape-sand: #4a463a;
    --color-shape-mist: #2a3a30;
    --shadow-low: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}