/* ===================================================================== Cartonia — design tokens --------------------------------------------------------------------- Self-contained. No imports, no build step, no dependencies. Two layers: 1. Palette (--c-*) raw values. Never change with theme. 2. Roles semantic. Flip with theme. Style every component through layer 2. A component that reaches for a --c-* value directly will be wrong in one of the two themes. Theme resolves in three states: no attribute (follows the OS), data-theme="light", data-theme="dark". ===================================================================== */ :root { /* =================================================================== 1 · PALETTE =================================================================== */ /* --- Brand. The mark's own colours. ----------------------------- */ --c-kraft: #C49A6C; /* band face — the material */ --c-kraft-deep: #A87F52; /* kraft, pressed/hover */ --c-umbra: #603913; /* ribbon back, on light */ --c-umbra-light: #8A5A2B; /* ribbon back, on dark */ --c-ink: #231F20; /* the wordmark */ /* --- Paper. Surfaces, light theme. ------------------------------- */ --c-paper-50: #FAF9F5; /* card */ --c-paper-100: #F0EEE6; /* canvas */ --c-paper-200: #E6E2D7; /* sunken */ --c-paper-300: #D3CFC4; /* hairline */ --c-manilla: #F5E3C7; /* feature surface — a warmer sheet */ /* --- Slate. Text on light, surfaces on dark. --------------------- */ --c-slate-400: #8B8478; /* faint, on dark */ --c-slate-450: #9A9387; /* faint on dark, AA on the sunken surface */ --c-slate-500: #A8A093; /* muted, on dark */ --c-slate-600: #6F6A5F; /* faint, on light */ --c-slate-700: #4A463E; /* muted, on light */ --c-night-line: #35322D; /* hairline, on dark */ --c-night-200: #24221F; /* sunken, on dark */ --c-night-100: #1C1B19; /* card, on dark */ --c-night-000: #141413; /* canvas, on dark */ /* --- Eco. The proof colour: recycled content, certification. ----- */ --c-eco: #43682F; --c-eco-deep: #25401C; --c-eco-light: #7FA45E; /* on dark grounds */ --c-eco-tint: #E3E9D5; /* label background, light */ --c-eco-tint-dk: #2A3320; /* label background, dark */ /* --- Clay. The action colour. Surfaces only, never body text. ---- */ --c-clay: #D97757; --c-clay-deep: #C6613F; /* --- Status. Only ever with an icon or a label beside it. -------- */ --c-amber: #875C10; /* warning, on light */ --c-amber-light: #D9A648; /* warning, on dark */ --c-amber-tint: #F3E7CC; --c-brick: #A3321D; /* error, on light */ --c-brick-light: #E0705A; /* error, on dark */ --c-brick-tint: #F6DED6; /* =================================================================== 2 · ROLES — light (default) =================================================================== */ color-scheme: light; /* --- Surfaces. Elevation is a change of tone, never a shadow. ---- */ --surface-canvas: var(--c-paper-100); --surface-card: var(--c-paper-50); --surface-sunken: var(--c-paper-200); --surface-feature: var(--c-manilla); --surface-inverse: var(--c-night-000); /* --- Text --------------------------------------------------------- */ --text-primary: var(--c-ink); --text-muted: var(--c-slate-700); --text-faint: var(--c-slate-600); /* Numerals and question markers: umbra reads on paper, kraft on night. */ --text-marker: var(--c-umbra); --text-inverse: var(--c-paper-100); --text-on-accent: var(--c-ink); /* on clay and kraft */ --text-on-eco: var(--c-paper-50); --text-on-inverse-muted: var(--c-slate-500); /* --- Lines -------------------------------------------------------- */ --line-hairline: var(--c-paper-300); --line-strong: var(--c-slate-600); --line-inverse: var(--c-night-line); /* --- Brand roles -------------------------------------------------- */ --brand-mark: var(--c-kraft); --brand-mark-back: var(--c-umbra); --brand-wordmark: var(--c-ink); /* --- Action. One action, one colour. ------------------------------ */ --action-bg: var(--c-clay); --action-bg-hover: var(--c-clay-deep); --action-text: var(--c-ink); /* 5.22:1 — white on clay fails AA */ /* --- Eco ---------------------------------------------------------- */ --eco-fg: var(--c-eco); --eco-bg: var(--c-eco-tint); --eco-fg-on-bg: var(--c-eco-deep); /* --- Status ------------------------------------------------------- */ --status-warn-fg: var(--c-amber); --status-warn-bg: var(--c-amber-tint); --status-error-fg: var(--c-brick); --status-error-bg: var(--c-brick-tint); --status-ok-fg: var(--c-eco); --status-ok-bg: var(--c-eco-tint); /* --- Focus. Visible on every surface in the system. --------------- */ --focus-ring: var(--c-ink); --focus-offset: 3px; --focus-width: 2px; /* =================================================================== 3 · TYPE Archivo carries the brand voice, Source Serif 4 carries reading, IBM Plex Mono carries anything that is a code or a measurement. =================================================================== */ --font-brand: 'Archivo', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif; --font-text: 'Source Serif 4', ui-serif, Georgia, Cambria, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* The logotype is a fixed outlined asset and never re-renders from a font. Headings use wdth 100; only the logo sits at wdth 112. */ --wdth-display: 104; --wdth-ui: 100; /* --- Scale. Desktop targets are the clamp maxima. ----------------- */ --text-spec: 11px; --leading-spec: 1.35; --tracking-spec: 0.13em; --text-caption: 12px; --leading-caption: 1.45; --tracking-caption: 0.01em; --text-sm: 14px; --leading-sm: 1.5; --tracking-sm: 0; --text-body: 17px; --leading-body: 1.6; --tracking-body: 0; --text-body-lg: 20px; --leading-body-lg: 1.55; --tracking-body-lg: 0; --text-h4: 22px; --leading-h4: 1.3; --tracking-h4: -0.01em; --text-h3: 28px; --leading-h3: 1.25; --tracking-h3: -0.015em; --text-h2: clamp(1.875rem, 1.35rem + 1.6vw, 2.5rem); /* 30 → 40 */ --leading-h2: 1.18; --tracking-h2: -0.02em; --text-h1: clamp(2.375rem, 1.4rem + 3.2vw, 3.8125rem); /* 38 → 61 */ --leading-h1: 1.06; --tracking-h1: -0.028em; /* Shallower floor so the hero headline does not run to seven lines on a phone. Still reaches 76px at ~1140px, same as the old curve. */ --text-display: clamp(2.125rem, 0.9rem + 5.4vw, 4.75rem); /* 34 → 76 */ --leading-display: 1.0; --tracking-display: -0.035em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* =================================================================== 4 · SPACE, SHAPE, MOTION =================================================================== */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* Die-cut, not rounded. Corrugated board does not have soft corners. */ --radius-none: 0; --radius-sm: 2px; /* chips, inputs, tiles */ --radius-md: 3px; /* cards, images */ --radius-icon: 18.75%; /* app icon tile only */ --border-hairline: 1px; --ease: cubic-bezier(.2, .75, .25, 1); --dur-1: 120ms; /* state change on a control */ --dur-2: 200ms; /* reveal, hover on a card */ --dur-3: 320ms; /* entrance */ /* =================================================================== 5 · LAYOUT =================================================================== */ --measure: 64ch; /* reading column */ --page-max: 1200px; --gutter: clamp(20px, 4vw, 56px); --clearspace-ratio: 0.0759; /* logo clear space ÷ logo width */ } /* ===================================================================== Dark — OS preference, unless an explicit light choice overrides it. Roles only. The palette above never moves. ===================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --surface-canvas: var(--c-night-000); --surface-card: var(--c-night-100); --surface-sunken: var(--c-night-200); --surface-feature: var(--c-night-200); --surface-inverse: var(--c-paper-100); --text-primary: var(--c-paper-100); --text-muted: var(--c-slate-500); --text-faint: var(--c-slate-450); --text-marker: var(--c-kraft); --text-inverse: var(--c-ink); --text-on-accent: var(--c-ink); --text-on-eco: var(--c-ink); --text-on-inverse-muted: var(--c-slate-700); --line-hairline: var(--c-night-line); --line-strong: var(--c-slate-400); --line-inverse: var(--c-paper-300); --brand-mark-back: var(--c-umbra-light); --brand-wordmark: var(--c-paper-100); --eco-fg: var(--c-eco-light); --eco-bg: var(--c-eco-tint-dk); --eco-fg-on-bg: var(--c-eco-light); --status-warn-fg: var(--c-amber-light); --status-warn-bg: #33280F; --status-error-fg: var(--c-brick-light); --status-error-bg: #332019; --status-ok-fg: var(--c-eco-light); --status-ok-bg: var(--c-eco-tint-dk); --focus-ring: var(--c-kraft); } } /* Explicit dark choice wins over a light OS. */ :root[data-theme="dark"] { color-scheme: dark; --surface-canvas: var(--c-night-000); --surface-card: var(--c-night-100); --surface-sunken: var(--c-night-200); --surface-feature: var(--c-night-200); --surface-inverse: var(--c-paper-100); --text-primary: var(--c-paper-100); --text-muted: var(--c-slate-500); --text-faint: var(--c-slate-450); --text-marker: var(--c-kraft); --text-inverse: var(--c-ink); --text-on-accent: var(--c-ink); --text-on-eco: var(--c-ink); --text-on-inverse-muted: var(--c-slate-700); --line-hairline: var(--c-night-line); --line-strong: var(--c-slate-400); --line-inverse: var(--c-paper-300); --brand-mark-back: var(--c-umbra-light); --brand-wordmark: var(--c-paper-100); --eco-fg: var(--c-eco-light); --eco-bg: var(--c-eco-tint-dk); --eco-fg-on-bg: var(--c-eco-light); --status-warn-fg: var(--c-amber-light); --status-warn-bg: #33280F; --status-error-fg: var(--c-brick-light); --status-error-bg: #332019; --status-ok-fg: var(--c-eco-light); --status-ok-bg: var(--c-eco-tint-dk); --focus-ring: var(--c-kraft); }