/* garden-tools design tokens — the pygochelidon.garden theme as CSS custom
 * properties, plus the Josefin Slab face. Import this and style your applet
 * against the variables; the font is bundled with a relative url, so a
 * single-file build inlines it and the applet themes correctly whether it's
 * embedded in the garden or opened standalone. No runtime theming.
 *
 * Variable names mirror the garden's Pico CSS (`--pico-*`) so an applet's
 * styles read the same regardless of whether the tokens come from here or,
 * on the site itself, from Pico.
 */

@font-face {
  font-family: "Josefin Slab";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("./fonts/josefin-slab.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --pico-font-family-sans-serif: "Josefin Slab", serif;
  /* Headings/titling token. For now Josefin Slab (same as body); an octolinear
     display face (an octagonal/45° font) is the intended slot-in here later. */
  --pico-font-family-headings: "Josefin Slab", serif;

  /* Octolinear aesthetic: hard corners (no rounding). Squares all Pico
     components (buttons, inputs, cards) site- and applet-wide. */
  --pico-border-radius: 0;

  /* ── Named palette ───────────────────────────────────────────────
     The garden's colors by descriptive name. Every --pico-* token below
     is assigned from these, so this block is the single source of truth.
     Change a color here and it propagates everywhere. */
  --soil:       #1a1612;  /* darkest — page background */
  --bark:       #2a2118;  /* elevated surface — cards, inputs */
  --moss:       #1e2419;  /* green-tinted surface — card sectioning */
  --copper:     #b5703a;  /* primary accent — links, actions, focus */
  --bronze:     #8a6240;  /* structural accent — borders, rules */
  --sage:       #6b8c6e;  /* growth accent — secondary, stages */
  --amber:      #c9933a;  /* highlight — <mark>, attention */
  --cream:      #d4c9b0;  /* primary text */
  --loam:       #7a7060;  /* muted text */
  --slate:      #6b7d8c;  /* cool accent */
  --terracotta: #a05c4a;  /* warm-red accent — errors */
  --plum:       #7d5a6e;  /* berry/mauve accent — the purple member */

  /* ── Surfaces ── */
  /* Page and applets share the opaque soil background. */
  --pico-background-color: var(--soil);
  --pico-applet-background-color: var(--soil);
  --pico-card-background-color: var(--bark);
  --pico-card-sectioning-background-color: var(--moss);
  /* A semi-transparent bronze veil, not a fixed dark line, so the edge leans
     toward whatever's behind the card (identical over soil, but adapts on
     bark/other surfaces). Hover/active brings in the brighter copper edge. */
  --pico-card-border-color: color-mix(in srgb, var(--bronze) 32%, transparent);
  /* Soft warm hairline, kept readable on both soil and bark surfaces. */
  --pico-muted-border-color: color-mix(in srgb, var(--bronze) 45%, var(--soil));

  /* ── Text ── */
  --pico-color: var(--cream);
  --pico-muted-color: var(--loam);
  --pico-h1-color: var(--cream);
  --pico-h2-color: var(--cream);
  --pico-h3-color: var(--cream);

  /* ── Primary (copper) ── */
  --pico-primary: var(--copper);
  --pico-primary-hover: color-mix(in srgb, var(--copper) 78%, var(--cream)); /* lighter on hover */
  --pico-primary-focus: color-mix(in srgb, var(--copper) 38%, transparent);  /* focus ring */
  --pico-primary-underline: color-mix(in srgb, var(--copper) 50%, transparent);
  --pico-primary-background: var(--copper);

  /* ── Secondary (sage) ── */
  --pico-secondary: var(--sage);
  --pico-secondary-border: color-mix(in srgb, var(--sage) 30%, transparent);

  /* ── State / validation ── */
  /* Errors use terracotta — a muted brick-red, on-theme rather than alarmist. */
  --pico-form-element-invalid-border-color: var(--terracotta);
  --pico-form-element-invalid-active-border-color: var(--terracotta);
  --pico-form-element-invalid-focus-color: color-mix(in srgb, var(--terracotta) 38%, transparent);
  --pico-del-color: var(--terracotta);
  /* Valid state uses sage, mirroring the growth accent. */
  --pico-form-element-valid-border-color: var(--sage);
  --pico-form-element-valid-active-border-color: var(--sage);
  --pico-form-element-valid-focus-color: color-mix(in srgb, var(--sage) 38%, transparent);
  --pico-ins-color: var(--sage);

  /* ── Highlight ── */
  --pico-mark-background-color: var(--amber);
  --pico-mark-color: var(--soil);
}

/* Base titling: headings use the headings token site- and applet-wide. Loaded
   after Pico, so this wins over Pico's heading family. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--pico-font-family-headings);
}