/* ==========================================================================
   Nectenda — design tokens
   Source of truth: Claude Design project "Nectenda Design System"
   (ee95fac1-5ec9-420e-b5dc-badd85f6e869), files tokens/colors.css,
   tokens/typography.css and tokens/spacing.css, concatenated here.

   GENERATED. Do not hand-edit a value in this file. Change it upstream and
   re-pull, or this copy quietly becomes the real design system and the one
   in Claude Design becomes decoration.

   Two deliberate deviations from upstream:

   1. The upstream typography.css pulls four families from the Google Fonts
      CDN via @import. That is removed and the faces are self-hosted below.
      Here that is not a preference, it is forced twice over:

        - This site's Content-Security-Policy is `style-src 'self'` and
          `font-src 'self'` (see static/_headers). A third-party stylesheet
          and font files are both blocked outright — the @import would fail
          silently and the site would render in fallback faces.
        - Nectenda's whole claim is that using it does not leak you to
          anybody. A webfont request to Google from this site would put the
          visitor's IP in a third party's logs on the page that makes that
          claim.

   2. Only the latin and latin-ext subsets are bundled, and only the weights
      actually used. EB Garamond ships latin only — it renders Latin
      citations and nothing else. Cyrillic, Greek and Vietnamese are omitted.

   All four families are licensed under the SIL Open Font License 1.1, which
   requires the copyright notice and licence to accompany every copy of the
   font software. That is fonts/OFL.txt, and it must travel with these files.
   ========================================================================== */

/* --- self-hosted faces ----------------------------------------------------
   latin-ext files are fetched only when a character in that range appears,
   so English pages pay for the latin subset alone. */

@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/literata-normal-300-600-latin.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;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/literata-normal-300-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/karla-normal-400-700-latin.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;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/karla-normal-400-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/karla-italic-400-latin.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;
}
@font-face {
  font-family: 'Karla';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/karla-italic-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-mono-normal-400-latin.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;
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-mono-normal-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Latin citations only, never UI, never below 20px. latin subset alone. */
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/eb-garamond-italic-400-latin.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;
}

/* --- tokens/colors.css — the Gilding palette -------------------------------
   Primitives generated in OKLCH on one shared lightness ladder; hues withy
   85.5°, vine 161.9°, neutral 163.0°. Brand aliases are approved values, not
   ramp steps. Every semantic role is verified >= 4.5:1 against its own
   surface in both themes.

   WARNING IS ACHROMATIC, ON PURPOSE. A gold brand leaves no room in the warm
   sector for a chromatic caution — it measured 14.9° from --presence-5 in
   dark, so a named collaborator read as a warning. Caution earns salience
   from form instead. The consequence is a caution found by reading rather
   than glancing, so it must never be the only signal that something needs
   attention. */

:root {
  /* withy — gold, the brand */
  --withy-50:#FFF5DF;  --withy-100:#FEE9BE; --withy-200:#F2D69A; --withy-300:#E2BF72;
  --withy-400:#CFA648; --withy-500:#BA8F1B; --withy-600:#A07A0E; --withy-700:#886605;
  --withy-800:#705400; --withy-900:#594201; --withy-950:#2B1E00;

  /* vine — green, health and sync. NOT a second brand colour. */
  --vine-50:#E2FEEE;  --vine-100:#CDF7E0; --vine-200:#AFE9CB; --vine-300:#8DD6B2;
  --vine-400:#69C198; --vine-500:#49AB80; --vine-600:#2F956B; --vine-700:#1F7E59;
  --vine-800:#1A6849; --vine-900:#195139; --vine-950:#012818;

  /* neutral — green-tinted; never a pure grey */
  --neutral-50:#F2F7F4;  --neutral-100:#E6EDE9; --neutral-200:#D3DBD7; --neutral-300:#BDC6C1;
  --neutral-400:#A5AFAA; --neutral-500:#8E9993; --neutral-600:#78837E; --neutral-700:#656E69;
  --neutral-800:#535B56; --neutral-900:#414744; --neutral-950:#1D221F;

  /* brand aliases */
  --withy:#B08A2E;       /* the tie. Brand primary. */
  --withy-lift:#D9B65A;  /* dark-theme brand primary */
  --withy-ink:#7F6118;   /* brand as TYPE on light; the fill value fails AA as text */
  --vine:#2E6A4F;        /* healthy, synced, joined */
  --vine-lift:#6FB48E;
  --ink:#14201B;         /* green-black. Never #000. */
  --vellum:#EEF0EA;      /* paper in shade. Never cream. */

  /* presence — one colour per collaborator. Gold is LAST: a screen with one
     collaborator must not paint that person brand-gold. */
  --presence-1:#1A6580; --presence-2:#4A55A0; --presence-3:#6E4390;
  --presence-4:#A33862; --presence-5:#A34A24; --presence-6:#7F6118;
  --text-on-presence:#FFFFFF;

  --success-surface:#E3FAED; --success-border:#9EE3C0; --success-fg:#1A6849; --success-solid:#1A6849;
  --warning-surface:#DFE8E1; --warning-border:#96A29C; --warning-fg:#414744; --warning-solid:#535B56;
  --danger-surface:#FFEFED;  --danger-border:#FEBFB4;  --danger-fg:#903226;  --danger-solid:#993A2D;
  --info-surface:#EBF5FF;    --info-border:#B0D5FF;    --info-fg:#09579B;    --info-solid:#165EA3;
}

/* Light theme. Explicit scope, so a light surface stays light inside a dark
   ancestor — never rely on bare :root for a theme-dependent role. */
:root, [data-theme="light"] {
  --bg-page:#EEF0EA; --bg-surface:#F7F8F4; --bg-raised:#FFFFFF; --bg-subtle:#E6EDE9;
  --bg-brand-subtle:#F0E8D4; --bg-vine-subtle:#E0E8E2;
  --border-subtle:#E3E6DF; --border-default:#D6DAD1; --border-strong:#BDC6C1;
  --text-primary:#14201B;   /* 14.60:1 on page */
  --text-secondary:#55625B; /*  5.57:1 */
  --text-brand:#7F6118;     /*  5.04:1 */
  --text-vine:#2E6A4F;      /*  5.56:1 */
  --action-primary:#B08A2E; --action-primary-hover:#B99235;
  --text-on-action:#14201B; --focus-ring:#B08A2E;
}

[data-theme="dark"] {
  --bg-page:#0E1714; --bg-surface:#152220; --bg-raised:#1C2B27; --bg-subtle:#1F2E29;
  --bg-brand-subtle:#2B2718; --bg-vine-subtle:#1B2E26;
  --border-subtle:#1F2E29; --border-default:#2A3B35; --border-strong:#3A4B44;
  --text-primary:#E4E9E2;   /* 14.81:1 on page */
  --text-secondary:#93A199; /*  6.77:1 */
  --text-brand:#D9B65A;     /*  9.37:1 */
  --text-vine:#6FB48E;      /*  7.47:1 */
  --action-primary:#D9B65A; --action-primary-hover:#E9C26B;
  --text-on-action:#14201B; --focus-ring:#D9B65A;

  --presence-1:#63B2CC; --presence-2:#8E96E0; --presence-3:#B58FD6;
  --presence-4:#E28AA9; --presence-5:#E28A5E; --presence-6:#D9B65A;
  --text-on-presence:#14201B;

  --success-surface:#163527; --success-border:#22533D; --success-fg:#69C198; --success-solid:#69C198;
  --warning-surface:#2E4038; --warning-border:#506358; --warning-fg:#BDC6C1; --warning-solid:#A5AFAA;
  --danger-surface:#44241E;  --danger-border:#683830;  --danger-fg:#EF9383;  --danger-solid:#EF9383;
  --info-surface:#1A2F46;    --info-border:#2A4A6C;    --info-fg:#78B4F6;    --info-solid:#78B4F6;
}

/* --- tokens/typography.css ------------------------------------------------
   Upstream's Google Fonts @import is removed; the faces are self-hosted above. */
:root {
  --font-display:'Literata', Georgia, 'Times New Roman', serif;
  --font-sans:'Karla', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-latin:'EB Garamond', Georgia, serif;  /* Latin citations ONLY. Never UI, never below 20px. */

  --text-display-xl:3.375rem; --text-display-lg:2.375rem; --text-display-md:1.75rem;
  --text-title-lg:1.3125rem;  --text-title-md:1.1875rem;
  --text-body-lg:1.0625rem;   /* the default reading size */
  --text-body-md:0.9375rem;   --text-body-sm:0.875rem;
  --text-caption:0.8125rem;   --text-label:0.6875rem; --text-mono:0.8125rem;

  --lh-display:1.12; --lh-title:1.28; --lh-body:1.62; --lh-caption:1.45;
  --tracking-display:-0.018em; --tracking-title:-0.010em; --tracking-label:0.13em;
  --measure-body:65ch; --measure-latin:45ch;
}

/* --- tokens/spacing.css --------------------------------------------------- */
:root {
  --space-1:4px;  --space-2:8px;   --space-3:12px;  --space-4:16px;  --space-5:20px;
  --space-6:24px; --space-8:32px;  --space-10:40px; --space-12:48px; --space-16:64px;
  --space-20:80px; --space-24:96px; --space-32:128px;

  /* Small radii only. The mark is built from flat, butt-cut strokes; pill
     shapes and large rounding argue with it. */
  --radius-sm:2px; --radius-md:4px; --radius-lg:6px; --radius-full:999px;

  /* The cut — the system's form signature. A 45° chamfer on the bottom-right
     of primary surfaces, echoing the mark's cut terminals. Apply with .nx-cut,
     never by hand. Roughly one per screen: used everywhere it stops being a
     signature and becomes a texture. */
  --cut:10px; --cut-sm:6px; --cut-caution:10px;

  --border-width:1px; --container-max:1120px;

  /* Motion resolves TOWARD a single line. Nothing bounces, nothing spins. */
  --ease-standard:cubic-bezier(.22,.7,.3,1);
  --duration-fast:160ms; --duration-base:240ms; --duration-slow:320ms;

  /* Borders define surfaces. Shadow is only for things that float. */
  --shadow-sm:0 1px 2px rgba(20,32,27,.06);
  --shadow-md:0 4px 14px rgba(20,32,27,.10);
  --shadow-lg:0 14px 36px rgba(20,32,27,.16);
  --shadow-focus:0 0 0 3px rgba(176,138,46,.38);

  --icon-stroke:1.5px; --icon-grid:24px;
}