/* ========================================================================== BOLO Texas — design tokens -------------------------------------------------------------------------- Every colour, size and layer used by base.css and components.css is defined here. Pages should never hard-code a hex value; use a token instead so that dark mode keeps working. Theme resolution order: 1. or (manual toggle) 2. prefers-color-scheme (when no data-theme attribute is set) Breakpoints (custom properties cannot be used in media queries, so these are a convention): 600px (large phone / small tablet), 900px (desktop layout, bottom tab bar disappears), 1200px (wide desktop). ========================================================================== */ /* Fonts are imported here so every page gets them without extra markup. Pages may additionally add hints for speed. */ @import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..800;1,9..144,400..600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap"); :root { color-scheme: light; /* --- Colour: surfaces and ink (light theme) --- */ --bg: #f7f4ee; /* page background, warm cream */ --surface: #fffdf8; /* cards, panels, header */ --surface-2: #efeadf; /* inset areas, placeholders, hover fills */ --ink: #14213a; /* primary text, near-black navy */ --ink-2: #36425c; /* secondary text, deks */ --muted: #5d6578; /* meta text, captions (4.5:1 on --bg) */ --line: #ddd6c6; /* hairline borders */ --line-strong: #c4bba6; /* input borders, dividers that must be seen */ /* --- Colour: accents --- */ --accent: #e8622a; /* Texas sunset orange: CTAs, live, highlights */ --accent-ink: #1a0f08; /* text placed on top of --accent (5.5:1) */ --accent-text: #b4441a; /* orange that is legible as text on --bg */ --accent-soft: #fbe6da; /* tinted background for accent areas */ --ok: #5f8a6e; /* sage: open, available, confirmed */ --ok-text: #3c6a4e; --ok-soft: #e3eee6; --alert: #c8321f; /* alert red: warnings, closures, errors */ --alert-text: #b02a19; --alert-soft: #f9e1dc; --live: #e8622a; /* pulsing "live" dot */ --focus: #b4441a; /* focus ring */ /* --- Colour: fixed values for text over photographs (same in both themes) --- */ --on-media: #ffffff; --on-media-muted: rgba(255, 255, 255, 0.82); --scrim: linear-gradient(to top, rgba(9, 14, 28, 0.88) 0%, rgba(9, 14, 28, 0.55) 38%, rgba(9, 14, 28, 0) 72%); --scrim-top: linear-gradient(to bottom, rgba(9, 14, 28, 0.6) 0%, rgba(9, 14, 28, 0) 100%); --backdrop: rgba(9, 14, 28, 0.55); /* --- Typography --- */ --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif; --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-xs: 0.75rem; /* 12px: kickers, labels */ --fs-sm: 0.875rem; /* 14px: meta, small UI */ --fs-base: 1rem; /* 16px: body */ --fs-md: 1.125rem; /* 18px: deks, card titles */ --fs-lg: 1.375rem; /* 22px: section titles */ --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); /* h2 */ --fs-2xl: clamp(1.875rem, 1.3rem + 2.4vw, 2.75rem); /* h1 on inner pages */ --fs-display: clamp(2.5rem, 1.4rem + 5vw, 4.75rem); /* front-page hero */ --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.6; --tracking-kicker: 0.12em; /* --- Spacing (4px base) --- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --gutter: 1rem; /* page side padding; grows at 600px */ --gap: 0.75rem; /* default grid gap; grows at 900px */ /* --- Radius --- */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px; /* --- Shadows --- */ --shadow-sm: 0 1px 2px rgba(20, 33, 58, 0.06); --shadow-md: 0 6px 20px -6px rgba(20, 33, 58, 0.16); --shadow-lg: 0 20px 50px -12px rgba(20, 33, 58, 0.28); /* --- Layout --- */ --container: 1200px; --container-narrow: 720px; --container-wide: 1440px; --header-h: 56px; --tabbar-h: 60px; /* --- Layers --- */ --z-base: 1; --z-sticky: 50; --z-tabbar: 100; --z-header: 110; /* above the tab bar so the picker sheet covers it */ --z-dropdown: 200; --z-backdrop: 290; --z-drawer: 300; --z-modal: 400; --z-toast: 500; /* --- Motion --- */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-fast: 120ms; --dur: 220ms; --dur-slow: 400ms; } @media (min-width: 600px) { :root { --gutter: 1.5rem; } } @media (min-width: 900px) { :root { --gap: 1rem; --header-h: 64px; } } /* -------------------------------------------------------------------------- Dark theme. The same block appears twice on purpose: once for the manual toggle and once for the system preference when no manual choice was made. Keep the two in sync when editing. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1422; --surface: #172033; --surface-2: #212c45; --ink: #f4efe4; --ink-2: #d2ccbe; --muted: #9ea6b8; --line: #2b3650; --line-strong: #43506e; --accent: #f07a45; --accent-ink: #1a0f08; --accent-text: #f79668; --accent-soft: #3a2519; --ok: #82b396; --ok-text: #9ccbaf; --ok-soft: #1d3329; --alert: #ef6351; --alert-text: #f78b7c; --alert-soft: #3d1c18; --live: #f07a45; --focus: #f79668; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 20px -6px rgba(0, 0, 0, 0.55); --shadow-lg: 0 20px 50px -12px rgba(0, 0, 0, 0.7); --backdrop: rgba(0, 0, 0, 0.65); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0e1422; --surface: #172033; --surface-2: #212c45; --ink: #f4efe4; --ink-2: #d2ccbe; --muted: #9ea6b8; --line: #2b3650; --line-strong: #43506e; --accent: #f07a45; --accent-ink: #1a0f08; --accent-text: #f79668; --accent-soft: #3a2519; --ok: #82b396; --ok-text: #9ccbaf; --ok-soft: #1d3329; --alert: #ef6351; --alert-text: #f78b7c; --alert-soft: #3d1c18; --live: #f07a45; --focus: #f79668; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 6px 20px -6px rgba(0, 0, 0, 0.55); --shadow-lg: 0 20px 50px -12px rgba(0, 0, 0, 0.7); --backdrop: rgba(0, 0, 0, 0.65); } }