/** * Brutalist Academic — Design Tokens (gitwami) * =========================================== * The SINGLE SOURCE OF TRUTH for the gitwami visual system. Every component — * the bru-prefixed layer, the Bootstrap bridge, and the legacy gitwami/bs * aliases in base.css — reads the bru custom properties. Nothing hardcodes * hex/spacing/shadow outside this file's :root (and its dark override block). * * Loaded FIRST in Web/View/Layout.hs, before components.css and the six * feature stylesheets. * * THEME POLARITY: light brutalist (tinted-paper canvas) is the default :root. * [data-bs-theme="dark"] re-skins to the ink-canvas brutalist variant. * * DEPTH: FLAT. Government-flat doctrine — every surface is a bordered * rectangle, never a raised object. No drop shadows, no offset "ink blocks", * no hover-lift, no press-down. Borders and color carry all structure; * interaction feedback is a color shift, never a position change. The shadow * tokens below stay defined (the whole system references them) but resolve * to `none`. * * Palette roles (resolved): * canvas #FAFAF6 page base — tinted paper, not pure white * ink #0F1724 structure: borders, primary text, HARD-SHADOW color * action #3F7F78 functional / selected / focus / CTA fill (teal) * accent #C94F32 brand/editorial splash + transient-failure toast (terracotta) * warning #D97706 attention / pending (amber channel — never accent/action) * critical#4D1521 destructive / truly critical decisions * success #059669 success states * error #DC2626 blocking errors */ :root { /* ── PALETTE (light brutalist — default) ──────────────────────────────── */ --bru-canvas: #FAFAF6; --bru-ink: #0F1724; --bru-accent: #C94F32; --bru-action: #3F7F78; --bru-critical: #4D1521; --bru-success: #059669; --bru-warning: #D97706; --bru-error: #DC2626; /* Channel RGB triplets (R G B) for rgb(... / ) ramps */ --bru-canvas-rgb: 250 250 246; --bru-ink-rgb: 15 23 36; --bru-accent-rgb: 201 79 50; --bru-action-rgb: 63 127 120; --bru-critical-rgb: 77 21 33; --bru-success-rgb: 5 150 105; --bru-warning-rgb: 217 119 6; --bru-error-rgb: 220 38 38; /* ── DERIVED SURFACES ─────────────────────────────────────────────────── */ --bru-paper: var(--bru-canvas); --bru-modal: var(--bru-canvas); /* opaque canvas-toned shell over overlays */ --bru-panel: rgb(var(--bru-canvas-rgb) / 0.64); --bru-panel-muted: rgb(var(--bru-canvas-rgb) / 0.38); --bru-input-bg: #FFFFFF; /* deliberate contrast for editable fields */ --bru-button-primary-text: #FFFFFF; /* light text on filled action/critical */ /* Flat interaction feedback — darken the fill / tint the surface, never move the element. Replaces the old lift-and-shadow physical-button mechanic. */ --bru-action-hover: color-mix(in srgb, var(--bru-action) 88%, #000); --bru-critical-hover: color-mix(in srgb, var(--bru-critical) 82%, #000); --bru-success-hover: color-mix(in srgb, var(--bru-success) 88%, #000); --bru-surface-hover: rgb(var(--bru-ink-rgb) / 0.05); --bru-surface-active: rgb(var(--bru-ink-rgb) / 0.10); /* Opacity ramps */ --bru-ink-05: rgb(var(--bru-ink-rgb) / 0.05); --bru-ink-10: rgb(var(--bru-ink-rgb) / 0.10); --bru-ink-15: rgb(var(--bru-ink-rgb) / 0.15); --bru-ink-20: rgb(var(--bru-ink-rgb) / 0.20); --bru-ink-30: rgb(var(--bru-ink-rgb) / 0.30); --bru-ink-40: rgb(var(--bru-ink-rgb) / 0.40); --bru-ink-50: rgb(var(--bru-ink-rgb) / 0.50); --bru-ink-60: rgb(var(--bru-ink-rgb) / 0.60); --bru-ink-70: rgb(var(--bru-ink-rgb) / 0.70); --bru-action-05: rgb(var(--bru-action-rgb) / 0.05); --bru-action-10: rgb(var(--bru-action-rgb) / 0.10); --bru-action-20: rgb(var(--bru-action-rgb) / 0.20); --bru-action-30: rgb(var(--bru-action-rgb) / 0.30); --bru-accent-10: rgb(var(--bru-accent-rgb) / 0.10); --bru-accent-20: rgb(var(--bru-accent-rgb) / 0.20); --bru-warning-10: rgb(var(--bru-warning-rgb) / 0.10); --bru-warning-20: rgb(var(--bru-warning-rgb) / 0.20); --bru-success-10: rgb(var(--bru-success-rgb) / 0.10); --bru-error-10: rgb(var(--bru-error-rgb) / 0.10); /* Semantic aliases — what components reference */ --bru-text-primary: var(--bru-ink); --bru-text-muted: var(--bru-ink-60); --bru-text-faint: var(--bru-ink-40); --bru-border: var(--bru-ink); --bru-border-subtle: var(--bru-ink-30); --bru-border-faint: var(--bru-ink-15); /* ── TYPOGRAPHY ───────────────────────────────────────────────────────── */ --bru-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --bru-font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif; --bru-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace; --bru-text-xs: 0.75rem; --bru-text-sm: 0.875rem; --bru-text-base: 1rem; --bru-text-lg: 1.125rem; --bru-text-xl: 1.25rem; --bru-text-2xl: 1.5rem; --bru-text-3xl: 1.875rem; --bru-text-4xl: 2.25rem; --bru-text-5xl: 3rem; --bru-text-6xl: 3.75rem; --bru-font-normal: 400; --bru-font-medium: 500; --bru-font-semibold: 600; --bru-font-bold: 700; --bru-font-extrabold: 800; --bru-tracking-tightest: -0.02em; --bru-tracking-tight: -0.01em; --bru-tracking-normal: 0; --bru-tracking-label: 0.08em; --bru-tracking-wide: 0.1em; --bru-leading-tight: 1.05; --bru-leading-snug: 1.25; --bru-leading-normal: 1.5; --bru-leading-relaxed: 1.625; --bru-leading-loose: 2; /* ── SPACING (4px base) ───────────────────────────────────────────────── */ --bru-space-0: 0; --bru-space-1: 0.25rem; --bru-space-2: 0.5rem; --bru-space-3: 0.75rem; --bru-space-4: 1rem; --bru-space-5: 1.25rem; --bru-space-6: 1.5rem; --bru-space-8: 2rem; --bru-space-10: 2.5rem; --bru-space-12: 3rem; --bru-space-16: 4rem; --bru-space-20: 5rem; /* ── BORDERS & RADIUS — hard, blocky ──────────────────────────────────── */ --bru-border-width: 1px; --bru-border-width-2: 2px; --bru-radius-none: 0; --bru-radius-sm: 2px; --bru-radius-md: 4px; /* dense controls — blocky, not soft */ --bru-radius-lg: 8px; --bru-radius-full: 9999px; /* avatars / true pills ONLY */ /* ── DEPTH — FLAT. No drop shadows, no offset ink blocks. ─────────────── These tokens are referenced across every sheet; they resolve to `none` so the whole UI flattens from one place. Structure comes from borders. */ --bru-shadow-brutal: none; --bru-shadow-brutal-sm: none; --bru-shadow-brutal-xs: none; --bru-shadow-brutal-action: none; --bru-shadow-brutal-critical: none; /* ── MOTION ───────────────────────────────────────────────────────────── */ --bru-duration-fast: 100ms; --bru-duration-default: 150ms; --bru-duration-slow: 300ms; --bru-ease-default: cubic-bezier(0.4, 0, 0.2, 1); --bru-hover-lift: 0; /* flat: hover shifts color, never position */ --bru-press-translation: 0; /* flat: no press-down translate */ /* ── LAYOUT ───────────────────────────────────────────────────────────── */ --bru-prose-max: 40rem; /* Rule of 40rem */ --bru-header-height: 4rem; --bru-grid-size: 24px; /* baseline grid background pitch */ --bru-z-dropdown: 10; --bru-z-sticky: 20; --bru-z-overlay: 30; --bru-z-modal: 40; --bru-z-popover: 50; --bru-z-tooltip: 60; } /* ─────────────────────────────────────────────────────────────────────────── DARK VARIANT — ink canvas, paper structure. Flat, like light. Only the surface/ink tokens flip; the spacing/radius scale and the action/accent/warning/critical hues are shared with light. "ink" becomes paper here so text and borders render as light lines against the dark canvas. No shadows in either theme — depth is FLAT. ─────────────────────────────────────────────────────────────────────────── */ [data-bs-theme="dark"] { --bru-canvas: #0D1117; --bru-canvas-rgb: 13 17 23; --bru-ink: #F4F2EA; /* paper: text, borders, HARD-SHADOW color */ --bru-ink-rgb: 244 242 234; /* Panels read as elevated steps above the dark canvas, not translucent paper */ --bru-paper: #161B22; --bru-modal: #161B22; --bru-panel: rgb(244 242 234 / 0.05); --bru-panel-muted: rgb(244 242 234 / 0.03); --bru-input-bg: #0B0E13; /* Filled action/critical keep white text — teal/maroon read dark in both themes */ --bru-button-primary-text: #FFFFFF; } /* Intentionally tokens-only. Components live in components.css. */