/* Design tokens — the "Organic" palette from the design handoff. * * Two layers, deliberately: * * 1. RAMPS. The handoff's primitives: neutral 100-900, accent 100-900, * accent-2 100-900. These are the only place a hex value appears. * 2. SEMANTICS. Everything the screens actually use (--fg2, --brand, --stop * ...) is defined once, in terms of the ramps. * * Dark mode redefines ONLY the ramps, reversed 100<->900. Custom properties * resolve at use, so every semantic name follows automatically and keeps its * relative weight. That is what the handoff means by "a full re-tint, not a * filter" - there is no second set of component colours to keep in step. * * The theme class goes on , never on an inner wrapper: body-level colour * has to resolve against the right set or inherited text comes out invisible. * * Palette rules from the handoff: * - terracotta is the refusal/warning colour, sage the confirmation colour * - every button, badge, tag and chip is a pill * - :focus-visible is always 2px accent at 2px offset, never the browser default */ @import url("/fonts/fonts.css"); :root { /* --- ramps: light ("Organic") --- */ --color-neutral-100: #f9f4ed; --color-neutral-200: #eee7db; --color-neutral-300: #dcd3c4; --color-neutral-400: #c0b6a5; --color-neutral-500: #a19786; --color-neutral-600: #82796a; --color-neutral-700: #645c50; --color-neutral-800: #474238; --color-neutral-900: #2e2b25; --color-accent-100: #fff2eb; --color-accent-200: #ffe1d0; --color-accent-300: #ffc6a5; --color-accent-400: #f6a06b; --color-accent-500: #d67f48; --color-accent-600: #b2622d; --color-accent-700: #8c491a; --color-accent-800: #643312; --color-accent-900: #402310; --color-accent-2-100: #f0fae1; --color-accent-2-200: #e1eecc; --color-accent-2-300: #ccdbb2; --color-accent-2-400: #aebf92; --color-accent-2-500: #8fa073; --color-accent-2-600: #728157; --color-accent-2-700: #56633f; --color-accent-2-800: #3d472b; --color-accent-2-900: #272e1b; --color-bg: #f5ead8; --color-surface: #ebddc5; --color-text: #201e1d; --color-accent: #c67139; --color-accent-2:#7a8a5e; --color-divider: color-mix(in srgb, #201e1d 16%, transparent); --divider-ink: #201e1d; /* what the dividers are mixed from */ /* --- radii, shadows, spacing --- */ --radius-sm: 8px; --radius-md: 16px; --radius-lg: 28px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgb(46 43 37 / 14%); --shadow-md: 0 3px 10px rgb(46 43 37 / 16%); --shadow-lg: 0 12px 32px rgb(46 43 37 / 22%); --space-1: 4.4px; --space-2: 8.8px; --space-3: 13.2px; --space-4: 17.6px; --space-5: 26.4px; --space-6: 35.2px; /* --- type --- */ --font-heading: "Fraunces", Georgia, "Times New Roman", serif; --font-ui: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --dur-micro: 120ms; --dur-base: 220ms; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* --- ramps: dark. Reversed, so every semantic name below keeps its weight. --- */ @media (prefers-color-scheme: dark) { :root:not(.light):not([data-theme="light"]) { --color-neutral-100: #2e2b25; --color-neutral-200: #474238; --color-neutral-300: #645c50; --color-neutral-400: #82796a; --color-neutral-500: #a19786; --color-neutral-600: #c0b6a5; --color-neutral-700: #dcd3c4; --color-neutral-800: #eee7db; --color-neutral-900: #f9f4ed; --color-accent-100: #402310; --color-accent-200: #643312; --color-accent-300: #8c491a; --color-accent-400: #b2622d; --color-accent-500: #d67f48; --color-accent-600: #f6a06b; --color-accent-700: #ffc6a5; --color-accent-800: #ffe1d0; --color-accent-900: #fff2eb; --color-accent-2-100: #272e1b; --color-accent-2-200: #3d472b; --color-accent-2-300: #56633f; --color-accent-2-400: #728157; --color-accent-2-500: #8fa073; --color-accent-2-600: #aebf92; --color-accent-2-700: #ccdbb2; --color-accent-2-800: #e1eecc; --color-accent-2-900: #f0fae1; --color-bg: #2e2b25; --color-surface: #474238; --color-text: #f9f4ed; --color-accent: #f6a06b; --color-accent-2:#aebf92; --color-divider: color-mix(in srgb, #f9f4ed 16%, transparent); --divider-ink: #f9f4ed; --shadow-sm: 0 1px 2px rgb(0 0 0 / 34%); --shadow-md: 0 3px 10px rgb(0 0 0 / 40%); --shadow-lg: 0 12px 32px rgb(0 0 0 / 50%); } } .dark, [data-theme="dark"] { --color-neutral-100: #2e2b25; --color-neutral-200: #474238; --color-neutral-300: #645c50; --color-neutral-400: #82796a; --color-neutral-500: #a19786; --color-neutral-600: #c0b6a5; --color-neutral-700: #dcd3c4; --color-neutral-800: #eee7db; --color-neutral-900: #f9f4ed; --color-accent-100: #402310; --color-accent-200: #643312; --color-accent-300: #8c491a; --color-accent-400: #b2622d; --color-accent-500: #d67f48; --color-accent-600: #f6a06b; --color-accent-700: #ffc6a5; --color-accent-800: #ffe1d0; --color-accent-900: #fff2eb; --color-accent-2-100: #272e1b; --color-accent-2-200: #3d472b; --color-accent-2-300: #56633f; --color-accent-2-400: #728157; --color-accent-2-500: #8fa073; --color-accent-2-600: #aebf92; --color-accent-2-700: #ccdbb2; --color-accent-2-800: #e1eecc; --color-accent-2-900: #f0fae1; --color-bg: #2e2b25; --color-surface: #474238; --color-text: #f9f4ed; --color-accent: #f6a06b; --color-accent-2:#aebf92; --color-divider: color-mix(in srgb, #f9f4ed 16%, transparent); --divider-ink: #f9f4ed; --shadow-sm: 0 1px 2px rgb(0 0 0 / 34%); --shadow-md: 0 3px 10px rgb(0 0 0 / 40%); --shadow-lg: 0 12px 32px rgb(0 0 0 / 50%); } /* ===================================================================== * SEMANTICS — defined once, in terms of the ramps above. Nothing below * repeats a hex value, so dark mode needs no second copy of any of it. * ===================================================================== */ :root, .dark, .light, [data-theme] { /* grounds */ --desk: var(--color-neutral-300); --canvas: var(--color-bg); --panel: var(--color-surface); --raised: var(--color-neutral-200); --chrome: var(--color-surface); --sidebar: var(--color-surface); --chip: var(--color-neutral-100); /* the log panel is dark in both themes: a terminal reads as a terminal */ --inset: var(--color-neutral-900); --inset-fg: var(--color-neutral-300); --inset-fg2: var(--color-neutral-500); /* rules */ --line: var(--color-divider); --line-soft: color-mix(in srgb, var(--divider-ink) 8%, transparent); --line-strong: color-mix(in srgb, var(--divider-ink) 26%, transparent); --track: var(--color-neutral-300); --track-strong: var(--color-neutral-400); --disabled: var(--color-neutral-400); --dot: var(--color-neutral-400); /* text */ --fg1: var(--color-text); --fg2: var(--color-neutral-700); --fg3: var(--color-neutral-600); /* header */ --header: var(--color-surface); --header-fg: var(--color-text); --header-sub: var(--color-neutral-600); --header-chip: var(--color-neutral-200); --header-chip-line: var(--color-divider); /* accent */ --brand: var(--color-accent); --brand-deep: var(--color-accent-600); --on-accent: var(--color-neutral-100); --brand-a09: color-mix(in srgb, var(--color-accent) 8%, transparent); --brand-a10: color-mix(in srgb, var(--color-accent) 10%, transparent); --brand-a12: color-mix(in srgb, var(--color-accent) 12%, transparent); --brand-a13: color-mix(in srgb, var(--color-accent) 15%, transparent); --brand-a22: color-mix(in srgb, var(--color-accent) 22%, transparent); --brand-a30: color-mix(in srgb, var(--color-accent) 30%, transparent); /* status. Sage confirms, terracotta refuses - the handoff's own rule. */ --sent: var(--color-accent-2-600); --sent-fg: var(--color-accent-2-700); --sent-tint: var(--color-accent-2-100); --cooling: var(--color-accent-500); --cooling-fg: var(--color-accent-600); --cooling-tint: var(--color-accent-100); --cooling-tint2: var(--color-accent-200); --cooling-wash: var(--color-accent-100); --stop: var(--color-accent); --stop-fg: var(--color-accent-700); --stop-tint: var(--color-accent-200); --stop-wash: var(--color-accent-100); --idle: var(--color-neutral-500); /* shadows, under the names the screens already use */ --shadow-card: var(--shadow-sm); --shadow-window: var(--shadow-lg); }