/* ============================================================ Troop818-worker — Design Tokens ------------------------------------------------------------ Single source of truth for color, type, spacing, radius, shadow, and motion. All component CSS should consume these custom properties — never hardcode values. Spec lives in docs/DESIGN.md. Tokens here were harvested from the inline :root blocks across public/*.html and public/leader/*.html and consolidated. Future PRs migrate hand-rolled values to these tokens incrementally. ============================================================ */ :root { /* ---------------------------------------------------------- Brand colors — theme-overridable. Webmasters can override these via troop_settings.theme, which injects a :root override at page load. Built-in alternates: see docs/DESIGN.md "Theming". Default palette below is "Scout Green". ---------------------------------------------------------- */ --brand-primary: #1A3A2A; /* topbar, primary headings, deepest brand tone */ --brand-primary-hover: #1E5C35; /* solid CTA hover, active subnav text */ --brand-primary-mid: #2D7A4A; /* link color, focus ring, mid-tone accents */ --brand-primary-soft: #E8F5EE; /* tinted backgrounds (selected rows, info pills) */ --brand-accent: #D4A017; /* gold — single high-emphasis moment per screen */ --brand-accent-hover: #F0C040; /* gold hover */ --brand-accent-soft: #FBF0C8; /* gold pale — soft accent backgrounds, badges */ /* ---------------------------------------------------------- Surfaces & neutrals (warm cream system — fixed across themes) ---------------------------------------------------------- */ --surface-page: #F7F3E8; /* page background — warm cream */ --surface-card: #FFFFFF; /* card / panel surface */ --surface-muted: #EDE5CC; /* alt rows, footer, subdued surfaces */ --surface-deep: #E8DEBC; /* icon backgrounds, avatar swatches */ /* ---------------------------------------------------------- Text (warm grays — fixed across themes) ---------------------------------------------------------- */ --text-primary: #1A2018; /* body text, primary content */ --text-secondary: #4A5A44; /* secondary copy, form labels */ --text-muted: #5C6A56; /* tertiary copy, breadcrumbs, helper text — darkened to 5.2:1 on cream (WCAG 1.4.3) */ --text-on-brand: #FFFFFF; /* text on brand-primary surfaces */ /* ---------------------------------------------------------- Borders (warm tan to match cream surfaces — fixed) ---------------------------------------------------------- */ --border-soft: #E8DDB8; /* very light divider */ --border-default: #D8CFB0; /* default border (form inputs, cards) */ --border-strong: rgba(0, 0, 0, 0.16); /* ---------------------------------------------------------- Status colors (fixed across themes — semantic, not brand) ---------------------------------------------------------- */ --status-success: #2D7A4A; --status-success-soft: #E8F5EE; --status-success-ink: #1E5C35; /* dark green for text on --status-success-soft */ --status-warn: #E67E22; --status-warn-soft: #FEF3E2; --status-warn-soft-amber:#FFF4D6; /* warmer amber-soft (QB sandbox pill, pending invite) */ --status-warn-ink: #7A4A00; /* deep amber for text on warn/gold soft backgrounds */ --status-danger: #C0392B; --status-danger-soft: #FDECEA; --status-danger-ink: #7A1F15; /* deep red for text on --status-danger-soft */ --status-danger-border: #E8C2BB; /* soft red hairline border (paired with danger-soft) */ --status-success-border: #B6DBC1; /* soft green hairline border (paired with success-soft) */ /* ---------------------------------------------------------- Role pill colors (semantic — like status, fixed across themes) ---------------------------------------------------------- */ --role-treasurer-bg: #EEF2FF; --role-treasurer-fg: #4338CA; /* ---------------------------------------------------------- Typography ---------------------------------------------------------- */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Cabin', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 16px; --fs-lg: 17px; --fs-xl: 20px; --fs-h3: 22px; --fs-h2: 28px; --fs-h1: 36px; --lh-tight: 1.25; --lh-base: 1.55; --lh-loose: 1.7; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.07em; /* eyebrow / uppercase labels */ --tracking-wider: 0.10em; /* table heads, section eyebrows */ /* ---------------------------------------------------------- Spacing scale (generous — favor whitespace) ---------------------------------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ---------------------------------------------------------- Layout ---------------------------------------------------------- */ --container-max: 1100px; /* unified container width for topbar, subnav, page wraps, hero */ /* ---------------------------------------------------------- Radius ---------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; /* ---------------------------------------------------------- Form controls — input padding standard (DESIGN.md §forms) ---------------------------------------------------------- */ --input-pad-y: 10px; --input-pad-x: 13px; /* ---------------------------------------------------------- Spinners — two canonical sizes inline: small loaders embedded in row/pill contexts block: centered full-section loaders ("Loading…") ---------------------------------------------------------- */ --spinner-size-inline: 22px; --spinner-border-inline: 2.5px; --spinner-size-block: 32px; --spinner-border-block: 3px; /* ---------------------------------------------------------- Elevation (soft — never both shadow + border on the same element) ---------------------------------------------------------- */ --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.04); --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-toast: 0 6px 20px rgba(0, 0, 0, 0.18); /* ---------------------------------------------------------- Motion (favor short, calm transitions) ---------------------------------------------------------- */ --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ---------------------------------------------------------- Legacy aliases — preserved for HTML pages authored before the modern token names landed. They reference the modern tokens so troop theming via --brand-* overrides still propagates correctly. See M5 in audit-batch-4 commit. New code should prefer the modern names above. ---------------------------------------------------------- */ --green-deep: var(--brand-primary); --green-dark: var(--brand-primary-hover); --green-mid: var(--brand-primary-mid); --green-pale: var(--brand-primary-soft); --gold: var(--brand-accent); --gold-light: var(--brand-accent-hover); --gold-pale: var(--brand-accent-soft); --cream: var(--surface-page); --cream-dark: var(--surface-muted); --cream-deep: var(--surface-deep); --white: var(--surface-card); --ink: var(--text-primary); --ink-soft: var(--text-secondary); --ink-muted: var(--text-muted); --line: var(--border-default); --line-soft: var(--border-soft); --red: var(--status-danger); --red-pale: var(--status-danger-soft); --red-deep: #8C2A1F; /* darker red used by error-log danger states */ --amber: var(--status-warn); --amber-pale: var(--status-warn-soft); } /* ── Back navigation link — sitewide pattern ────────────────────── Usage: ← Back to X Positioned above the page H1. 44×44 touch target via min-height + padding. ────────────────────────────────────────────────────────────────── */ .back-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 12px 0; font-size: var(--fs-sm); font-weight: 600; color: var(--text-secondary); text-decoration: none; letter-spacing: var(--tracking-wide); text-transform: uppercase; transition: color var(--t-fast); margin-bottom: 4px; } .back-link:hover { color: var(--brand-primary-hover); } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 8px; top: 8px; z-index: 1000; background: var(--brand-primary-mid, #1A3A2A); color: white; padding: 8px 12px; border-radius: 4px; text-decoration: none; } body { font-size: var(--fs-base); } button:focus-visible, a:focus-visible { outline: 2px solid var(--brand-primary-mid, #1A3A2A); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-base: 0ms; --t-slow: 0ms; } }