/** * USAWS Compact UI - Design Tokens (2026 redesign) * * Material role model re-toned to the USAWS palette: Navy #000f6a, * Burgundy #6d0800, Green #007203, Paper #eef1f9 (cool ramp). * Light is the default; dark applies via * (set server-side from the theme cookie, see App\Helpers\Theme). * Semantic pairs use var() alias indirection so dark mode re-tones * every component from one definition. * * The "Legacy aliases" block at the bottom maps the old * variables.css token names onto the new roles so views that still * reference --color-* / --font-* keep working and re-theme. * Source of truth for the design: public_html/prototype-compact-b.htm * (approved Sample B, 2026-09-01). */ :root { color-scheme: light; /* ── Material roles: primary (USAWS navy) ─────────────── */ --md-primary: #000f6a; --md-on-primary: #ffffff; --md-primary-container: #dde3ff; --md-on-primary-container: #000b46; /* ── Material roles: secondary (USAWS burgundy) ───────── */ --md-secondary: #6d0800; --md-on-secondary: #ffffff; --md-secondary-container: #ffdad2; --md-on-secondary-container: #400100; /* ── Material roles: tertiary (USAWS green) ───────────── */ --md-tertiary: #007203; --md-on-tertiary: #ffffff; --md-tertiary-container: #cdeecd; --md-on-tertiary-container: #002201; /* ── Material roles: error ────────────────────────────── */ --md-error: #b91c1c; --md-on-error: #ffffff; --md-error-container: #ffdad6; --md-on-error-container: #410002; /* ── Surfaces: cool navy-tinted ramp off USAWS Paper ──── */ --md-surface: #eef1f9; --md-surface-container-lowest: #ffffff; --md-surface-container-low: #f6f8fc; --md-surface-container: #e7ebf4; --md-surface-container-high: #dfe4ef; --md-surface-container-highest: #d7ddea; --md-on-surface: #191c22; --md-on-surface-variant: #43474f; --md-outline: #737780; --md-outline-variant: #c4c9d4; --md-inverse-surface: #2e3038; --md-inverse-on-surface: #f0f1f7; --md-scrim: rgba(0,0,0,.4); /* ── Brand constants (identity, never flip per theme) ─── */ --usaws-navy: #000f6a; --usaws-burgundy: #6d0800; --usaws-green: #007203; /* ── Short aliases used by the component layer ────────── */ --bg: var(--md-surface); --surface: var(--md-surface-container-lowest); --stripe: var(--md-surface-container-low); --text: var(--md-on-surface); --text-muted: #5a5f6a; --border: var(--md-outline-variant); /* ── Subject colors (solid + container tint pairs) ────── */ --webdev: #0e7490; --webdev-c: #d0ecf4; --math: #2d5ba9; --math-c: #d9e4f5; --science: #1d8348; --science-c: #d3efde; --ela: #9b4dca; --ela-c: #eedff7; /* ── Semantic (solid + container tint pairs) ──────────── */ --success: #007203; --success-c: #d8efd4; --warning: #8a5a00; --warning-c: #fbeccb; --error: #b91c1c; --error-c: #ffdad6; --info: #21618c; --info-c: #d6eaf8; --md-success: var(--success); --md-success-container: var(--success-c); --md-warning: var(--warning); --md-warning-container: var(--warning-c); --md-info: var(--info); --md-info-container: var(--info-c); /* ── Shape scale (Material) ───────────────────────────── */ --shape-xs: 4px; --shape-sm: 8px; --shape-md: 12px; --shape-lg: 16px; --shape-full: 999px; /* ── Elevation ────────────────────────────────────────── */ --elev-1: 0 1px 2px rgba(9,14,40,.10), 0 1px 3px 1px rgba(9,14,40,.06); --elev-2: 0 1px 2px rgba(9,14,40,.12), 0 2px 6px 2px rgba(9,14,40,.08); /* ── Type: chosen for low-resolution density. Inter: screen-first UI face, tall x-height, holds at 12-13px. Bitter: slab serif built for low-res screens; sturdy strokes where thin serifs dither at ~100dpi. JetBrains Mono: tall x-height, unambiguous 0/O 1/l/I. ───── */ --font-display: 'Bitter', Georgia, serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace; /* ── Motion ───────────────────────────────────────────── */ --ease-emphasized: cubic-bezier(.2, 0, 0, 1); --dur-short: 160ms; } [data-theme="dark"] { color-scheme: dark; --md-primary: #a8b3e6; --md-on-primary: #00136e; --md-primary-container: #26307c; --md-on-primary-container: #d5daf2; --md-secondary: #e8a294; --md-on-secondary: #5f0400; --md-secondary-container: #6e1a10; --md-on-secondary-container: #f0d2ca; --md-tertiary: #7cc57e; --md-on-tertiary: #003a00; --md-tertiary-container: #114a13; --md-on-tertiary-container: #9adf99; --md-error: #e8a49c; --md-on-error: #690005; --md-error-container: #7f1219; --md-on-error-container: #f0d3cf; --md-surface: #111318; --md-surface-container-lowest: #16181e; --md-surface-container-low: #1a1d24; --md-surface-container: #1f232b; --md-surface-container-high: #252932; --md-surface-container-highest: #2d323c; --md-on-surface: #e2e4ea; --md-on-surface-variant: #c3c6cf; --md-outline: #8d9099; --md-outline-variant: #43474f; --md-inverse-surface: #e2e4ea; --md-inverse-on-surface: #2e3038; --md-scrim: rgba(0,0,0,.6); --text-muted: #aab0bc; --webdev: #74bcd0; --webdev-c: #123844; --math: #7f9ecb; --math-c: #1b2c47; --science: #76c397; --science-c: #16452a; --ela: #b292c0; --ela-c: #382048; --success: #7cc57e; --success-c: #164a22; --warning: #d8b366; --warning-c: #45320a; --error: #e8a49c; --error-c: #7f1219; --info: #83b3d6; --info-c: #1a3a4f; --elev-1: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px 1px rgba(0,0,0,.25); --elev-2: 0 1px 2px rgba(0,0,0,.40), 0 2px 6px 2px rgba(0,0,0,.30); } /* ════════════════════════════════════════════════════════════ BASE Fixed 16px root: the old desktop upscaling ladder (17px at 1024px, 18px at 1440px) is retired. A 1366x768 Chromebook gets the same compact scale as everything else. ════════════════════════════════════════════════════════════ */ html { font-size: 16px; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 0.85rem; line-height: 1.3; /* Inter ships tabular figures; lock them on so numerals align in data columns even outside mono cells. */ font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); } .mono { font-family: var(--font-mono); } /* Material Symbols icon class (font loaded via layout ) */ .msr { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; font-size: 18px; line-height: 1; display: inline-block; white-space: nowrap; direction: ltr; letter-spacing: normal; text-transform: none; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; user-select: none; } .msr.fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ════════════════════════════════════════════════════════════ LEGACY ALIASES The old variables.css vocabulary, re-pointed at the new roles so unconverted views and stylesheets keep working and pick up dark mode for free. WCAG floor: nothing below 12px, so --font-size-caption (= --font-size-minimum) is 0.75rem. No responsive upscaling: these are fixed at compact values. ════════════════════════════════════════════════════════════ */ :root { /* Brand colors */ --color-navy: var(--usaws-navy); --color-burgundy: var(--usaws-burgundy); --color-green: var(--usaws-green); --color-paper: var(--md-surface); --color-paper-tint: var(--md-surface-container-low); --color-cream: var(--color-paper); --color-cream-tint: var(--color-paper-tint); --color-navy-hover: #001a8f; --color-burgundy-hover: #8f0a00; --color-green-hover: #008f04; /* Primary colors */ --color-primary: var(--md-primary); --color-secondary: var(--md-secondary); --color-accent: var(--md-tertiary); --color-background: var(--md-surface); /* Semantic colors */ --color-success: var(--success); --color-warning: var(--warning); --color-error: var(--error); --color-info: var(--info); --color-success-bg: var(--success-c); --color-warning-bg: var(--warning-c); --color-error-bg: var(--error-c); --color-info-bg: var(--info-c); /* Neutral scale */ --color-white: var(--md-surface-container-lowest); --color-off-white: var(--md-surface); --color-light-gray: var(--md-outline-variant); --color-gray: var(--md-outline); --color-dark-gray: var(--md-on-surface-variant); --color-charcoal: var(--md-on-surface); --color-black: var(--md-on-surface); /* Text colors */ --color-text-primary: var(--md-on-surface); --color-text-secondary: var(--md-on-surface-variant); --color-text-muted: var(--text-muted); --color-text-on-dark: var(--md-on-primary); --color-text-heading: var(--md-primary); --color-text-link: var(--md-secondary); --color-text-link-hover: var(--md-primary); /* Font families */ --font-heading: var(--font-display); /* Font weights */ --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-bold: 700; /* Type scale: fixed compact values, no desktop upscaling */ --font-size-minimum: 0.75rem; --font-size-hero: 1.75rem; --font-size-h1: 1.5rem; --font-size-h2: 1.25rem; --font-size-h3: 1.125rem; --font-size-h4: 1rem; --font-size-large: 1rem; --font-size-base: 1rem; --font-size-small: 0.875rem; --font-size-caption: 0.75rem; /* Line heights: compact */ --line-height-tight: 1.15; --line-height-snug: 1.25; --line-height-normal: 1.3; --line-height-relaxed: 1.4; --line-height-loose: 1.45; /* Spacing scale (4px grid, unchanged) */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 6rem; --space-5xl: 8rem; /* Radii */ --radius-sm: var(--shape-sm); --radius-md: var(--shape-md); --radius-lg: var(--shape-lg); --radius-pill: var(--shape-full); --radius-full: var(--shape-full); /* Shadows */ --shadow-sm: var(--elev-1); --shadow-md: var(--elev-2); --shadow-lg: 0 4px 8px 3px rgba(9,14,40,.10), 0 1px 3px rgba(9,14,40,.14); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; /* Z-index scale */ --z-dropdown: 100; --z-sticky: 200; --z-header: 300; --z-overlay: 400; --z-modal: 500; --z-toast: 600; }