/* Design tokens: the only file allowed to hold raw color, size, spacing, radius, shadow, and motion values (SPEC §5). Reviewed as design/token-sheet.html. Every color token is light-dark(, ), so both values sit side by side (SPEC §5, §6). The page follows prefers-color-scheme; there is no manual toggle. */ /* Heading font (SPEC §5, DECISIONS #44): Plus Jakarta Sans by Tokotype, SIL OFL 1.1 (license in public/fonts/). Self-hosted variable WOFF2, Latin subset; nothing is requested from Google. The URL is relative to this file, so it works when served (/fonts/…) and on the design pages. Preloaded in each page's . */ @font-face { font-family: "Plus Jakarta Sans"; src: url("../fonts/plus-jakarta-sans-latin-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: light dark; /* ---------- Color: surfaces ---------- */ --color-bg: light-dark(#F6FAF9, #0F1F1F); /* page */ --color-surface: light-dark(#FFFFFF, #16292A); /* cards, header, dialogs, inputs */ --color-surface-muted: light-dark(#E3EEEC, #1D3434); /* photo placeholder, neutral pill, disabled */ --color-overlay: light-dark(rgb(15 31 31 / 0.5), rgb(0 0 0 / 0.6)); /* dialog backdrop */ /* ---------- Color: text ---------- */ --color-text: light-dark(#12302F, #EAF4F2); --color-text-muted: light-dark(#4D6564, #A3BDBA); /* help text, meta, captions */ --color-text-disabled: light-dark(#7A9593, #6E8C89); /* exempt from contrast, still legible */ --color-price: light-dark(#B8363C, #FF8F86); /* prices and bid amounts; AA coral */ /* ---------- Color: lines ---------- */ --color-border: light-dark(#D7E5E3, #25403F); /* dividers, table rules (decorative) */ --color-border-strong: light-dark(#7A9593, #6E8C89); /* input edges: 3:1 against surface and page */ /* ---------- Color: accent (teal) ---------- */ --color-accent: light-dark(#036765, #5CC8C0); /* primary button, avatar, current nav */ --color-accent-hover: light-dark(#024E4D, #84DAD3); --color-accent-active: light-dark(#013B3A, #A5E4DF); /* primary button pressed */ --color-accent-soft: light-dark(#E1F1EF, #173A39); /* secondary hover, selected radio card */ --color-accent-soft-active: light-dark(#C9E6E2, #1F4A48); /* secondary and quiet buttons pressed */ --color-on-accent: light-dark(#FFFFFF, #0F1F1F); --color-link: light-dark(#036765, #5CC8C0); --color-focus: light-dark(#036765, #5CC8C0); /* ---------- Color: status (text color works on its soft fill and on surface) ---------- */ --color-success: light-dark(#0C5554, #A6E6E0); /* winning, approved, won */ --color-success-soft: light-dark(#D3EEEC, #123735); --color-warning: light-dark(#6E4B00, #FFE08A); /* ending soon, proof due, amount short */ --color-warning-soft: light-dark(#FFF0C2, #3A3112); --color-danger: light-dark(#9E2A30, #FFB3B0); /* outbid, rejected, cancelled, errors */ --color-danger-soft: light-dark(#FBDDDD, #46201F); --color-danger-hover: light-dark(#7F1F25, #FFC9C6); /* danger button hover */ --color-danger-active: light-dark(#651419, #FFDCDA); /* danger button pressed */ --color-on-danger: light-dark(#FFFFFF, #0F1F1F); /* text on a danger button */ /* ---------- Color: special surfaces ---------- */ --color-banner: light-dark(#FFE08A, #FFE08A); /* phase banner: butter in both modes */ --color-on-banner: light-dark(#12302F, #0F1F1F); /* The calm phase banner (submissions open, bidding open, ended): butter in light mode; in dark mode a dark butter-tinted surface with a butter border and light text. Ending soon keeps the bright butter above in both modes so urgency stands out. */ --color-banner-calm: light-dark(#FFE08A, #3A3320); --color-banner-calm-border: light-dark(#FFE08A, #FFE08A); --color-on-banner-calm: light-dark(#12302F, #FDF3D0); --color-inverse: light-dark(#12302F, #EAF4F2); /* toast */ --color-on-inverse: light-dark(#F6FAF9, #0F1F1F); /* The demo bar: dark in both modes (darker than the dark page), with butter hazard stripes, so it's the most distinct thing on the page either way (owner, visible changes A). */ --color-demo-bar: light-dark(#12302F, #081414); --color-on-demo: light-dark(#F6FAF9, #F6FAF9); /* 13.4:1 and 17.8:1 */ --color-demo-stripe: light-dark(#FFE08A, #FFE08A); --color-danger-on-demo: light-dark(#FFB3B0, #FFB3B0); /* Restore's outline and text: 8.3:1 and 11:1 */ /* Controls on the bar: the dark-mode control colors in both modes, since the bar is dark in both (owner, A1 review). Tinted fill and outline, teal text; the current phase filled teal. */ --color-demo-control: light-dark(#16292A, #16292A); --color-demo-control-hover: light-dark(#173A39, #173A39); --color-demo-control-border: light-dark(#6E8C89, #6E8C89); /* 3.9:1 and 5.2:1 on the bar */ --color-demo-control-text: light-dark(#5CC8C0, #5CC8C0); /* 7.6:1 on the control */ --color-demo-control-value: light-dark(#EAF4F2, #EAF4F2); /* the select's value: 13.5:1 */ --color-demo-control-icon: light-dark(#A3BDBA, #A3BDBA); --color-demo-current: light-dark(#5CC8C0, #5CC8C0); --color-on-demo-current: light-dark(#0F1F1F, #0F1F1F); /* 8.5:1 */ --color-crown: light-dark(#FFD86B, #FFD86B); /* top-bidder crown fill */ --color-crown-stroke: light-dark(#6E4B00, #6E4B00); /* ---------- Color: brand (fixed; only on the light mark tile and hero card) ---------- */ --color-brand-teal: light-dark(#036765, #036765); /* sampled from the event mark */ --color-brand-coral: light-dark(#F86256, #F86256); /* sampled; 3.06:1 on white, never body text */ --color-brand-butter: light-dark(#FFD86B, #FFD86B); /* hero swash */ --color-mark-tile: light-dark(#FEFEFE, #FEFEFE); /* the art's own white */ --color-mark-backing: light-dark(transparent, #FEFEFE); /* behind the header mark: none in light, the art's white in dark (#39) */ /* ---------- Type: families ---------- */ /* System fonts for body, UI, and numbers. Plus Jakarta Sans only for the hero lockup and the display and heading roles; the system stack is its fallback. */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-heading: "Plus Jakarta Sans", var(--font-sans); /* Prices, bid amounts, and counts line up: font-variant-numeric: var(--figures-amount). */ --figures-amount: tabular-nums; /* ---------- Type: scale (building blocks; components use the roles below) ---------- */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-md: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.375rem; /* 22 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem); /* fluid 28 → 36, max from ~900px */ --text-4xl: clamp(2.25rem, 1.6rem + 2.8vw, 3rem); /* fluid 36 → 48, max from ~800px */ --text-5xl: clamp(2.5rem, 1.5rem + 4.5vw, 4.5rem); /* fluid 40 → 72, hero lockup only */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-heavy: 800; --leading-lockup: 0.95; /* the two stacked words of the hero lockup */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --tracking-tight: -0.015em; /* display and heading-1 */ --tracking-lockup: -0.03em; /* hero lockup */ --tracking-label: 0.08em; /* uppercase eyebrow labels */ /* ---------- Type: roles (use with the font shorthand: font: var(--type-body)) ---------- */ --type-hero: var(--weight-heavy) var(--text-5xl)/var(--leading-lockup) var(--font-heading); /* hero lockup words; with --tracking-lockup */ --type-display: var(--weight-heavy) var(--text-4xl)/var(--leading-tight) var(--font-heading); /* Home headline */ --type-heading-1: var(--weight-heavy) var(--text-2xl)/var(--leading-tight) var(--font-heading); /* page titles */ --type-heading-2: var(--weight-bold) var(--text-xl)/var(--leading-snug) var(--font-heading); /* section headings */ --type-heading-3: var(--weight-bold) var(--text-lg)/var(--leading-snug) var(--font-heading); /* tile titles, card headings */ --type-amount: var(--weight-heavy) var(--text-3xl)/var(--leading-tight) var(--font-sans); /* item price on detail page; with --figures-amount */ --type-body-lg: var(--weight-regular) var(--text-lg)/var(--leading-normal) var(--font-sans); /* lead paragraphs */ --type-body: var(--weight-regular) var(--text-md)/var(--leading-normal) var(--font-sans); /* body, inputs */ --type-label: var(--weight-semibold) var(--text-sm)/var(--leading-snug) var(--font-sans); /* form labels, nav, table headers */ --type-button: var(--weight-semibold) var(--text-md)/1 var(--font-sans); /* buttons */ --type-caption: var(--weight-regular) var(--text-sm)/var(--leading-normal) var(--font-sans); /* help text, meta */ --type-badge: var(--weight-bold) var(--text-xs)/var(--leading-normal) var(--font-sans); /* status pills */ --type-overline: var(--weight-bold) var(--text-xs)/1 var(--font-sans); /* uppercase eyebrows; add --tracking-label */ /* ---------- Spacing (4px steps) ---------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ /* ---------- Sizes ---------- */ --size-px: 1px; /* one CSS pixel: the visually-hidden pattern */ --size-target: 2.75rem; /* 44: minimum height for buttons and inputs */ --size-target-sm: 2.25rem; /* 36: small buttons in dense rows (tables); still above WCAG's 24 */ --size-icon-sm: 1rem; /* 16: in pills and small buttons */ --size-icon-md: 1.25rem; /* 20: in buttons, banners, toasts */ --size-icon-lg: 1.5rem; /* 24: standalone, empty states (the drawing grid) */ --size-toast: 28rem; /* toast max width */ --size-dialog: 32rem; /* dialog max width */ --size-avatar-sm: 1.75rem; /* 28: bid history */ --size-avatar-md: 2.25rem; /* 36: header */ --size-avatar-lg: 3rem; /* 48: profile menu */ --size-mark-header: 2rem; /* 32: org mark in the header */ --size-lockup-mark: calc(var(--text-5xl) * 2.6); /* event mark in the hero lockup, scaled with the words */ --size-tile-min: 16rem; /* item grid: tiles wrap at this width, no breakpoints */ --size-charity-logo: 10rem; /* 160: charity logos on Home and giving (files are 2x) */ --size-step-number: 2.5rem; /* 40: the numbered circles in How to participate */ --size-step-number-sm: 1.75rem; /* 28: the same circles in the welcome dialog's steps */ --size-content: 72rem; /* page max width */ --size-content-narrow: 40rem; /* forms, reading text */ /* ---------- Lines ---------- */ --border-thin: 1px; --border-thick: 2px; /* inputs, secondary button ring, selected radio card */ --focus-width: 3px; --focus-offset: 2px; /* ---------- Radius ---------- */ --radius-sm: 0.5rem; /* 8: small chips, table cells */ --radius-md: 0.75rem; /* 12: inputs, mark tiles */ --radius-lg: 1.125rem; /* 18: cards, item tiles */ --radius-xl: 1.5rem; /* 24: dialogs, hero card */ --radius-pill: 999px; /* buttons, pills, avatars */ /* ---------- Shadow (soft in light; a hairline edge in dark, where shadows vanish) ---------- */ --shadow-sm: 0 1px 3px light-dark(rgb(18 48 47 / 0.08), rgb(0 0 0 / 0.3)), 0 0 0 1px light-dark(transparent, #25403F); --shadow-md: 0 2px 6px light-dark(rgb(18 48 47 / 0.08), rgb(0 0 0 / 0.3)), 0 12px 28px light-dark(rgb(18 48 47 / 0.08), rgb(0 0 0 / 0.3)), 0 0 0 1px light-dark(transparent, #25403F); --shadow-lg: 0 8px 16px light-dark(rgb(18 48 47 / 0.1), rgb(0 0 0 / 0.4)), 0 24px 48px light-dark(rgb(18 48 47 / 0.14), rgb(0 0 0 / 0.5)), 0 0 0 1px light-dark(transparent, #2F4E4C); /* ---------- Motion ---------- */ --duration-fast: 120ms; /* hover, press */ --duration-base: 200ms; /* toasts, tabs */ --duration-slow: 320ms; /* dialogs, carousel */ --duration-spin: 900ms; /* one turn of the loading spinner */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-exit: cubic-bezier(0.4, 0, 1, 1); /* ---------- Breakpoints ---------- Layouts are intrinsic by default (grids wrap at --size-tile-min). When something needs a condition (the nav collapsing to a menu), use one of these two values, and only inside an @media or @container condition, in range syntax: @media (width < 40rem) { … } @media (width >= 64rem) { … } CSS can't read custom properties in media queries, so the values are written out there; check:tokens allows exactly these two, and only in conditions. */ --breakpoint-sm: 40rem; /* 640: below this, phone layout (nav becomes a menu) */ --breakpoint-lg: 64rem; /* 1024: at or above this, wide layout (side-by-side detail page) */ /* ---------- Layers ---------- */ --layer-header: 10; --layer-demo: 20; --layer-dialog: 30; --layer-toast: 40; } /* SPEC §6: respect reduced motion. Components animate only through these tokens. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-spin: 0ms; /* the spinner stays still; the label still says it's working */ } }