/* shared/base_colors.css */ /* base_colors.css — the colour library: descriptive names mapped to values, and nothing else. Nothing outside colors.css should reference these; a component asks for a semantic token (--accent, --line), never a hue. The cornflower system from the July 2026 design workshop (docs/design-system.md). Neutrals are cool-biased, never flat grey. */ :root { --white: #ffffff; --gray-25: #fafbfd; --gray-50: #f8f9fb; --gray-100: #e4e6ee; --gray-150: #dbdee8; --gray-200: #d5d8e3; --gray-300: #a5a9b7; --gray-350: #9a9dab; --gray-400: #949aad; --gray-450: #767b8d; --gray-500: #666a76; --mist: #eceef3; --slate-600: #4d5366; --slate-650: #474c5e; --slate-700: #2f323e; --slate-800: #16171c; --slate-850: #121318; --slate-900: #0b0c0f; --ink: #1b1c22; --midnight: #0a1022; --cornflower-700: #1d4fd7; --cornflower-600: #2563eb; --cornflower-400: #669cff; --cornflower-300: #8ab5ff; --cornflower-250: #9dbfff; --emerald-600: #1f9d63; --emerald-400: #43c489; /* Amber is the one status hue split in two: the bright value paints surfaces (tints, borders, dots) and could never carry text on a light background; the dark golden one is for words and icons on those tints (AA in both themes). In dark mode one bright value is safe for both jobs, so --warn and --warn-ink coincide there. */ --amber-500: #eab308; --amber-400: #f2a33c; --amber-700: #a16207; --rose-600: #d5484f; --rose-400: #ef6a71; --shade-soft: rgb(20 20 30 / 5%); --shade: rgb(20 20 30 / 7%); --shade-pop: rgb(20 20 30 / 8%); --shade-pop-far: rgb(20 20 30 / 14%); --night-soft: rgb(0 0 0 / 40%); --night: rgb(0 0 0 / 45%); --night-pop: rgb(0 0 0 / 50%); --night-pop-far: rgb(0 0 0 / 55%); } /* shared/colors.css */ /* colors.css — semantic tokens mapped to base_colors.css, and the one place light and dark are decided. `color-scheme: light dark` plus `light-dark()` means one declaration per token instead of a light block and a duplicate dark block: change a colour here and both themes follow. The theme toggle stamps data-theme on ; pinning color-scheme there is what makes light-dark() (and bare native widgets — the .mx matrix checkboxes) follow the choice rather than the OS. Because those two rules only set color-scheme, every token below is authored exactly once. */ :root { color-scheme: light dark; --bg: light-dark(var(--gray-50), var(--slate-900)); --surface: light-dark(var(--white), var(--slate-800)); --surface-2: light-dark(var(--gray-25), var(--slate-850)); --line: light-dark(var(--gray-100), var(--slate-700)); --line-strong: light-dark(var(--gray-200), var(--slate-650)); --field-line: light-dark(var(--gray-150), var(--slate-600)); --text: light-dark(var(--ink), var(--mist)); --text-muted: light-dark(var(--gray-500), var(--gray-300)); --text-faint: light-dark(var(--gray-450), var(--gray-400)); /* --on-accent flips to dark ink in dark mode so primary buttons clear AA in both themes. */ --accent: light-dark(var(--cornflower-600), var(--cornflower-400)); --accent-strong: light-dark(var(--cornflower-700), var(--cornflower-300)); --accent-ink: light-dark(var(--cornflower-700), var(--cornflower-250)); --on-accent: light-dark(var(--white), var(--midnight)); --accent-weak: color-mix(in srgb, var(--accent) light-dark(9%, 14%), transparent); --accent-weak-2: color-mix(in srgb, var(--accent) light-dark(16%, 24%), transparent); --ok: light-dark(var(--emerald-600), var(--emerald-400)); --ok-weak: color-mix(in srgb, var(--ok) light-dark(11%, 16%), transparent); --warn: light-dark(var(--amber-500), var(--amber-400)); --warn-ink: light-dark(var(--amber-700), var(--amber-400)); --warn-weak: color-mix(in srgb, var(--warn) light-dark(13%, 16%), transparent); --danger: light-dark(var(--rose-600), var(--rose-400)); --danger-weak: color-mix(in srgb, var(--danger) light-dark(10%, 16%), transparent); --neutral-pill: light-dark(var(--gray-500), var(--gray-350)); --shadow: 0 1px 2px light-dark(var(--shade-soft), var(--night-soft)), 0 8px 24px light-dark(var(--shade), var(--night)); /* The one token light-dark() can't fold on its own: the far layer's blur and offset differ between themes, and light-dark() substitutes colours, not lengths. So the geometry — and only the geometry — is picked per scheme, and the two theme hooks below re-pick it. */ --shadow-pop-far: 0 12px 32px var(--shade-pop-far); --shadow-pop: 0 4px 10px light-dark(var(--shade-pop), var(--night-pop)), var(--shadow-pop-far); /* Legacy aliases (buttons were restyled to the accent system; these keep stray rules working until the sweep finishes). */ --accent-btn: var(--accent); --btn-shadow: none; --btn-primary-bg: var(--accent); --btn-primary-fg: var(--on-accent); --fg: var(--text); --muted: var(--text-muted); --accent-fg: var(--on-accent); --nav-text: var(--text-muted); } @media (prefers-color-scheme: dark) { :root { --shadow-pop-far: 0 16px 40px var(--night-pop-far); } } :root[data-theme="light"] { color-scheme: light; --shadow-pop-far: 0 12px 32px var(--shade-pop-far); } :root[data-theme="dark"] { color-scheme: dark; --shadow-pop-far: 0 16px 40px var(--night-pop-far); } /* shared/type_scale.css */ /* type_scale.css — the one type scale (rem): .75 .8125 .875 1 1.125 1.375 2 2.75. Steps are named by weight, never by use, so a component asks for a step rather than inventing a number. */ :root { --fs-3xs: .75rem; --fs-2xs: .8125rem; --fs-xs: .875rem; --fs-s: 1rem; --fs-m: 1.125rem; --fs-l: 1.375rem; --fs-xl: 2rem; --fs-2xl: 2.75rem; } /* shared/reset.css */ * { box-sizing: border-box; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* shared/page.css */ body { margin: 0; background: var(--bg); color: var(--fg); font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; } main { max-width: 620px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; } /* shared/typography.css */ h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .35rem; } h2 { font-size: 1.1rem; margin: 2rem 0 .75rem; } p { margin: .5rem 0; } a { color: var(--accent); } .muted { color: var(--muted); } /* shared/meta_icon.css */ .meta-icon { fill: currentColor; height: 1em; vertical-align: -.125em; width: 1.125em; } /* shared/row.css */ .rows { border-top: 1px solid var(--line); margin-top: 1.25rem; } .row { display: flex; align-items: center; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--line); } .row .grow { flex: 1; } /* A label used as a row's main text (the order-edit quantity rows) reads as body text, not as the small muted form label. */ .row > label.grow { color: inherit; font-size: inherit; margin: 0; } /* shared/page_header.css */ .page-header { align-items: baseline; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; margin-bottom: .35rem; } .page-header h1 { margin-bottom: 0; } .page-sub { margin-top: 0; } /* shared/price.css */ .price { font-variant-numeric: tabular-nums; } /* shared/input_number.css */ input[type=number] { width: 4.5rem; padding: .4rem .5rem; font: inherit; color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 6px; } /* shared/button.css */ /* Buttons (workshop reference): quiet neutral default — surface fill, line-strong hairline, no shadow; the primary is the one cornflower fill, with --on-accent text so it clears AA in both themes. */ button, a.button { margin-top: 1.25rem; padding: .38rem .8rem; font: inherit; font-size: .8125rem; font-weight: 550; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; line-height: 1.4; text-decoration: none; transition: border-color .12s, background .1s, transform .05s; } button:hover, a.button:hover { border-color: var(--text-faint); } button:active, a.button:active { transform: translateY(.5px); } button:disabled { opacity: .5; cursor: default; } /* shared/ref_mono.css */ .ticket, body.buyer-journey .share-link a { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .95rem; } /* shared/status_text.css */ .ok { color: var(--ok); font-weight: 600; } /* shared/pill.css */ .pill { display: inline-block; padding: .1rem .55rem; border: 1px solid var(--line); border-radius: 99px; font-size: .8rem; color: var(--muted); text-decoration: none; white-space: nowrap; } /* shared/qty.css */ .qty { display: flex; align-items: center; gap: .35rem; } /* The input matches the step buttons' 2rem height — a taller box between two smaller squares reads as broken, not as a control. The selector out-specifies the journey-wide input padding (0,1,2): WebKit refuses to shrink an input below its padding box, so the padding must actually be 0 here, not merely overridden on height. */ .qty input[type=number], body.buyer-journey form:not([data-checkout]) .qty input[type=number] { box-sizing: border-box; height: 2rem; margin: 0; padding: 0 .3rem; text-align: center; } button.step { box-sizing: border-box; margin: 0; padding: 0; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; flex: none; line-height: 1; border-radius: 8px; font-size: 1.1rem; } button.step:disabled { opacity: .35; cursor: default; filter: none; } /* A quiet round wash, matching the event page's — it was wearing the accent fill and competing with the page's actual primary action. No outline: the fill is the affordance, and a ring around every ± made the row read as a toolbar. Same bargain as the fields — the boundary appears only when the reader has asked their OS for more contrast. */ body.buyer-journey button.step { background: color-mix(in srgb, var(--fg) 6%, var(--journey-card)); border: 0; border-radius: 999px; color: var(--fg); font-weight: 400; } @media (prefers-contrast: more) { body.buyer-journey button.step { border: 1px solid var(--control-line); } } input.stepped { text-align: center; appearance: textfield; -moz-appearance: textfield; } input.stepped::-webkit-outer-spin-button, input.stepped::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* shared/button_busy.css */ button.busy { color: transparent; position: relative; pointer-events: none; } button.busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1em; height: 1em; border: 2px solid var(--text-muted); border-top-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* shared/button_variants.css */ button.primary, a.button.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } button.primary:hover, a.button.primary:hover { border-color: var(--accent); filter: brightness(1.07); } /* Destructive buttons darken the danger token so white text clears AA in both themes (the light --danger is a text tone, too light for a solid fill). */ button.danger, a.button.danger { background: color-mix(in srgb, var(--danger), #000 28%); color: #fff; border-color: transparent; } button.danger:hover, a.button.danger:hover { background: color-mix(in srgb, var(--danger), #000 34%); } button.subtle, a.button.subtle { background: transparent; border-color: var(--line-strong); color: var(--text); } button.subtle:hover, a.button.subtle:hover { background: var(--surface-2); color: var(--text); } button.ghost, a.button.ghost { background: transparent; border-color: transparent; color: var(--text-muted); } button.ghost:hover, a.button.ghost:hover { background: var(--accent-weak); color: var(--text); } .pill.danger, a.danger { color: var(--danger); } .pill.primary { background: var(--accent-btn); border-color: var(--accent-btn); color: var(--on-accent); } /* shared/form_fields.css */ input[type=text], input[type=email], input[type=password], input[type=search], input[type=date], input[type=time], input[type=datetime-local], input[type=url], input[type=tel], textarea, select { padding: .45rem .6rem; font: inherit; color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 6px; } textarea { width: 100%; min-height: 9rem; resize: vertical; } /* File pickers wear the same frame as every other field, with the native browse control restyled as a small ghost button. */ input[type=file] { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: inherit; font: inherit; padding: .45rem .6rem; width: 100%; } input[type=file]::file-selector-button { background: transparent; border: 1px solid var(--line-strong); border-radius: 6px; color: inherit; cursor: pointer; font: inherit; margin-right: .7rem; padding: .2rem .7rem; } input[type=file]::file-selector-button:hover { border-color: var(--accent); } /* shared/select.css */ /* Native