/* prunery design tokens. brand is locked, see the vault Brand Palette.
   light + dark both required, warm grounds, never pure white/black. */

@font-face{
  font-family:'Figtree';font-weight:400;font-style:normal;font-display:swap;
  src:url('/fonts/Figtree-400.woff2') format('woff2');
}
@font-face{
  font-family:'Figtree';font-weight:600;font-style:normal;font-display:swap;
  src:url('/fonts/Figtree-600.woff2') format('woff2');
}
@font-face{
  font-family:'Figtree';font-weight:700;font-style:normal;font-display:swap;
  src:url('/fonts/Figtree-700.woff2') format('woff2');
}

:root{
  --fig:'Figtree',system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* brand (light) */
  --green:#348538;      /* brand + primary */
  --teal:#0b6278;       /* interactive: links, focus, secondary, info */
  --amber:#f5b800;      /* the one accent pop */
  --brown:#623a15;      /* text / structure */

  /* page (light: cream ground) */
  --bg:#f5f1ea;
  --ink:#231a10;
  --mute:#6b5d4a;
  --hair:#e4dccd;

  /* semantic aliases */
  --primary:var(--green);
  --interactive:var(--teal);
  --accent:var(--amber);
}

/* dark: warm near-black ground, lifted brand hues */
@media (prefers-color-scheme:dark){
  :root{
    --green:#76c26c;
    --teal:#419cb3;
    --brown:#c6a589;
    --bg:#120d07;
    --ink:#ece2d4;
    --mute:#9a8c78;
    --hair:#2a2016;
  }
}

/* explicit theme toggle wins over the OS preference, both directions */
:root[data-theme=light]{
  --green:#348538;--teal:#0b6278;--brown:#623a15;
  --bg:#f5f1ea;--ink:#231a10;--mute:#6b5d4a;--hair:#e4dccd;
}
:root[data-theme=dark]{
  --green:#76c26c;--teal:#419cb3;--brown:#c6a589;
  --bg:#120d07;--ink:#ece2d4;--mute:#9a8c78;--hair:#2a2016;
}

/* derived: built from the brand above, never new hues. see ARCHITECTURE.md */

/* surfaces are the one derived thing that cannot be theme-agnostic: a card lifts toward
   white on the cream ground and toward the ink on the near-black one. */
:root{
  --surface:color-mix(in srgb, white 62%, var(--bg));
  --surface-2:color-mix(in srgb, white 92%, var(--bg));
  --sunk:color-mix(in srgb, var(--ink) 7%, var(--bg));
  --lift:0 1px 2px rgb(35 26 16 / .04), 0 2px 10px -6px rgb(35 26 16 / .12);
  --lift-2:0 2px 4px rgb(35 26 16 / .05), 0 10px 22px -10px rgb(35 26 16 / .26);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --surface:color-mix(in srgb, var(--ink) 7%, var(--bg));
    --surface-2:color-mix(in srgb, var(--ink) 13%, var(--bg));
    --sunk:color-mix(in srgb, black 55%, var(--bg));
    --lift:0 1px 2px rgb(0 0 0 / .4), 0 2px 12px -6px rgb(0 0 0 / .6);
    --lift-2:0 2px 4px rgb(0 0 0 / .5), 0 12px 26px -10px rgb(0 0 0 / .78);
  }
}
:root[data-theme=dark]{
  --surface:color-mix(in srgb, var(--ink) 7%, var(--bg));
  --surface-2:color-mix(in srgb, var(--ink) 13%, var(--bg));
  --sunk:color-mix(in srgb, black 55%, var(--bg));
  --lift:0 1px 2px rgb(0 0 0 / .4), 0 2px 12px -6px rgb(0 0 0 / .6);
  --lift-2:0 2px 4px rgb(0 0 0 / .5), 0 12px 26px -10px rgb(0 0 0 / .78);
}

:root{

  /* states */
  --ok:var(--green);
  --warn:var(--amber);
  --bad:#a8341f;
  --info:var(--teal);

  /* washes */
  --ok-wash:color-mix(in srgb, var(--ok) 14%, transparent);
  --warn-wash:color-mix(in srgb, var(--warn) 18%, transparent);
  --bad-wash:color-mix(in srgb, var(--bad) 14%, transparent);
  --info-wash:color-mix(in srgb, var(--info) 12%, transparent);

  /* track accents: brand hues plus mixes of them. no new pigment. */
  --t-1:var(--green);
  --t-2:var(--teal);
  --t-3:var(--amber);
  --t-4:var(--brown);
  --t-5:color-mix(in srgb, var(--green) 55%, var(--amber));
  --t-6:color-mix(in srgb, var(--amber) 62%, var(--brown));
  --t-7:color-mix(in srgb, var(--teal) 62%, var(--green));
  --t-8:color-mix(in srgb, var(--brown) 62%, var(--green));
  --t-9:color-mix(in srgb, var(--teal) 45%, var(--amber));
  --t-10:color-mix(in srgb, var(--green) 40%, var(--brown));
  --t-11:color-mix(in srgb, var(--teal) 78%, var(--amber));
  --t-12:color-mix(in srgb, var(--amber) 40%, var(--green));
  --t-13:color-mix(in srgb, var(--teal) 30%, var(--brown));

  /* shape */
  --gap-section:14px;
  --r:10px;
  --r-lg:16px;
  --r-pill:999px;
  --shadow:0 1px 2px rgb(0 0 0 / .05), 0 8px 24px -12px rgb(0 0 0 / .18);
  --focus:0 0 0 3px color-mix(in srgb, var(--interactive) 40%, transparent);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){ --bad:#e0705a; }
}
:root[data-theme=dark]{ --bad:#e0705a; }
:root[data-theme=light]{ --bad:#a8341f; }

*:focus-visible{ outline:none; box-shadow:var(--focus); border-radius:inherit; }