/** * Soft-card design system. * * Cards are plain white on a cool grey field, lifted by a wide, very light * shadow rather than an embossed edge. Colour is reserved for meaning: the * only saturated surface on screen is the primary button. * * Themes are explicit: `data-theme="light" | "dark"` on . There is no * `prefers-color-scheme` branch, because the user picks the theme in settings * and the choice has to survive across pages and the injected LEB2 panel. */ :root, [data-theme="light"] { --bg: #eef1f5; --surface: #ffffff; --surface-2: #f6f8fa; --sunken: #f1f4f7; --fg: #101418; --fg-2: #4a545f; --muted: #79838f; --faint: #a7b0ba; --line: #e7ebf0; --line-strong: #d8dee6; --accent: #101418; --accent-fg: #ffffff; --accent-soft: #eef1f5; --danger: #b32d1f; --danger-soft: #fdecea; --ok: #1f7a4d; --shadow-sm: 0 1px 2px rgb(16 24 40 / 0.04), 0 1px 3px rgb(16 24 40 / 0.06); --shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 8px 24px rgb(16 24 40 / 0.06); --shadow-lg: 0 2px 4px rgb(16 24 40 / 0.04), 0 20px 48px rgb(16 24 40 / 0.10); --ring: 0 0 0 3px rgb(16 20 24 / 0.10); } [data-theme="dark"] { --bg: #101315; --surface: #1c2125; --surface-2: #22272b; --sunken: #15181b; --fg: #eceef1; --fg-2: #b6bec7; --muted: #8b949e; --faint: #656d76; --line: #2c333a; --line-strong: #333b42; --accent: #eceef1; --accent-fg: #101315; --accent-soft: #22272b; --danger: #f08b7f; --danger-soft: #2c1a18; --ok: #57cf99; --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.30); --shadow: 0 1px 2px rgb(0 0 0 / 0.30), 0 8px 24px rgb(0 0 0 / 0.36); --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.30), 0 20px 48px rgb(0 0 0 / 0.48); --ring: 0 0 0 3px rgb(236 238 241 / 0.16); } /** * Shape and type tokens. * * `[data-theme]` is listed alongside `:root` because the LEB2 panel lives in a * shadow tree, where `:root` matches nothing: the theme attribute on the panel * container is the only hook there. Without this the panel loses every radius * and falls back to the browser's default serif. */ :root, [data-theme] { --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; --font: "Inter", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } * { box-sizing: border-box; } /* Buttons set `display`, which would otherwise beat the UA rule for [hidden]. */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--fg); font: 400 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; } p { margin: 0; } a { color: inherit; } .muted { color: var(--muted); } .tiny { font-size: 12px; line-height: 1.45; } /* Small all-caps label that titles a group of controls. */ .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* ── Surfaces ─────────────────────────────────────── */ .card { border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow); } .divide > * + * { border-top: 1px solid var(--line); } /* ── Buttons ──────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-sm); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background 120ms ease, box-shadow 120ms ease, opacity 120ms ease; } .btn:hover:not(:disabled) { background: var(--surface-2); } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .btn:disabled { opacity: 0.5; cursor: default; } .btn-primary { border-color: transparent; background: var(--accent); color: var(--accent-fg); } .btn-primary:hover:not(:disabled) { background: var(--accent); opacity: 0.88; } .btn-sm { padding: 6px 12px; font-size: 12px; } .btn-block { width: 100%; } .btn-ghost { border-color: transparent; background: none; box-shadow: none; color: var(--muted); } .btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--fg); } /* Circular icon button, like the small round controls in the reference. */ .btn-icon { width: 32px; height: 32px; padding: 0; border-radius: var(--r-pill); flex: none; } /* ── Form controls ────────────────────────────────── */ input[type="text"], input[type="number"], input[type="date"], input[type="time"], select { padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--fg); font: inherit; font-size: 13px; outline: none; transition: box-shadow 120ms ease, border-color 120ms ease; } input:focus-visible, select:focus-visible { border-color: var(--faint); box-shadow: var(--ring); } input::placeholder { color: var(--faint); } select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } /* Switch — used for on/off rows instead of a checkbox. */ .switch { position: relative; width: 40px; height: 24px; flex: none; appearance: none; margin: 0; border: 0; border-radius: var(--r-pill); background: var(--line-strong); cursor: pointer; transition: background 160ms ease; } .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform 160ms cubic-bezier(0.4, 0, 0.2, 1); } .switch:checked { background: var(--accent); } .switch:checked::after { transform: translateX(16px); background: var(--accent-fg); } .switch:focus-visible { outline: none; box-shadow: var(--ring); } /* Chip — a multi-select toggle, used for reminder times. */ .chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--fg-2); font-size: 12.5px; cursor: pointer; user-select: none; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .chip:hover { background: var(--surface-2); } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip::before { content: ""; width: 14px; height: 14px; flex: none; border: 1.5px solid var(--line-strong); border-radius: 5px; transition: background 120ms ease, border-color 120ms ease; } .chip:has(input:checked) { border-color: var(--accent); background: var(--accent); color: var(--accent-fg); } .chip:has(input:checked)::before { border-color: var(--accent-fg); background: var(--accent-fg); } .chip:has(input:focus-visible) { box-shadow: var(--ring); } /* Segmented control — mutually exclusive options, e.g. Light / Dark. */ .segmented { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--sunken); border: 1px solid var(--line); } .segmented label { padding: 6px 16px; border-radius: var(--r-pill); color: var(--muted); font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background 120ms ease, color 120ms ease; } .segmented input { position: absolute; opacity: 0; pointer-events: none; } .segmented label:has(input:checked) { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-sm); } /* ── Rows ─────────────────────────────────────────── */ /* A label + control on one line, with an optional hint underneath. */ .row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 0; } .row-text { min-width: 0; } .row-text .hint { margin-top: 2px; color: var(--muted); font-size: 12px; } .row-control { flex: none; }