/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #1e1009 #5d5959 #f1e7de #d77342 #8e4c2c #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #f1e7de; --surface: #f9f4f0; --surface-2: #e6dcd3; --border: #d3c9c0; --border-strong: #b2a79e; --ink: #5d5959; --muted: #64605e; --accent: #d77342; --accent-hover: #b76238; --accent-ink: #1e1009; --accent-text: #8e4c2c; --accent-strong: #8e4c2c; --accent-soft: #edd7c8; --accent-border: #e5b398; --success: #15803d; --success-ink: #ffffff; --success-soft: #d7dbcb; --success-strong: #116d34; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #ead5c4; --warning-strong: #994607; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #eacfc7; --danger-strong: #aa1a1a; --chart-1: #c96735; --chart-2: #8b831c; --chart-3: #0f8260; --chart-4: #198db1; --chart-5: #665cb8; --chart-6: #c06098; --font-display: "Outfit Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Nunito Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-sans: "Nunito Sans Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --display-weight: 700; --display-tracking: -0.02em; --eyebrow-tracking: 0.10em; --look: warm-craft; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-btn: 10px; --radius-card: 14px; --radius-input: 8px; --border-w: 1px; --border-strong-w: 2px; --shadow-card: 0 1px 3px color-mix(in srgb, var(--ink) 6%, transparent), 0 6px 18px color-mix(in srgb, var(--ink) 7%, transparent); --shadow-raised: 0 2px 4px color-mix(in srgb, var(--ink) 7%, transparent), 0 10px 30px color-mix(in srgb, var(--ink) 12%, transparent); --shadow-btn: 0 1px 2px color-mix(in srgb, var(--ink) 10%, transparent); --section-y: 5rem; --card-pad: 1.5rem; --caps: none; --caps-tracking: 0.04em; --btn-weight: 600; --measure: 68ch; } /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #160c07; --surface: #2d2420; --surface-2: #221813; --border: #372e2a; --border-strong: #5c5551; --ink: #f1e7de; --muted: #998f88; --accent: #d77342; --accent-hover: #dd885e; --accent-ink: #1e1009; --accent-text: #d77342; --accent-strong: #da7e51; --accent-soft: #402314; --accent-border: #6d3a22; --success: #15803d; --success-ink: #ffffff; --success-soft: #162613; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #391c07; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #3a100c; --danger-strong: #d16969; --chart-1: #d77342; --chart-2: #bbb337; --chart-3: #1b966f; --chart-4: #2bb8e5; --chart-5: #7a71d0; --chart-6: #e984bf; } /* ==================================================================== * app.css — THIS APP'S OWN CSS. Yours to write. Ships empty. * * design.css is a FLOOR, not a ceiling. * * For a long time it was both, and the cost was measurable: an app could * not write a single CSS rule, so every app built here had the same 10px * radius, the same Public Sans at the same 15px, the same 1px borders and * the same soft shadow. Only fourteen COLOUR tokens ever differed. Three * apps in a row came out looking like the same product in three coats of * paint, which is what this file exists to end. * * It loads AFTER design.css and theme.css, so anything here wins. * * ---- THE FIRST LEVER: RETUNE THE SYSTEM --------------------------- * * A :root block here re-tunes every component at once — nothing is * restyled one class at a time. These are the tokens that decide an app's * CHARACTER, and they are the fastest way to make two apps look nothing * alike: * * --radius-sm --radius --radius-lg 0 is brutal, 4 is crisp, 18 is soft * --font-sans --font-mono a display face changes more than colour * --t-xs … --t-5xl the type scale, and how far it ramps * --lh --lh-tight --track-tight density and tone * --s-1 … --s-12 the spacing scale: tight or generous * --shadow --shadow-raised flat, or lifted * --border --border-strong widths hairline, or heavy and drawn * --dur-1 --dur-2 --ease brisk, or languid * --content-max --measure a wide dashboard or a narrow reading page * * COLOUR IS THE ONE EXCEPTION, and it is not a technicality: the owner * picked the palette on the approval card before you built anything, and * it is the only part of the look they chose themselves. theme.css holds * it. Write var(--accent), var(--ink), var(--canvas) — never a hex, an * rgb() or an hsl(), here or anywhere. The validator refuses those. * * ---- THE SECOND LEVER: WRITE WHAT IS NOT THERE --------------------- * * design.css covers the ordinary furniture. It does NOT cover the one * screen that makes this app itself — a timer's dial, a board's columns, * a chart, a seating plan, a game grid. Write those here, in full, and * name them for what they are (.dial, .board-col), never .card-2. * * Compose the primitives where they fit and write your own where they do * not. An app that used only the frozen classes and added nothing shipped * 160 component classes and zero rules of its own — and read as generated, * because the system's ceiling had become the app's ceiling. * * Keep using the tokens in what you write. A rule built on var(--s-4) and * var(--radius) stays consistent with everything around it and follows the * app when its character changes; one built on 16px and 10px does not. * ==================================================================== */ /* The page head's action row (Safety & support, New session) was wrapping alone onto its own line at tablet widths, right-aligned against a left-aligned title — a lone, off-balance island. Below the point it can sit beside the title, make it a deliberate full-width row instead, the same treatment the layout already uses on a phone. */ @media (max-width: 1023px) { .page-head-actions { width: 100%; margin-left: 0; } }