/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Futuristic Gradient (technology) * Source colours: #0f172a #1d3557 #4361ee #e63946 #ffb703 * * 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: #fffcf1; --surface: #fffef9; --surface-2: #f3f1e7; --border: #dddcd5; --border-strong: #b7b7b5; --ink: #0f172a; --muted: #666a70; --accent: #ffb703; --accent-hover: #d99c03; --accent-ink: #0f172a; --accent-text: #8f6603; --accent-strong: #8f6603; --accent-soft: #fff2d0; --accent-border: #ffdd86; --success: #15803d; --success-ink: #ffffff; --success-soft: #e3eddb; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #f6e8d5; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f7e1d7; --danger-strong: #b91c1c; --chart-1: #be8915; --chart-2: #5d9f4e; --chart-3: #168c92; --chart-4: #6092e3; --chart-5: #9b5ca9; --chart-6: #d76e70; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-pill: 999px; --shadow: 0 1px 2px rgba(15, 18, 26, 0.05); --shadow-raised: 0 1px 2px rgba(15, 18, 26, 0.06), 0 8px 24px rgba(15, 18, 26, 0.06); --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* 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: #080c16; --surface: #21242d; --surface-2: #141822; --border: #2b2e37; --border-strong: #52555c; --ink: #fffcf1; --muted: #9c9c99; --accent: #ffb703; --accent-hover: #ffc229; --accent-ink: #0f172a; --accent-text: #ffb703; --accent-strong: #ffb703; --accent-soft: #3e3212; --accent-border: #77590d; --success: #15803d; --success-ink: #ffffff; --success-soft: #0b261f; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #2e1c13; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2f1017; --danger-strong: #d16969; --chart-1: #ffb703; --chart-2: #7ed869; --chart-3: #1fc3cb; --chart-4: #9abffb; --chart-5: #d882eb; --chart-6: #fea0a0; --shadow: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.55); } /* app.css — this app's own CSS. * * Empty on this template: it is served and seeded so that the frozen * assets.ts can import it on EVERY template in the chain (a frozen file may * not import a file that is not seeded — that broke ~190 apps once). Only * templates that list it in `writable` let the app put anything here. */