/* ==========================================================================
tokens.css · "Cut & Keep" design tokens · v1.0 (2026-10-29)
The single source of truth for every colour, type, space, radius, shadow
and motion value. Templates and base.css use ONLY these custom properties.
The product name is not hard-coded anywhere.
Load order in base.html:
Themes:
· Default follows the OS (prefers-color-scheme).
· forces light; forces dark.
Breakpoints (custom properties cannot be used inside @media):
sm 37.5em = 600px · md 56.25em = 900px · lg 75em = 1200px
========================================================================== */
/* --------------------------------------------------------------------------
1. Fonts: self-hosted, no CDN (files live in /static/fonts)
-------------------------------------------------------------------------- */
@font-face {
font-family: "Archivo";
src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
font-weight: 100 900;
font-stretch: 62% 125%;
font-style: normal;
font-display: swap;
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: "Archivo";
src: url("../fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2-variations");
font-weight: 100 900;
font-stretch: 62% 125%;
font-style: normal;
font-display: swap;
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: "IBM Plex Mono";
src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
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: "IBM Plex Mono";
src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
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: "IBM Plex Mono";
src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
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: "IBM Plex Mono";
src: url("../fonts/ibm-plex-mono-latin-ext-400-normal.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
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: "IBM Plex Mono";
src: url("../fonts/ibm-plex-mono-latin-ext-500-normal.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
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: "IBM Plex Mono";
src: url("../fonts/ibm-plex-mono-latin-ext-600-normal.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
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;
}
:root {
color-scheme: light;
/* ------------------------------------------------------------------------
2. Palette primitives. Templates never use these directly; use the
role tokens in section 3, which switch with the theme.
------------------------------------------------------------------------ */
/* Paper (light neutrals) */
--paper-0: #FFFDF8; /* Sheet: raised surfaces */
--paper-1: #F5F1E8; /* Newsprint: page background */
--paper-2: #ECE6D9; /* Pulp: sunken fills, placeholders */
--paper-3: #DDD5C5; /* Fold: decorative rules */
/* Ink (dark neutrals) */
--ink-900: #1A1915; /* Ink: text, primary, keylines */
--ink-800: #33302A; /* Ink, hover */
--ink-700: #2B2924; /* raised surface on ink (inverse) */
--ink-600: #4A463E; /* Graphite: secondary */
--ink-500: #6B655A; /* Pencil: tertiary text */
--ink-400: #8A8475; /* Faint: control borders, disabled */
/* Carbon & chalk (dark-theme neutrals) */
--carbon-900: #161512; /* Carbon: dark page background */
--carbon-800: #1F1D19; /* Slate: dark raised surface */
--carbon-700: #2A2823; /* dark sunken / hover */
--carbon-600: #3B3832; /* dark rule; dark tray & toast surface */
--carbon-500: #59554C; /* dark keyline; dark tray & toast edge */
--chalk-100: #EEEAE0; /* Chalk: dark-theme text */
--chalk-0: #FFFDF8; /* dark primary hover */
--chalk-300: #BEB7A9; /* dark secondary */
--chalk-500: #9A9387; /* dark tertiary */
--chalk-600: #7D776C; /* dark control borders, disabled */
/* Marker (accent) */
--marker-400: #EEE84F; /* Highlighter */
--marker-500: #E2DB3B; /* Highlighter, hover */
--marker-100: #F9F6CC; /* Highlighter wash (light theme) */
--marker-900: #3A3816; /* Highlighter wash (dark theme) */
/* Semantic primitives */
--green-700: #1F6B3A; --green-100: #E1EFE2; --green-300: #7BCB8F; --green-950: #16271B;
--amber-700: #8A5300; --amber-100: #FAEED0; --amber-300: #E8B24A; --amber-950: #2C2213;
--red-700: #B3261E; --red-100: #FAE3DF; --red-300: #FF8B80; --red-950: #321714;
--blue-700: #2A4D8F; --blue-100: #E3EBF7; --blue-300: #93B3EE; --blue-950: #172238;
/* ------------------------------------------------------------------------
3. Colour roles (light theme). Use these in base.css and templates.
------------------------------------------------------------------------ */
--color-bg: var(--paper-1);
--color-surface: var(--paper-0);
--color-surface-sunken: var(--paper-2);
--color-rule: var(--paper-3);
--color-border: var(--ink-400);
--color-keyline: var(--ink-900);
--color-text: var(--ink-900);
--color-text-muted: var(--ink-600);
--color-text-subtle: var(--ink-500);
--color-text-disabled: var(--ink-400);
--color-primary: var(--ink-900);
--color-primary-hover: var(--ink-800);
--color-on-primary: var(--paper-0);
--color-secondary: var(--ink-600);
--color-accent: var(--marker-400);
--color-accent-hover: var(--marker-500);
--color-accent-wash: var(--marker-100);
--color-on-accent: var(--ink-900);
--color-inverse-bg: var(--ink-900);
--color-inverse-surface: var(--ink-700);
--color-inverse-edge: var(--ink-900);
--color-inverse-text: var(--paper-0);
--color-inverse-muted: var(--chalk-300);
--color-focus: var(--ink-900);
--color-focus-inverse: var(--marker-400);
--color-success: var(--green-700);
--color-success-bg: var(--green-100);
--color-success-on-inverse: var(--green-300);
--color-warning: var(--amber-700);
--color-warning-bg: var(--amber-100);
--color-warning-on-inverse: var(--amber-300);
--color-error: var(--red-700);
--color-error-bg: var(--red-100);
--color-error-on-inverse: var(--red-300);
--color-info: var(--blue-700);
--color-info-bg: var(--blue-100);
--color-info-on-inverse: var(--blue-300);
--color-backdrop: rgb(26 25 21 / 0.55);
--color-shimmer: rgb(255 253 248 / 0.65);
--color-media-placeholder: var(--paper-2);
/* ------------------------------------------------------------------------
4. Typography
------------------------------------------------------------------------ */
--font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
/* Size scale (root 16px). Fluid only where marked. */
--text-xs: 0.75rem; /* 12px */
--text-sm: 0.875rem; /* 14px */
--text-caption: 0.9375rem; /* 15px: raw caption mono */
--text-base: 1rem; /* 16px */
--text-md: 1.125rem; /* 18px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.5rem; /* 24px */
--text-2xl: 2rem; /* 32px */
--text-3xl: clamp(2.5rem, 1.9rem + 2.6vw, 4rem); /* 40 → 64px, fluid */
--text-4xl: clamp(3rem, 2rem + 4.4vw, 5.5rem); /* 48 → 88px, fluid */
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-black: 800;
/* Archivo width axis (font-stretch) */
--stretch-condensed: 75%;
--stretch-semi: 87.5%;
--stretch-normal: 100%;
--leading-display: 0.95;
--leading-heading: 1.1;
--leading-ui: 1.25;
--leading-body: 1.5;
--leading-mono: 1.6;
--tracking-display: -0.01em;
--tracking-normal: 0;
--tracking-caps: 0.04em;
--tracking-mono-caps: 0.08em;
--card-title-size: var(--text-base);
--list-item-size: var(--text-lg);
--measure: 66ch;
--measure-mono: 62ch;
--caption-lines: 12; /* collapsed raw caption height, in lines */
/* ------------------------------------------------------------------------
5. Space (4px base) & layout
------------------------------------------------------------------------ */
--space-0: 0;
--space-0-5: 0.125rem; /* 2px */
--space-1: 0.25rem; /* 4px */
--space-1-5: 0.375rem; /* 6px: progress bar height */
--space-2: 0.5rem; /* 8px */
--space-3: 0.75rem; /* 12px */
--space-4: 1rem; /* 16px */
--space-5: 1.25rem; /* 20px */
--space-6: 1.5rem; /* 24px */
--space-8: 2rem; /* 32px */
--space-10: 2.5rem; /* 40px */
--space-12: 3rem; /* 48px */
--space-16: 4rem; /* 64px */
--space-20: 5rem; /* 80px */
--space-24: 6rem; /* 96px */
--page-pad: var(--space-4);
--grid-cols: 2;
--grid-gap-x: var(--space-3);
--grid-gap-y: var(--space-6);
--width-content: 80rem; /* 1280px: library, header */
--width-reading: 42.5rem; /* 680px: recipe text column */
--width-list: 40rem; /* 640px: shopping list column */
--width-narrow: 30rem; /* 480px: onboarding, auth */
--width-modal: 32rem; /* 512px */
--width-toast: 30rem; /* 480px */
--width-tray: 40rem; /* 640px */
--header-h: 3.5rem; /* 56px */
--tabbar-h: 4rem; /* 64px */
--tray-h: 4.5rem; /* 72px */
--tap-min: 2.75rem; /* 44px: smallest touch target */
--tap: 3rem; /* 48px: default control height */
--tap-lg: 3.5rem; /* 56px: large CTA, list rows */
--row-list: 3.5rem; /* 56px: shopping-list row minimum */
--checkbox: 1.75rem; /* 28px: visual box (row is the target) */
--detail-thumb: 7.5rem; /* 120px: mobile detail thumbnail column */
--detail-media-min: 16rem; /* 256px: desktop media column, min */
--detail-media-max: 24rem; /* 384px: desktop media column, max */
--ingredient-qty-col: 6.5rem; /* 104px: quantity column */
--art-max: 22rem; /* 352px: empty-state illustration */
--art-max-lg: 26rem; /* 416px: onboarding illustration */
--icon-xs: 1rem; /* 16px */
--icon-sm: 1.25rem; /* 20px */
--icon-md: 1.5rem; /* 24px */
--icon-lg: 2rem; /* 32px */
--ratio-card: 4 / 5; /* every library thumbnail */
--ratio-reel: 9 / 16;
--ratio-post: 4 / 5;
/* ------------------------------------------------------------------------
6. Shape & depth
------------------------------------------------------------------------ */
--radius-0: 0; /* media, cards, sheets, tray: cut paper */
--radius-1: 2px; /* checkboxes, tags */
--radius-2: 4px; /* buttons, inputs, toasts, dialogs */
--radius-pill: 999px; /* chips, badges, select toggle */
--border-1: 1px;
--border-2: 2px;
--border-3: 3px;
--focus-width: 3px;
--focus-offset: 2px;
--shadow-0: none;
--shadow-1: 0 1px 0 rgb(26 25 21 / 0.06), 0 2px 6px -2px rgb(26 25 21 / 0.18);
--shadow-2: 0 2px 4px rgb(26 25 21 / 0.08), 0 12px 28px -8px rgb(26 25 21 / 0.30);
--shadow-3: 0 4px 8px rgb(26 25 21 / 0.10), 0 28px 56px -12px rgb(26 25 21 / 0.40);
--mark-offset: 6px; /* highlighter block behind a selected clipping */
--shadow-mark: var(--mark-offset) var(--mark-offset) 0 0 var(--color-accent);
/* ------------------------------------------------------------------------
7. Motion
------------------------------------------------------------------------ */
--dur-instant: 80ms;
--dur-fast: 140ms;
--dur-base: 200ms;
--dur-slow: 280ms;
--dur-slower: 420ms;
--dur-strike: 240ms;
--dur-fade: 120ms; /* kept under reduced motion */
--dur-spin: 800ms;
--dur-shimmer: 1400ms;
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
--motion-shift: 0.5rem; /* 8px: small entrance travel */
--motion-shift-lg: 1.5rem; /* 24px: sheets, tray */
/* ------------------------------------------------------------------------
8. Layers
------------------------------------------------------------------------ */
--z-raised: 1;
--z-sticky: 10;
--z-header: 20;
--z-tabbar: 30;
--z-tray: 40;
--z-modal: 60;
--z-toast: 70;
}
/* --------------------------------------------------------------------------
9. Responsive layout tokens
-------------------------------------------------------------------------- */
@media (min-width: 37.5em) { /* sm ≥ 600px */
:root {
--page-pad: var(--space-6);
--grid-cols: 3;
--grid-gap-x: var(--space-4);
--grid-gap-y: 1.75rem;
}
}
@media (min-width: 56.25em) { /* md ≥ 900px */
:root {
--page-pad: var(--space-8);
--grid-cols: 4;
--grid-gap-x: var(--space-5);
--grid-gap-y: var(--space-8);
--card-title-size: var(--text-md);
--header-h: 4rem;
}
}
@media (min-width: 75em) { /* lg ≥ 1200px */
:root {
--grid-cols: 5;
--grid-gap-x: var(--space-6);
--grid-gap-y: var(--space-10);
}
}
/* --------------------------------------------------------------------------
10. Dark theme. The two blocks below are intentionally identical:
one follows the OS, the other is forced by data-theme="dark".
-------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--color-bg: var(--carbon-900);
--color-surface: var(--carbon-800);
--color-surface-sunken: var(--carbon-700);
--color-rule: var(--carbon-600);
--color-border: var(--chalk-600);
--color-keyline: var(--carbon-500);
--color-text: var(--chalk-100);
--color-text-muted: var(--chalk-300);
--color-text-subtle: var(--chalk-500);
--color-text-disabled: var(--chalk-600);
--color-primary: var(--chalk-100);
--color-primary-hover: var(--chalk-0);
--color-on-primary: var(--ink-900);
--color-secondary: var(--chalk-300);
--color-accent: var(--marker-400);
--color-accent-hover: var(--marker-500);
--color-accent-wash: var(--marker-900);
--color-on-accent: var(--ink-900);
--color-inverse-bg: var(--carbon-600);
--color-inverse-surface: var(--carbon-500);
--color-inverse-edge: var(--carbon-500);
--color-inverse-text: var(--chalk-100);
--color-inverse-muted: var(--chalk-300);
--color-focus: var(--chalk-100);
--color-focus-inverse: var(--marker-400);
--color-success: var(--green-300);
--color-success-bg: var(--green-950);
--color-success-on-inverse: var(--green-300);
--color-warning: var(--amber-300);
--color-warning-bg: var(--amber-950);
--color-warning-on-inverse: var(--amber-300);
--color-error: var(--red-300);
--color-error-bg: var(--red-950);
--color-error-on-inverse: var(--red-300);
--color-info: var(--blue-300);
--color-info-bg: var(--blue-950);
--color-info-on-inverse: var(--blue-300);
--color-backdrop: rgb(0 0 0 / 0.65);
--color-shimmer: rgb(255 253 248 / 0.07);
--color-media-placeholder: var(--carbon-700);
--shadow-1: 0 1px 0 rgb(0 0 0 / 0.35), 0 2px 6px -2px rgb(0 0 0 / 0.5);
--shadow-2: 0 2px 4px rgb(0 0 0 / 0.4), 0 12px 28px -8px rgb(0 0 0 / 0.65);
--shadow-3: 0 4px 8px rgb(0 0 0 / 0.45), 0 28px 56px -12px rgb(0 0 0 / 0.75);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--color-bg: var(--carbon-900);
--color-surface: var(--carbon-800);
--color-surface-sunken: var(--carbon-700);
--color-rule: var(--carbon-600);
--color-border: var(--chalk-600);
--color-keyline: var(--carbon-500);
--color-text: var(--chalk-100);
--color-text-muted: var(--chalk-300);
--color-text-subtle: var(--chalk-500);
--color-text-disabled: var(--chalk-600);
--color-primary: var(--chalk-100);
--color-primary-hover: var(--chalk-0);
--color-on-primary: var(--ink-900);
--color-secondary: var(--chalk-300);
--color-accent: var(--marker-400);
--color-accent-hover: var(--marker-500);
--color-accent-wash: var(--marker-900);
--color-on-accent: var(--ink-900);
--color-inverse-bg: var(--carbon-600);
--color-inverse-surface: var(--carbon-500);
--color-inverse-edge: var(--carbon-500);
--color-inverse-text: var(--chalk-100);
--color-inverse-muted: var(--chalk-300);
--color-focus: var(--chalk-100);
--color-focus-inverse: var(--marker-400);
--color-success: var(--green-300);
--color-success-bg: var(--green-950);
--color-success-on-inverse: var(--green-300);
--color-warning: var(--amber-300);
--color-warning-bg: var(--amber-950);
--color-warning-on-inverse: var(--amber-300);
--color-error: var(--red-300);
--color-error-bg: var(--red-950);
--color-error-on-inverse: var(--red-300);
--color-info: var(--blue-300);
--color-info-bg: var(--blue-950);
--color-info-on-inverse: var(--blue-300);
--color-backdrop: rgb(0 0 0 / 0.65);
--color-shimmer: rgb(255 253 248 / 0.07);
--color-media-placeholder: var(--carbon-700);
--shadow-1: 0 1px 0 rgb(0 0 0 / 0.35), 0 2px 6px -2px rgb(0 0 0 / 0.5);
--shadow-2: 0 2px 4px rgb(0 0 0 / 0.4), 0 12px 28px -8px rgb(0 0 0 / 0.65);
--shadow-3: 0 4px 8px rgb(0 0 0 / 0.45), 0 28px 56px -12px rgb(0 0 0 / 0.75);
}
/* --------------------------------------------------------------------------
11. Reduced motion: movement off, short fades kept
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-instant: 1ms;
--dur-fast: 1ms;
--dur-base: 1ms;
--dur-slow: 1ms;
--dur-slower: 1ms;
--dur-strike: 1ms;
--dur-shimmer: 0ms;
--motion-shift: 0px;
--motion-shift-lg: 0px;
}
}