/* Bluehour design system: tokens and base components (dark).
In the spirit of Vercel and shadcn/ui: near-black surfaces, hairline borders, neutral greys, one warm
accent, Timeless Sans type, small radii, quick springy motion. Components in web/ui/ read these. */
/* Timeless Sans, "Sans" style (Timeless Ventures, Timeless Free Font License 1.2: licenses/timeless-font/), served from
our own origin as part of the app, files unmodified */
@font-face { font-family: "Timeless Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/TimelessSans-SansRegular.woff2") format("woff2"); }
@font-face { font-family: "Timeless Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/TimelessSans-SansMedium.woff2") format("woff2"); }
@font-face { font-family: "Timeless Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/TimelessSans-SansSemibold.woff2") format("woff2"); }
@font-face { font-family: "Timeless Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/TimelessSans-SansBold.woff2") format("woff2"); }
:root {
color-scheme: dark;
/* surfaces, darkest to lightest */
--tw-bg: #0a0a0a; /* app background, behind the photo */
--tw-surface: #111111; /* side panels */
--tw-surface-2: #171717; /* inputs, cards inside panels */
--tw-elevated: #1f1f1f; /* hover, popovers */
--tw-border: #262626; /* hairlines */
--tw-border-strong: #3a3a3a;
/* text */
--tw-fg: #ededed;
--tw-muted: #a1a1a1;
--tw-subtle: #8a8a8a; /* 4.5:1 on the background (was #6e6e6e, 3.9:1) */
/* controls */
--tw-track: #383838;
--tw-fill: #cfcfcf;
--tw-thumb: #fafafa;
/* brand: one warm accent, used sparingly (primary action, focus, the agent at work) */
--tw-accent: #ff7a45;
--tw-accent-fg: #170a04;
--tw-accent-soft: color-mix(in srgb, var(--tw-accent) 14%, transparent);
--tw-ok: #45c38a;
--tw-danger: #ff5c5c;
/* type */
--tw-font: "Timeless Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--tw-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
--tw-text-xs: 11px;
--tw-text-sm: 12px;
--tw-text-md: 13px;
--tw-text-lg: 15px;
--tw-text-xl: 18px; /* card titles, the plan you're on */
--tw-text-2xl: 24px; /* amounts inside cards */
--tw-text-3xl: 32px; /* prices */
--tw-text-display: 52px; /* one hero number per screen (the balance) */
--tw-leading: 1.5; /* body copy */
--tw-leading-tight: 1.15; /* headings and numbers */
/* shape and space (4px grid) */
--tw-radius-sm: 6px;
--tw-radius: 8px;
--tw-radius-lg: 12px;
--tw-radius-xl: 16px; /* dialogs, hero panels */
--tw-radius-full: 999px; /* pills, badges */
--tw-space: 4px;
--tw-space-1: 4px;
--tw-space-2: 8px;
--tw-space-3: 12px;
--tw-space-4: 16px;
--tw-space-5: 20px;
--tw-space-6: 24px;
--tw-space-8: 32px;
--tw-space-10: 40px;
/* elevation: 1 cards that lift on hover, 2 menus and popovers, 3 dialogs */
--tw-shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.25);
--tw-shadow-2: 0 16px 40px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
--tw-shadow-3: 0 30px 80px rgba(0,0,0,0.6);
--tw-glow-accent: 0 0 0 1px color-mix(in srgb, var(--tw-accent) 30%, transparent), 0 18px 50px color-mix(in srgb, var(--tw-accent) 16%, transparent);
--tw-focus-ring: 0 0 0 2px var(--tw-bg), 0 0 0 4px var(--tw-accent);
/* more colour: a soft green for savings and money in, and the blue hour itself (deep dusk over a warm horizon),
used for one hero surface per screen */
--tw-ok-soft: color-mix(in srgb, var(--tw-ok) 14%, transparent);
--tw-dusk: #0e1631;
--tw-dusk-2: #18213f;
--tw-horizon: #ff8a4c;
--tw-bluehour: radial-gradient(90% 120% at 88% 125%, color-mix(in srgb, var(--tw-horizon) 34%, transparent), transparent 60%), radial-gradient(60% 90% at 10% -20%, rgba(120,150,255,0.16), transparent 70%), linear-gradient(180deg, var(--tw-dusk) 0%, var(--tw-dusk-2) 58%, #1d1a1f 100%);
/* the AI edit token: a small warmly lit sun (the currency mark, wherever edits are counted) */
--tw-token-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.2' fill='%23fff'/%3E%3Cg stroke='%23ffd2a8' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M13.00 8.00L15.00 8.00'/%3E%3Cpath d='M11.54 11.54L12.95 12.95'/%3E%3Cpath d='M8.00 13.00L8.00 15.00'/%3E%3Cpath d='M4.46 11.54L3.05 12.95'/%3E%3Cpath d='M3.00 8.00L1.00 8.00'/%3E%3Cpath d='M4.46 4.46L3.05 3.05'/%3E%3Cpath d='M8.00 3.00L8.00 1.00'/%3E%3Cpath d='M11.54 4.46L12.95 3.05'/%3E%3C/g%3E%3C/svg%3E");
--tw-token-glow: drop-shadow(0 0 1px rgba(255,220,190,.8)) drop-shadow(0 0 5px rgba(255,140,80,.45));
/* motion: quick, slightly springy */
--tw-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--tw-spring: linear(0, 0.21 6%, 0.66 15%, 0.93 24%, 1.04 32%, 1.06 39%, 1.02 52%, 0.995 70%, 1);
--tw-fast: 120ms;
--tw-med: 220ms;
--tw-slow: 420ms;
}
/* ---------- base components ---------- */
.tw-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; padding: 0 12px;
font: 500 var(--tw-text-md) / 1 var(--tw-font); color: var(--tw-fg); background: var(--tw-surface-2);
border: 1px solid var(--tw-border); border-radius: var(--tw-radius-sm); cursor: pointer;
transition: background var(--tw-fast) var(--tw-ease), border-color var(--tw-fast) var(--tw-ease), transform var(--tw-fast) var(--tw-ease);
}
.tw-btn:hover { background: var(--tw-elevated); border-color: var(--tw-border-strong); }
.tw-btn:active { transform: scale(0.97); }
.tw-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tw-bg), 0 0 0 4px var(--tw-accent); }
.tw-btn.primary { background: var(--tw-fg); color: var(--tw-bg); border-color: var(--tw-fg); }
.tw-btn.primary:hover { background: #ffffff; }
.tw-btn.accent { background: var(--tw-accent); color: var(--tw-accent-fg); border-color: var(--tw-accent); }
.tw-btn.ghost { background: transparent; border-color: transparent; color: var(--tw-muted); }
.tw-btn.ghost:hover { background: var(--tw-elevated); color: var(--tw-fg); }
.tw-btn.sm { height: 24px; padding: 0 8px; font-size: var(--tw-text-sm); }
.tw-btn svg { width: 14px; height: 14px; }
/* segmented control with a sliding indicator (web/ui/segmented.js places it) */
.tw-seg { position: relative; display: inline-flex; padding: 2px; gap: 2px; background: var(--tw-surface-2); border: 1px solid var(--tw-border); border-radius: var(--tw-radius-sm); }
.tw-seg button { position: relative; z-index: 1; height: 24px; padding: 0 10px; font: 500 var(--tw-text-sm) / 1 var(--tw-font); color: var(--tw-muted); background: none; border: 0; border-radius: 4px; cursor: pointer; transition: color var(--tw-fast) var(--tw-ease); }
.tw-seg button:hover { color: var(--tw-fg); }
.tw-seg button[aria-pressed="true"] { color: var(--tw-fg); }
.tw-seg .ind { position: absolute; z-index: 0; top: 2px; bottom: 2px; border-radius: 4px; background: var(--tw-elevated); box-shadow: 0 0 0 1px var(--tw-border-strong); transition: left var(--tw-med) var(--tw-spring), width var(--tw-med) var(--tw-spring); }
/* collapsible section: the body animates its height with a spring */
.tw-section { border-bottom: 1px solid var(--tw-border); }
.tw-section > header { display: flex; align-items: center; gap: 8px; height: 40px; cursor: pointer; user-select: none; }
/* section titles: small spaced capitals (L I G H T) in a dimmer grey than the slider names under them */
.tw-section > header h3 { margin: 0; font: 500 10.5px / 1 var(--tw-font); color: var(--tw-subtle); text-transform: uppercase; letter-spacing: 0.24em; transition: color var(--tw-fast) var(--tw-ease); }
.tw-section > header:hover h3, .tw-section.open > header h3 { color: #8a8a8a; }
.tw-section > header .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--tw-accent); opacity: 0; transition: opacity var(--tw-med); }
.tw-section.changed > header .dot { opacity: 1; }
.tw-section > header .chev { margin-left: auto; width: 14px; height: 14px; color: var(--tw-subtle); transition: transform var(--tw-med) var(--tw-spring); }
.tw-section.open > header .chev { transform: rotate(90deg); }
.tw-section > .body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--tw-slow) var(--tw-spring); }
.tw-section.open > .body { grid-template-rows: 1fr; }
.tw-section > .body > div { overflow: hidden; overflow: clip; min-height: 0; } /* clip: never a scroll container, so focus can't shift it */
/* room past the edges so a thumb at either end, or a highlight, isn't cut off by that clip */
.tw-section > .body > div { margin-inline: -10px; padding-inline: 10px; }
.tw-section > .body > div > .inner { padding: 2px 0 14px; display: grid; gap: 2px; }
/* colour swatches (mixer) */
.tw-swatches { display: flex; justify-content: space-between; padding: 4px 0 10px; }
.tw-swatches button { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); transition: transform var(--tw-fast) var(--tw-ease), box-shadow var(--tw-fast) var(--tw-ease); }
.tw-swatches button:hover { transform: scale(1.1); }
.tw-swatches button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--tw-surface), 0 0 0 3.5px var(--tw-fg); }
.tw-swatches button.edited::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--tw-muted); }
.tw-kbd { font: 500 10.5px/1 var(--tw-mono); color: var(--tw-muted); padding: 2px 5px; border: 1px solid var(--tw-border-strong); border-bottom-width: 2px; border-radius: 4px; }
.tw-label { font: 500 var(--tw-text-xs) / 1 var(--tw-font); color: var(--tw-subtle); text-transform: uppercase; letter-spacing: 0.06em; }
/* menus: right-click menus and dropdowns (web/ui/menu.js) */
.tw-menu { position: fixed; z-index: 100; min-width: 196px; max-width: 280px; max-height: min(420px, calc(100vh - 16px)); overflow: auto; padding: 4px; background: var(--tw-elevated); border: 1px solid var(--tw-border-strong); border-radius: var(--tw-radius); box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4); animation: tw-menu-in var(--tw-med) var(--tw-spring); transform-origin: top left; }
@keyframes tw-menu-in { from { opacity: 0; transform: scale(0.97) translateY(-3px); } }
.tw-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 8px; border: 0; border-radius: var(--tw-radius-sm); background: none; color: var(--tw-fg); font: 400 var(--tw-text-md) / 1 var(--tw-font); text-align: left; cursor: pointer; outline: none; }
.tw-menu-item:focus, .tw-menu-item[aria-expanded="true"] { background: rgba(255,255,255,0.07); }
.tw-menu-item[aria-disabled="true"] { color: var(--tw-subtle); cursor: default; background: none; }
.tw-menu-item.danger { color: var(--tw-danger); }
.tw-menu-item .ic { width: 14px; height: 14px; flex: none; color: var(--tw-muted); display: grid; place-items: center; }
.tw-menu-item .ic svg { width: 14px; height: 14px; }
.tw-menu-item .lb { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-menu-item .tw-kbd { margin-left: 12px; }
.tw-menu-item .chev { width: 12px; height: 12px; color: var(--tw-subtle); }
.tw-menu-item.has-hint { height: auto; padding: 7px 8px; align-items: flex-start; }
.tw-menu-item.has-hint .ic { margin-top: 1px; }
.tw-menu-item .lb small { display: block; margin-top: 3px; font-size: var(--tw-text-xs); color: var(--tw-subtle); white-space: normal; }
.tw-menu-sep { height: 1px; margin: 4px -4px; background: var(--tw-border); }
.tw-menu-head { padding: 8px 8px 4px; font: 500 var(--tw-text-xs) / 1 var(--tw-font); color: var(--tw-subtle); text-transform: uppercase; letter-spacing: 0.06em; }
/* text field (search) */
.tw-input { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; background: var(--tw-surface-2); border: 1px solid var(--tw-border); border-radius: var(--tw-radius-sm); color: var(--tw-subtle); transition: border-color var(--tw-fast), box-shadow var(--tw-fast); }
.tw-input:focus-within { border-color: var(--tw-border-strong); box-shadow: 0 0 0 3px rgba(255,255,255,0.05); }
.tw-input svg { width: 14px; height: 14px; flex: none; }
.tw-input input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; color: var(--tw-fg); font: var(--tw-text-md) / 1 var(--tw-font); }
.tw-input input::placeholder { color: var(--tw-subtle); }
.tw-input input::-webkit-search-cancel-button { display: none; }
/* compact range (thumbnail size): hairline track, small thumb */
.tw-range { -webkit-appearance: none; appearance: none; width: 88px; height: 16px; background: none; cursor: pointer; }
.tw-range::-webkit-slider-runnable-track { height: 3px; border-radius: 3px; background: var(--tw-track); }
.tw-range::-moz-range-track { height: 3px; border-radius: 3px; background: var(--tw-track); }
.tw-range::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: var(--tw-thumb); box-shadow: 0 1px 2px rgba(0,0,0,0.6); }
.tw-range::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--tw-thumb); }
.tw-range:focus-visible { outline: none; }
.tw-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tw-accent) 55%, transparent); }
/* small icon button (toolbars, rails) */
.tw-icon-btn { width: 28px; height: 28px; flex: none; display: inline-grid; place-items: center; border: 0; border-radius: var(--tw-radius-sm); background: none; color: var(--tw-subtle); cursor: pointer; transition: color var(--tw-fast), background var(--tw-fast); }
.tw-icon-btn:hover { color: var(--tw-fg); background: var(--tw-elevated); }
.tw-icon-btn[aria-pressed="true"] { color: var(--tw-fg); background: var(--tw-elevated); }
.tw-icon-btn svg { width: 16px; height: 16px; }
.tw-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tw-accent); }
/* counts beside list items */
.tw-count { font: 500 var(--tw-text-xs) / 1 var(--tw-mono); color: var(--tw-subtle); font-variant-numeric: tabular-nums; }
/* notice at the bottom of the window (web/ui/toast.js) */
.tw-toast { position: fixed; left: 50%; bottom: 24px; z-index: 120; display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 6px 0 14px; border-radius: 999px; background: var(--tw-elevated); border: 1px solid var(--tw-border-strong); box-shadow: 0 12px 32px rgba(0,0,0,0.5); color: var(--tw-fg); font: 500 var(--tw-text-sm) / 1 var(--tw-font); opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity var(--tw-med) var(--tw-ease), transform var(--tw-med) var(--tw-spring); }
.tw-toast.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.tw-toast button { height: 26px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--tw-accent-soft); color: var(--tw-accent); font: 600 var(--tw-text-sm) / 1 var(--tw-font); cursor: pointer; }
.tw-toast button:hover { background: color-mix(in srgb, var(--tw-accent) 22%, transparent); }
.tw-toast span:only-child, .tw-toast button[hidden] + * { margin-right: 8px; }
/* ---------- currency, cards, prices (plans & top-ups; see docs/DESIGN-SYSTEM.md) ---------- */
/* the AI edit token: , sizes sm 10 · default 14 · lg 22 · xl 56 */
.tw-token { display: inline-block; flex: none; width: 14px; height: 14px; vertical-align: -2px; background: var(--tw-token-img) center / contain no-repeat; filter: var(--tw-token-glow); }
.tw-token.sm { width: 10px; height: 10px; vertical-align: -1px; }
.tw-token.lg { width: 22px; height: 22px; vertical-align: -5px; filter: drop-shadow(0 0 1px rgba(255,220,190,.8)) drop-shadow(0 0 8px rgba(255,140,80,.5)); }
.tw-token.xl { width: 56px; height: 56px; filter: drop-shadow(0 0 2px rgba(255,220,190,.9)) drop-shadow(0 0 14px rgba(255,140,80,.6)) drop-shadow(0 0 34px rgba(255,120,60,.35)); }
/* a token that's only partly there (a tweak, ¼): the rest of the sun dims */
.tw-token.part { -webkit-mask: conic-gradient(#000 0 var(--part, 25%), rgba(0,0,0,.28) 0); mask: conic-gradient(#000 0 var(--part, 25%), rgba(0,0,0,.28) 0); }
.tw-token.off { filter: grayscale(1) brightness(.75); opacity: .55; } /* free: no token used */
/* badge: one word or two on a pill. accent = the one recommended thing on a screen; save = money saved; plain = facts */
.tw-badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: var(--tw-radius-full); font: 600 var(--tw-text-xs) / 1 var(--tw-font); letter-spacing: 0.01em; white-space: nowrap; color: var(--tw-muted); background: var(--tw-elevated); box-shadow: inset 0 0 0 1px var(--tw-border-strong); }
.tw-badge.accent { color: var(--tw-accent-fg); background: var(--tw-accent); box-shadow: none; }
.tw-badge.soft { color: var(--tw-accent); background: var(--tw-accent-soft); box-shadow: none; }
.tw-badge.save { color: var(--tw-ok); background: var(--tw-ok-soft); box-shadow: none; }
/* card: a surface with a hairline. .interactive lifts on hover; .featured carries the accent (one per screen) */
.tw-card { position: relative; padding: var(--tw-space-5); border: 1px solid var(--tw-border); border-radius: var(--tw-radius-lg); background: var(--tw-surface-2); transition: border-color var(--tw-fast) var(--tw-ease), transform var(--tw-med) var(--tw-spring), box-shadow var(--tw-med) var(--tw-ease); }
.tw-card.interactive:hover { border-color: var(--tw-border-strong); transform: translateY(-2px); box-shadow: var(--tw-shadow-1); }
.tw-card.featured { border-color: color-mix(in srgb, var(--tw-accent) 60%, var(--tw-border)); background: linear-gradient(180deg, color-mix(in srgb, var(--tw-accent) 9%, var(--tw-surface-2)) 0%, var(--tw-surface-2) 55%); box-shadow: var(--tw-glow-accent); }
.tw-card.featured.interactive:hover { box-shadow: var(--tw-glow-accent), var(--tw-shadow-1); }
.tw-card.current { border-style: dashed; }
/* price: $24$19/ month
*/
.tw-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; }
.tw-price b { font: 600 var(--tw-text-3xl) / var(--tw-leading-tight) var(--tw-font); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--tw-fg); }
.tw-price s { font: 500 var(--tw-text-lg) / 1 var(--tw-font); color: var(--tw-subtle); text-decoration-thickness: 1.5px; }
.tw-price span { font-size: var(--tw-text-sm); color: var(--tw-muted); }
.tw-price.changed b { animation: tw-price-in var(--tw-slow) var(--tw-spring); }
@keyframes tw-price-in { from { opacity: 0; transform: translateY(8px); filter: blur(2px); } }
/* disclosure: Question
Answer