/* Bankrupt & Co. design tokens.
   GENERATED from design/system/tokens/*.css — do not hand-edit.
   Regenerate by re-concatenating fonts, colors, typography, spacing,
   effects and motion, rewriting the @font-face paths to ../fonts/. */


/* ===== fonts ===== */

/* Bankrupt & Co. webfonts — self-hosted, SIL Open Font License 1.1.
   Licenses: assets/fonts/OFL-*.txt. Only the weights the system uses are shipped.
   Paths are relative to this file (tokens/), i.e. ../fonts/. */
@font-face{font-family:"Chakra Petch";src:url("../fonts/ChakraPetch-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("../fonts/ChakraPetch-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("../fonts/ChakraPetch-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("../fonts/ChakraPetch-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/IBMPlexSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/IBMPlexSans-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/IBMPlexSans-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}

/* ===== colors ===== */

:root{
/* ---- Ash: warm neutral grays, the hull plating ---- */
--ash-000:#EDEAE4;--ash-050:#E3DFD8;--ash-100:#D6D2C9;--ash-200:#C4C1B7;
--ash-300:#ADACA2;--ash-400:#93938A;--ash-500:#777771;--ash-600:#5B5C58;
--ash-700:#434440;--ash-800:#2E2F2C;--ash-900:#1D1E1C;

/* ---- Steel: desaturated cold blues, light end of the spectrum ---- */
--steel-050:#E4E9ED;--steel-100:#D2DAE1;--steel-200:#B8C3CC;--steel-300:#9AA9B6;
--steel-400:#7D8E9D;--steel-500:#647584;--steel-600:#4E5C69;--steel-700:#3B4650;

/* ---- Soot: warm exhaust residue, used for grime and shadow ---- */
--soot-200:#B3A895;--soot-300:#8B8071;--soot-500:#5A5045;--soot-700:#38312A;--soot-900:#221E19;

/* ---- Signal: oxidised, never vivid ---- */
--rust-400:#B87A4F;--rust-500:#9E5B33;--rust-600:#7C4526;
--amber-400:#C7A54A;--amber-500:#A98A2C;
--moss-400:#7E8C69;--moss-500:#61704D;
--alarm-400:#A9564B;--alarm-500:#8A3A30;

/* ---- Semantic surfaces ---- */
--surface-page:#DEDAD2;
--surface-panel:#E7E3DC;
--surface-card:#E9E6DF;
--surface-sunken:#D2CDC4;
--surface-inverse:#2A2C29;
--surface-plate:#C3CBD2; /* "Steel plate" per repo/README.md's color table and the real prototype — corrected 2026-08-30 from #DCE1E3, which matched neither */
--surface-overlay:rgba(29,30,28,.62);

/* ---- Semantic text ---- */
--text-body:#33352F;
--text-strong:#1D1E1C;
--text-muted:#6C6D65;
--text-faint:#8E8F86;
/* Distinct steel-tinted label color used only on the About sidebar's two
   steel-plate cards ("Still reading?"/"Want more to read?") — the real
   prototype uses this exact value there, not the generic --text-muted used
   for stencil eyebrows everywhere else. */
--text-steel-label:#5A6570;
--text-inverse:#E7E3DC;
--text-link:#4E5C69;
--text-link-hover:#9E5B33;
--text-danger:#8A3A30;

/* ---- Semantic lines ---- */
/* Real prototype uses two distinct hairline weights (repo/README.md:
   "Internal division #C9C5BB, outer edges #B6B2A8/#8E8A80") — this token was
   wrongly holding the outer/strong value, corrected 2026-08-30. */
--line-hairline:#C9C5BB;
--line-strong:#8E8A80;
--line-inverse:rgba(231,227,220,.22);
--line-focus:#5A6B79;

/* ---- Semantic actions ---- */
--action-primary-bg:#2E2F2C;
--action-primary-bg-hover:#1D1E1C;
--action-primary-fg:#EDEAE4;
--action-secondary-bg:transparent;
--action-secondary-fg:#33352F;
--action-accent-bg:#9E5B33;
--action-accent-bg-hover:#7E4526;
--action-accent-fg:#F2EFE9;
--action-disabled-bg:#C4C1B7;
--action-disabled-fg:#93938A;

/* ---- Status ---- */
--status-ok:#61704D;--status-warn:#A98A2C;--status-bad:#8A3A30;--status-info:#4E5C69;
}

/* ===== typography ===== */

:root{
--font-display:"Chakra Petch","Arial Narrow",sans-serif;
--font-body:"IBM Plex Sans","Helvetica Neue",sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace;

--fs-100:11px;--fs-200:12px;--fs-300:13px;--fs-400:15px;--fs-500:17px;
--fs-600:21px;--fs-700:27px;--fs-800:36px;--fs-900:52px;--fs-1000:76px;

--lh-tight:1.04; /* @kind other */
--lh-snug:1.2; /* @kind other */
--lh-normal:1.5; /* @kind other */
--lh-loose:1.65; /* @kind other */

--fw-regular:400; /* @kind other */
--fw-medium:500; /* @kind other */
--fw-semibold:600; /* @kind other */
--fw-bold:700; /* @kind other */

--ls-display:-0.015em; /* @kind other */
--ls-normal:0; /* @kind other */
--ls-wide:.06em; /* @kind other */
--ls-wider:.14em; /* @kind other */
--ls-widest:.22em; /* @kind other */

/* semantic type roles */
--type-display:var(--fw-bold) var(--fs-1000)/var(--lh-tight) var(--font-display); /* @kind font */
--type-h1:var(--fw-bold) var(--fs-800)/var(--lh-snug) var(--font-display); /* @kind font */
--type-h2:var(--fw-semibold) var(--fs-600)/var(--lh-snug) var(--font-display); /* @kind font */
--type-h3:var(--fw-semibold) var(--fs-500)/var(--lh-snug) var(--font-display); /* @kind font */
--type-body:var(--fw-regular) var(--fs-400)/var(--lh-normal) var(--font-body); /* @kind font */
--type-body-sm:var(--fw-regular) var(--fs-300)/var(--lh-normal) var(--font-body); /* @kind font */
--type-label:var(--fw-medium) var(--fs-200)/var(--lh-snug) var(--font-mono); /* @kind font */
--type-stencil:var(--fw-semibold) var(--fs-200)/var(--lh-snug) var(--font-mono); /* @kind font */
--type-code:var(--fw-regular) var(--fs-300)/var(--lh-normal) var(--font-mono); /* @kind font */
}

/* ===== spacing ===== */

:root{
--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-page:24px;--gutter-page-lg:56px;
--measure-prose:66ch;--measure-narrow:44ch;
--container-max:1320px;

--radius-0:0px;--radius-1:1px;--radius-2:2px;--radius-3:4px;--radius-pill:999px;
--chamfer:10px; /* clip-path corner cut used on plates and primary buttons */

--control-h-sm:28px;--control-h-md:36px;--control-h-lg:46px;
--border-hair:1px;--border-plate:2px;
}

/* ===== effects ===== */

:root{
/* Shadows are dust-shadows: low, warm, never soft-blue */
--shadow-none:none;
--shadow-plate:0 1px 0 rgba(255,255,255,.5) inset,0 -14px 18px -18px rgba(34,30,25,.35) inset,0 1px 2px rgba(34,30,25,.2);
--shadow-raised:0 2px 0 rgba(34,30,25,.10),0 6px 14px -8px rgba(34,30,25,.4);
--shadow-overlay:0 24px 60px -20px rgba(34,30,25,.55);
--shadow-inset-well:inset 0 2px 4px rgba(34,30,25,.16);
--ring-focus:0 0 0 2px var(--surface-page),0 0 0 4px var(--line-focus);

--grime-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"); /* @kind other */
--grime-blotch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .009' numOctaves='5' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='3.4' amplitude='1.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23b)' opacity='.5'/%3E%3C/svg%3E"); /* @kind other */
--grime-streak:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.055 .004' numOctaves='3' seed='41' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' exponent='4.5' amplitude='1.3'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='1200' height='1200' filter='url(%23s)' opacity='.34'/%3E%3C/svg%3E"); /* @kind other */
/* Grime: soot patina layers. Compose over any surface with background-image. */
--grime-soot:radial-gradient(83% 61% at 7% -14%,rgba(34,30,25,.16),transparent 63%),radial-gradient(47% 88% at 113% 71%,rgba(34,30,25,.17),transparent 57%),radial-gradient(38% 26% at 61% 4%,rgba(90,80,69,.15),transparent 74%),radial-gradient(29% 44% at 34% 119%,rgba(34,30,25,.13),transparent 66%),radial-gradient(64% 19% at 88% 33%,rgba(90,80,69,.09),transparent 71%); /* @kind other */
--grime-scanlines:repeating-linear-gradient(0deg,rgba(34,30,25,.06) 0 1px,transparent 1px 3px); /* @kind other */
--grime-speckle:radial-gradient(rgba(34,30,25,.13) .7px,transparent .8px) 0 0/6px 6px,radial-gradient(rgba(34,30,25,.09) .6px,transparent .7px) 3px 4px/9px 9px,radial-gradient(rgba(90,80,69,.10) 1px,transparent 1.2px) 5px 2px/17px 17px; /* @kind other */
--grime-hatch:repeating-linear-gradient(135deg,rgba(34,30,25,.05) 0 1px,transparent 1px 6px); /* @kind other — corrected 2026-08-30 to match the real prototype's literal value (was .10 alpha / 1px 5px) */
--grime-vignette:radial-gradient(120% 95% at 50% 38%,transparent 38%,rgba(34,30,25,.34)); /* @kind other */
--grime-panel-seam:linear-gradient(90deg,transparent 0 calc(50% - .5px),var(--line-hairline) calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)); /* @kind other */

--blur-overlay:blur(3px) saturate(.7); /* @kind other */
--filter-photo:grayscale(.55) contrast(1.06) sepia(.14) brightness(.96); /* @kind other */
--opacity-disabled:.45; /* @kind other */
--opacity-hover-veil:.08; /* @kind other */
}

/* ===== motion ===== */

:root{
--dur-instant:60ms; /* @kind other */
--dur-fast:120ms; /* @kind other */
--dur-base:180ms; /* @kind other */
--dur-slow:320ms; /* @kind other */
--dur-crawl:640ms; /* @kind other */
/* --ease-mech: servo settle, the default. --ease-stiff: relay snap. --ease-linear: meters + marquees. */
--ease-mech:cubic-bezier(.2,.8,.2,1); /* @kind other */
--ease-linear:linear; /* @kind other */
--ease-stiff:cubic-bezier(.9,0,.1,1); /* @kind other */
--ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
--transition-control:background-color var(--dur-fast) var(--ease-mech),color var(--dur-fast) var(--ease-mech),border-color var(--dur-fast) var(--ease-mech),box-shadow var(--dur-fast) var(--ease-mech); /* @kind other */
}
@media (prefers-reduced-motion:reduce){:root{--dur-instant:0ms; /* @kind other */
--dur-fast:0ms; /* @kind other */
--dur-base:0ms; /* @kind other */
--dur-slow:0ms; /* @kind other */
--dur-crawl:0ms; /* @kind other */
}}