/* propane — design system. Dual-theme: a light canvas (default) and a dark canvas, switched by [data-theme] on . One red accent marks "the moment you picked"; everything else is a neutral grayscale ramp. Display type is tight system-ui; labels/numbers are mono ("telemetry"). No third-party fonts. ── THEME TOKEN CONTRACT ────────────────────────────────────────────────────── Every consumer stylesheet (app/admin/landing/login) reads ONLY these vars so a single [data-theme] flip re-skins the whole site. Never hardcode #fff / #000 / rgba(255..) / rgba(0..) for themed surfaces — map to a token below. --bg page canvas --bg-1 inner tile (cards-within-cards, list rows) --bg-2 card surface --bg-3 input / track / hover wash --line hairline border --line-2 stronger border --ink primary text --ink-2 secondary text --ink-3 muted text --ink-4 faint text / disabled --accent brand red — selection & "the moment" (logo, active step, active category, selected card, key stats) --accent-ink text/icon ON an accent fill (always white) --accent-weak faint red tint background (active chip / selected wash) --accent-line red-tinted border --solid primary-solid fill (CTA button, progress) — black in light, white in dark; its readable text is --solid-ink --solid-ink text on --solid --raised elevated pill ON a track (segmented-control active) --nav-bg translucent nav background --shadow card elevation --shadow-sm small pill/raised elevation --good/--warn/--bad readable status TEXT on canvas (both themes) --good-weak/--warn-weak/--bad-weak pastel status badge backgrounds --good-ink/--bad-ink dark text on a status badge background ──────────────────────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { --bg: #f4f4f5; --bg-1: #ffffff; --bg-2: #ffffff; --bg-3: #efeff1; --line: #e7e7ea; --line-2: #d7d7dc; --ink: #18181b; --ink-2: #52525b; --ink-3: #67676f; /* muted/label text — AA on every light surface */ --ink-4: #7c7c84; /* tertiary caption/placeholder text */ --accent: #ef4444; /* brand red — fills, borders, icons */ --accent-ink: #ffffff; /* on an accent fill */ --accent-strong:#b91c1c; /* small RED TEXT on a light wash (AA) */ --accent-weak: #fdeded; --accent-line: #f6bcbc; --solid: #18181b; --solid-ink: #ffffff; --raised: #ffffff; --nav-bg: rgba(255,255,255,.72); --good:#16a34a; --good-weak:#dcfce7; --good-ink:#0a3d1f; --warn:#b45309; --warn-weak:#fef3c7; --bad:#dc2626; --bad-weak:#fee2e2; --bad-ink:#7f1d1d; --bad-solid:#dc2626; --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px; --pad: clamp(16px, 4vw, 28px); --maxw: 1180px; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(.22,.61,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --t-fast: .16s; --t: .28s; --t-slow: .6s; --shadow: 0 1px 2px rgba(24,24,27,.05), 0 18px 40px -28px rgba(24,24,27,.28); --shadow-sm: 0 1px 2px rgba(24,24,27,.10), 0 2px 8px -3px rgba(24,24,27,.12); } [data-theme="dark"] { --bg: #0a0a0b; --bg-1: #111113; --bg-2: #161618; --bg-3: #1e1e21; --line: #2a2a2d; --line-2: #3a3a40; --ink: #fafafa; --ink-2: #b6b6bd; --ink-3: #76767e; --ink-4: #6c6c74; /* lifted so tertiary text stays legible on dark */ --accent: #f4504f; --accent-ink: #ffffff; --accent-strong:#f4504f; /* already reads on dark — same as --accent */ --accent-weak: #2a1416; --accent-line: #5a2528; --solid: #fafafa; --solid-ink: #0a0a0b; --raised: #2a2a2e; --nav-bg: rgba(10,10,11,.62); --good:#5fe39b; --good-weak:#d6f7e0; --good-ink:#0a3d1f; --warn:#f2d08a; --warn-weak:#f7e9c8; --bad:#f48b8f; --bad-weak:#f6cdce; --bad-ink:#7f1d1d; --bad-solid:#b42318; --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -30px rgba(0,0,0,.9); --shadow-sm: 0 1px 2px rgba(0,0,0,.55); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background var(--t) var(--ease), color var(--t) var(--ease); } h1,h2,h3,h4 { margin: 0; font-weight: 760; letter-spacing: -0.035em; line-height: 1.02; color: var(--ink); } h1 { font-size: clamp(2.6rem, 8vw, 6.5rem); } h2 { font-size: clamp(1.8rem, 4.5vw, 3.4rem); } h3 { font-size: clamp(1.2rem, 2.4vw, 1.7rem); letter-spacing:-0.025em; } p { margin: 0; color: var(--ink-2); } a { color: inherit; text-decoration: none; } img, svg, video { display: block; max-width: 100%; } ::selection { background: var(--accent); color: var(--accent-ink); } /* mono telemetry label */ .kicker, .mono, .tag, .stat-num { font-family: var(--mono); } .kicker { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); } .muted { color: var(--ink-3); } .hide { display: none !important; } /* ── buttons ─────────────────────────────────────────────────────────────── */ .btn { --b-bg: var(--solid); --b-ink: var(--solid-ink); display: inline-flex; align-items: center; justify-content: center; gap: .5em; font: inherit; font-weight: 650; letter-spacing: -.01em; padding: .72em 1.25em; border-radius: var(--r-pill); background: var(--b-bg); color: var(--b-ink); border: 1px solid transparent; cursor: pointer; transition: transform var(--t-fast) var(--ease), background var(--t) var(--ease), border-color var(--t) var(--ease), opacity var(--t) var(--ease); white-space: nowrap; user-select: none; } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.99); } .btn:disabled { opacity: .4; cursor: not-allowed; transform: none; } .btn--ghost { --b-bg: transparent; --b-ink: var(--ink); border-color: var(--line-2); } .btn--ghost:hover { background: var(--bg-3); } .btn--accent { --b-bg: var(--accent); --b-ink: var(--accent-ink); } .btn--lg { padding: .95em 1.7em; font-size: 1.05rem; } .btn--sm { padding: .5em .9em; font-size: .85rem; } .btn--block { width: 100%; } /* ── inputs ──────────────────────────────────────────────────────────────── */ .input, select.input, textarea.input { width: 100%; font: inherit; color: var(--ink); background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .8em 1em; transition: border-color var(--t) var(--ease), background var(--t) var(--ease), box-shadow var(--t) var(--ease); } .input::placeholder { color: var(--ink-4); } .input:focus, .btn:focus-visible, select.input:focus, .chip:focus-visible, .toggle:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); } :where(a,button,[tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } label.field { display: block; } label.field > span { display:block; font-family: var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color: var(--ink-3); margin-bottom:.5em; } /* ── surfaces ────────────────────────────────────────────────────────────── */ .card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 3vw, 28px); box-shadow: var(--shadow); } .hr { height: 1px; background: var(--line); border: 0; margin: 0; } /* selectable chips / toggles (variant matrix, filters). Default "on" = red-accent outline (matches the active category in the studio). */ .chip { display: inline-flex; align-items: center; gap: .5em; font: inherit; font-size: .9rem; font-weight: 550; padding: .5em .95em; border-radius: var(--r-pill); background: var(--bg-1); color: var(--ink-2); border: 1px solid var(--line); cursor: pointer; transition: all var(--t-fast) var(--ease); user-select: none; } .chip:hover { border-color: var(--line-2); color: var(--ink); } .chip[aria-pressed="true"], .chip.is-on { background: var(--accent-weak); color: var(--accent-strong); border-color: var(--accent-line); } .chip[disabled] { opacity: .4; cursor: not-allowed; } /* neutral-solid chip variant — calm multi-select pills (config axes) */ .chip--solid.is-on, .chip--solid[aria-pressed="true"] { background: var(--solid); color: var(--solid-ink); border-color: var(--solid); } /* status badges */ .badge { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; padding: .28em .6em; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--ink-2); } .badge--good { background: var(--good-weak); color: var(--good-ink); border-color: transparent; } .badge--bad { background: var(--bad-weak); color: var(--bad-ink); border-color: transparent; } .badge--run { background: var(--bg-3); color: var(--ink); } /* progress bar */ .bar { height: 4px; background: var(--bg-3); border-radius: var(--r-pill); overflow: hidden; } .bar > i { display:block; height:100%; width:0; background: var(--solid); transition: width var(--t) var(--ease); } /* table */ table.tbl { width:100%; border-collapse: collapse; font-size: .9rem; } .tbl th { text-align:left; font-family: var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-3); font-weight:500; padding:.7em .8em; border-bottom:1px solid var(--line); } .tbl td { padding:.7em .8em; border-bottom:1px solid var(--line); color: var(--ink-2); } .tbl tr:hover td { background: var(--bg-1); color: var(--ink); } /* toast */ .toast-host { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 90; display:flex; flex-direction:column; gap:8px; align-items:center; } .toast { background: var(--solid); color: var(--solid-ink); font-weight:600; padding:.7em 1.1em; border-radius: var(--r-pill); box-shadow: 0 20px 50px -20px rgba(0,0,0,.5); animation: toastIn .3s var(--ease-out); } .toast--bad { background: var(--bad-solid); color: #fff; } @keyframes toastIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } } /* skeleton shimmer */ .skel { background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; border-radius: var(--r-sm); } @keyframes shimmer { to { background-position: -200% 0; } } /* spinner */ .spin { width:1em; height:1em; border:2px solid var(--line-2); border-top-color: var(--ink); border-radius:50%; animation: rot .7s linear infinite; display:inline-block; } /* spinner injected inside a solid/ghost/accent button: contrast against the button's own fill via its scoped ink token (set on .btn) */ .btn .spin { border-color: color-mix(in srgb, var(--b-ink) 28%, transparent); border-top-color: var(--b-ink); } @keyframes rot { to { transform: rotate(360deg); } } /* scrollbar */ * { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 3px solid var(--bg); } /* top nav (shared by app/admin) */ .nav { position: sticky; top:0; z-index: 40; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: var(--nav-bg); border-bottom: 1px solid var(--line); } .nav .wrap { display:flex; align-items:center; justify-content:space-between; height: 64px; } /* brandmark: the red propane tile + wordmark */ .brandmark { display:flex; align-items:center; gap:.5em; font-weight:800; letter-spacing:-.04em; font-size:1.2rem; color: var(--ink); } .brand-tile { width: 1.5em; height: 1.5em; border-radius: 8px; flex: 0 0 auto; display:grid; place-items:center; background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: .84em; line-height: 1; box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--accent) 60%, transparent); } /* legacy dot mark — recoloured to the accent for any remaining usages */ .brandmark .dot { width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 16px 1px color-mix(in srgb, var(--accent) 55%, transparent); } .nav-credits { font-family: var(--mono); font-size:.85rem; color: var(--ink); display:flex; align-items:center; gap:.5em; padding:.4em .8em; border:1px solid var(--line); border-radius: var(--r-pill); background: var(--bg-1); } /* entrance animation utility */ [data-rise] { opacity:0; transform: translateY(14px); } [data-rise].in { opacity:1; transform:none; transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }