/* ===========================================================================
   Zoic design system tokens
   Ported from Claude Design project 36b64d43 →
     _ds/zoic-design-system-000475f4-.../tokens/*.css
   Values are verbatim. The only change is tokens/fonts.css: the Google Fonts
   @import is replaced with self-hosted latin-subset woff2 (same families).
   =========================================================================== */

/* --- fonts ---------------------------------------------------------------- */
/* SUBSTITUTION NOTE (carried over from the design system): no Zoic font
   binaries were supplied with the brand guide. Outfit (geometric sans),
   Newsreader (warm serif) and IBM Plex Mono (data) are the nearest matches to
   the described pairing. Swap the src URLs when the real files arrive. */
@font-face{
  font-family:"Zoic Sans";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../fonts/outfit-var-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:"Zoic Serif";font-style:normal;font-weight:300 600;font-display:swap;
  src:url("../fonts/newsreader-var-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:"Zoic Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/plexmono-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:"Zoic Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/plexmono-500-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;
}

:root{
/* --- Base ramps -------------------------------------------------------- */
/* Slate — the ink. Cool, faintly green-grey: wet stone, not blue. */
--slate-950:#0E1416;--slate-900:#151F22;--slate-800:#1E2B2F;--slate-700:#2B3B41;
--slate-600:#3D5158;--slate-500:#596E76;--slate-400:#7D9199;--slate-300:#A6B6BC;
--slate-200:#C9D5D8;--slate-100:#E2E9EA;--slate-50:#F1F5F5;

/* Bone — warm paper neutrals. The default page. */
--bone-50:#FCFAF5;--bone-100:#F6F1E7;--bone-200:#EDE5D7;--bone-300:#DDD3BF;--bone-400:#C3B69D;

/* Moss — growth, confirmation, the "alive" green. */
--moss-900:#1C3024;--moss-700:#2E5037;--moss-600:#3C6947;--moss-500:#4E8459;
--moss-400:#6E9E76;--moss-300:#94B899;--moss-200:#BFD6C2;--moss-100:#DCE8DC;

/* Amber — accumulated warmth: resin, lamplight, caution. */
--amber-700:#8A5916;--amber-600:#AF731C;--amber-500:#D08B22;--amber-400:#E3A542;
--amber-300:#EEC078;--amber-200:#F4D9A5;--amber-100:#FAEDD3;

/* Pulse — the one bright modern accent. Software, not sediment. Use sparingly. */
--pulse-700:#617F0C;--pulse-600:#7FA80F;--pulse-500:#9BCB1A;--pulse-400:#B7E84A;
--pulse-300:#CDF275;--pulse-200:#E0F8A8;--pulse-100:#EFFBD4;

/* Clay — errors and destructive intent. Oxide red, never fire-engine. */
--clay-700:#7E2E1D;--clay-600:#9E3A24;--clay-500:#B4462F;--clay-300:#DFA394;--clay-100:#F7E2DC;

/* Tide — informational, links in prose. Muted mineral teal. */
--tide-700:#1D5257;--tide-600:#26686F;--tide-500:#2E8089;--tide-300:#8CBEC3;--tide-100:#DDEDEF;

/* --- Semantic aliases -------------------------------------------------- */
--text-strong:var(--slate-950);
--text-body:var(--slate-800);
--text-muted:var(--slate-500);
--text-subtle:var(--slate-400);
--text-inverse:var(--bone-50);
--text-accent:var(--moss-600);
--text-link:var(--tide-600);
--text-link-hover:var(--tide-700);

--surface-page:var(--bone-100);
--surface-card:#FFFFFF;
--surface-sunken:var(--bone-200);
--surface-raised:var(--bone-50);
--surface-inverse:var(--slate-900);
--surface-inverse-soft:var(--slate-800);
--surface-accent:var(--moss-100);
--surface-accent-strong:var(--moss-600);
--surface-highlight:var(--pulse-400);

--border-hairline:rgba(30,43,47,.10);
--border-subtle:var(--bone-300);
--border-default:var(--slate-200);
--border-strong:var(--slate-400);
--border-inverse:rgba(246,241,231,.16);
--border-focus:var(--moss-500);

--action-primary:var(--slate-900);
--action-primary-hover:var(--slate-800);
--action-primary-active:var(--slate-950);
--action-accent:var(--moss-600);
--action-accent-hover:var(--moss-700);
--action-ghost-hover:rgba(30,43,47,.06);

--status-success-fg:var(--moss-700);--status-success-bg:var(--moss-100);
--status-warning-fg:var(--amber-700);--status-warning-bg:var(--amber-100);
--status-danger-fg:var(--clay-600);--status-danger-bg:var(--clay-100);
--status-info-fg:var(--tide-700);--status-info-bg:var(--tide-100);
--status-live-fg:var(--pulse-700);--status-live-bg:var(--pulse-100);

--focus-ring:0 0 0 3px rgba(78,132,89,.32);
--focus-ring-inverse:0 0 0 3px rgba(183,232,74,.36);

/* --- typography -------------------------------------------------------- */
--font-sans:"Zoic Sans","Outfit",ui-sans-serif,system-ui,"Helvetica Neue",sans-serif;
--font-serif:"Zoic Serif","Newsreader",ui-serif,Georgia,serif;
--font-mono:"Zoic Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,monospace;

--font-display:var(--font-serif);   /* brand storytelling */
--font-ui:var(--font-sans);         /* product + interface */
--font-data:var(--font-mono);       /* numbers, keys, ids */

--weight-light:300;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;

/* Type scale — 1.25 major third, tuned by hand at the small end. */
--text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-base:15px;--text-md:17px;
--text-lg:20px;--text-xl:25px;--text-2xl:31px;--text-3xl:39px;--text-4xl:49px;
--text-5xl:61px;--text-6xl:76px;

--leading-tight:1.06;--leading-snug:1.18;--leading-normal:1.5;--leading-relaxed:1.65;

--tracking-tighter:-0.03em;--tracking-tight:-0.015em;--tracking-normal:0em;
--tracking-wide:0.04em;--tracking-widest:0.12em;

/* Roles */
--type-display:var(--weight-light) var(--text-5xl)/var(--leading-tight) var(--font-serif);
--type-headline:var(--weight-regular) var(--text-3xl)/var(--leading-snug) var(--font-serif);
--type-title:var(--weight-medium) var(--text-xl)/var(--leading-snug) var(--font-sans);
--type-subtitle:var(--weight-medium) var(--text-md)/var(--leading-normal) var(--font-sans);
--type-body:var(--weight-regular) var(--text-base)/var(--leading-relaxed) var(--font-sans);
--type-body-serif:var(--weight-regular) var(--text-md)/var(--leading-relaxed) var(--font-serif);
--type-label:var(--weight-medium) var(--text-sm)/1.3 var(--font-sans);
--type-caption:var(--weight-regular) var(--text-xs)/1.4 var(--font-sans);
--type-eyebrow:var(--weight-medium) var(--text-2xs)/1.2 var(--font-sans);
--type-mono:var(--weight-regular) var(--text-sm)/1.5 var(--font-mono);

/* --- spacing ----------------------------------------------------------- */
--space-0:0px;--space-1:2px;--space-2:4px;--space-3:6px;--space-4:8px;--space-5:12px;
--space-6:16px;--space-7:20px;--space-8:24px;--space-9:32px;--space-10:40px;
--space-11:56px;--space-12:72px;--space-13:96px;--space-14:128px;

--gutter-tight:var(--space-5);--gutter:var(--space-8);--gutter-loose:var(--space-10);
--pad-control:var(--space-3) var(--space-6);
--pad-card:var(--space-8);
--pad-section:var(--space-13) var(--space-9);

--width-prose:64ch;--width-content:1120px;--width-wide:1360px;
--sidebar-width:248px;--topbar-height:56px;

/* --- elevation --------------------------------------------------------- */
/* Radii — soft but squared enough to feel engineered. */
--radius-xs:3px;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--radius-xl:22px;
--radius-2xl:32px;--radius-pill:999px;--radius-circle:50%;

--border-width-hair:1px;
--border-width-thick:2px;

/* Shadows — warm-tinted, low, never blue-grey drop shadows. */
--shadow-none:none;
--shadow-hairline:0 0 0 1px var(--border-hairline);
--shadow-sm:0 1px 2px rgba(30,43,47,.06),0 1px 1px rgba(30,43,47,.04);
--shadow-md:0 2px 4px rgba(30,43,47,.05),0 6px 14px -6px rgba(30,43,47,.12);
--shadow-lg:0 4px 8px rgba(30,43,47,.05),0 18px 36px -14px rgba(30,43,47,.18);
--shadow-xl:0 8px 16px rgba(30,43,47,.06),0 36px 64px -24px rgba(30,43,47,.24);
--shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
--shadow-inset-sunken:inset 0 1px 2px rgba(30,43,47,.08);
--blur-veil:blur(14px);
--veil:rgba(14,20,22,.44);

/* --- motion ------------------------------------------------------------ */
/* Growth easing: quick to start, long settle. Nothing bounces. */
--ease-growth:cubic-bezier(.2,.7,.3,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-in-out:cubic-bezier(.65,0,.35,1);
--duration-instant:80ms;
--duration-fast:140ms;
--duration-base:220ms;
--duration-slow:360ms;
--duration-ambient:1200ms;
--press-scale:0.985;
--transition-control:background-color var(--duration-fast) var(--ease-growth),color var(--duration-fast) var(--ease-growth),border-color var(--duration-fast) var(--ease-growth),box-shadow var(--duration-fast) var(--ease-growth);
--transition-surface:transform var(--duration-base) var(--ease-growth),box-shadow var(--duration-base) var(--ease-growth);

/* --- patterns ---------------------------------------------------------- */
/* Brand motifs: growth rings, strata, topographic lines. */
--pattern-strata:repeating-linear-gradient(180deg,rgba(30,43,47,.055) 0px,rgba(30,43,47,.055) 1px,transparent 1px,transparent 9px);
--pattern-strata-inverse:repeating-linear-gradient(180deg,rgba(246,241,231,.10) 0px,rgba(246,241,231,.10) 1px,transparent 1px,transparent 9px);
--pattern-rings:repeating-radial-gradient(circle at 50% 50%,rgba(30,43,47,.07) 0px,rgba(30,43,47,.07) 1px,transparent 1px,transparent 14px);
--pattern-rings-accent:repeating-radial-gradient(circle at 50% 50%,rgba(78,132,89,.16) 0px,rgba(78,132,89,.16) 1px,transparent 1px,transparent 12px);
--pattern-topo:repeating-linear-gradient(115deg,rgba(30,43,47,.05) 0px,rgba(30,43,47,.05) 1px,transparent 1px,transparent 11px);
--pattern-grid:linear-gradient(rgba(30,43,47,.05) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(30,43,47,.05) 1px,transparent 1px) 0 0/24px 24px;
--veil-bottom:linear-gradient(180deg,rgba(21,31,34,0) 0%,rgba(21,31,34,.72) 100%);
--veil-top:linear-gradient(180deg,rgba(21,31,34,.66) 0%,rgba(21,31,34,0) 100%);
}

@media (prefers-reduced-motion:reduce){:root{
--duration-instant:0ms;--duration-fast:0ms;--duration-base:0ms;
--duration-slow:0ms;--duration-ambient:0ms;--press-scale:1;
}}

/* --- base global affordances shipped with the system --------------------- */
@keyframes zoic-spin{to{transform:rotate(360deg)}}
@keyframes zoic-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes zoic-ring{0%{opacity:.55;transform:scale(.9)}70%{opacity:0;transform:scale(1.6)}100%{opacity:0;transform:scale(1.6)}}
a{color:var(--text-link);text-decoration-color:color-mix(in oklab,var(--text-link) 40%,transparent);text-underline-offset:2px;transition:color var(--duration-fast) var(--ease-growth)}
a:hover{color:var(--text-link-hover);text-decoration-color:currentColor}
::selection{background:var(--pulse-200);color:var(--slate-950)}

.zoic-strata{background-image:var(--pattern-strata)}
.zoic-rings{background-image:var(--pattern-rings)}
.zoic-topo{background-image:var(--pattern-topo)}