/* ============================================================================ HEARTH — AETHER Design Language · Design Tokens (CSS custom properties) Warm · calm · human · editorial — Anthropic/Claude-grade or better. See blueprint §14e. Light theme = :root. Dark theme = [data-theme="dark"] and prefers-color-scheme fallback. Values are WCAG 2.2 AA+ targets, validated in CI (accessibility is an acceptance gate, not a retrofit). All fonts are permissive OFL (no proprietary type). ============================================================================ */ :root { /* ---- Brand: Clay / Coral accent ramp (the "warm signature") ---------- */ --clay-50: #FBEFE9; --clay-100: #F6DBCF; --clay-200: #EEBCA7; --clay-300: #E39B7F; --clay-400: #D67B57; --clay-500: #C56240; /* brand accent (decorative / large text) */ --clay-600: #A94E2E; /* interactive solid bg (white text ≈ AA) */ --clay-700: #8B3E23; /* active / pressed */ --clay-800: #6E3219; /* ---- Warm neutrals: "Sand / Paper" canvas + ink --------------------- */ --hearth-canvas: #F6F1E7; /* app background (warm ivory) */ --hearth-surface: #FCFAF5; /* cards / panels */ --hearth-raised: #FFFFFF; /* popovers / modals (+ warm shadow) */ --hearth-sunken: #F0EADD; /* insets / wells */ --hearth-border: #E6DECF; /* default hairline */ --hearth-border-strong: #D8CDB8; --hearth-border-subtle: #EFE9DC; --hearth-text: #221C14; /* primary ink (warm near-black) */ --hearth-text-secondary: #5A5042; --hearth-text-muted: #6D6355; /* NON-TEXT ONLY (owner call 2026-08-28l, tracker §13 row 74). Hairlines, dashed borders, dots, disabled affordances — never `color:` and never an SVG fill. It measures 2.68–3.25:1 on every light ground, and the palette cannot carry a fourth legible text tier: every ground sits at luminance 0.79–0.93, which caps an AA ink at ~0.16, and text/secondary/muted already fill that span. `--hearth-text-muted` is the lowest text ink. check.sh guard 26 fails on a text carrier. */ --hearth-text-faint: #968A78; --hearth-text-on-accent: #FFFFFF; /* ---- Semantic accent mappings --------------------------------------- */ --accent: var(--clay-500); --accent-hover: var(--clay-600); --accent-active: var(--clay-700); --accent-solid-bg: var(--clay-600); /* CTA bg; pair with white text */ --accent-subtle-bg: #F7E7DE; /* tinted accent surface */ --accent-text: var(--clay-700); /* accent-colored text on light */ --accent-border: var(--clay-300); /* ---- Severity ramp (earthy, harmonized; never color-alone) ---------- */ --sev-critical-fg: #A12818; --sev-critical-bg: #F7E0DA; --sev-high-fg: #AB4E19; --sev-high-bg: #F9E6D6; --sev-medium-fg: #88660D; --sev-medium-bg: #F6ECCE; --sev-low-fg: #57733B; --sev-low-bg: #E9EFDA; --sev-info-fg: #3C6188; --sev-info-bg: #E2EAF2; /* ---- Status (healthy / degraded / down) ----------------------------- */ --status-healthy-fg: #466D49; --status-healthy-bg: #E5EFDF; --status-degraded-fg: #7F5F0C; --status-degraded-bg: #F6ECCE; --status-down-fg: #A12818; --status-down-bg: #F7E0DA; /* ---- Data-viz categorical palette (colorblind-aware, warm-leaning) --- */ --viz-1: #C56240; /* clay */ --viz-2: #3C6188; /* dusty blue */ --viz-3: #97710E; /* ochre */ --viz-4: #5C7A3E; /* sage */ --viz-5: #7A5A86; /* muted plum */ --viz-6: #2F7E76; /* teal */ --viz-7: #B5531A; /* burnt orange */ --viz-8: #8A6D55; /* taupe */ /* ---- Typography ----------------------------------------------------- */ --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace; --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-md: 1.125rem; /* 18 */ --text-lg: 1.25rem; /* 20 */ --text-xl: 1.5rem; /* 24 */ --text-2xl: 1.875rem; /* 30 */ --text-3xl: 2.25rem; /* 36 */ --text-4xl: 3rem; /* 48 */ --text-5xl: 3.75rem; /* 60 (display) */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.65; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; /* ---- Spacing (4px base) --------------------------------------------- */ --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; /* ---- Radius (rounded / friendly) ------------------------------------ */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-2xl: 28px; --radius-full: 9999px; /* ---- Elevation (soft, warm-tinted shadows) -------------------------- */ --shadow-sm: 0 1px 2px rgba(61,45,30,.06); --shadow-md: 0 2px 8px rgba(61,45,30,.08), 0 1px 2px rgba(61,45,30,.05); --shadow-lg: 0 10px 30px rgba(61,45,30,.10), 0 2px 6px rgba(61,45,30,.06); --shadow-xl: 0 20px 50px rgba(61,45,30,.14); /* ---- Motion (gentle, purposeful) ------------------------------------ */ --ease-standard: cubic-bezier(.2, 0, 0, 1); --ease-emphasized: cubic-bezier(.3, 0, 0, 1); --ease-spring: cubic-bezier(.34, 1.4, .5, 1); /* D25/M2 — gentle overshoot for tactile micro-interactions */ --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --duration-slower: 480ms; /* ---- Focus ring (clay-tinted, always visible) ----------------------- */ --focus-ring: 0 0 0 3px rgba(197, 98, 64, .35); /* ---- Density (D8.3) -------------------------------------------------- Comfortable is the default (editorial Hearth spacing). High-volume triage surfaces (SOC portal tables) opt into compact via data-density="compact" on a root element; components reference the tokens, never hardcode. */ --density-row-y: var(--space-3); /* table-row vertical padding */ --density-row-x: var(--space-4); /* table-cell horizontal padding */ --density-table-fs: 0.95rem; /* table font size */ --density-line: 1.5; /* table line-height */ color-scheme: light; } /* Compact density — SOC / high-volume triage surfaces. */ [data-density="compact"] { --density-row-y: var(--space-1); --density-row-x: var(--space-2); --density-table-fs: 0.85rem; --density-line: 1.35; } /* ============================================================================ DARK THEME — warm espresso (NOT cold black). For war-rooms / big-screens. ============================================================================ */ :root[data-theme="dark"] { --hearth-canvas: #191512; --hearth-surface: #211C18; --hearth-raised: #2A241F; --hearth-sunken: #141110; --hearth-border: #38312A; --hearth-border-strong: #4A4138; --hearth-border-subtle: #2E2823; --hearth-text: #F3ECDF; --hearth-text-secondary: #C5BAA8; --hearth-text-muted: #9F9686; --hearth-text-faint: #6E6557; --hearth-text-on-accent: #241B14; --accent: #E08A63; --accent-hover: #EC9A75; --accent-active: #C9714C; --accent-solid-bg: #E08A63; /* pair with dark text (--hearth-text-on-accent) */ --accent-subtle-bg: #3A2A22; --accent-text: #E8A07F; --accent-border: #5A3C2E; --sev-critical-fg: #E87C6A; --sev-critical-bg: #3A2420; --sev-high-fg: #E8975A; --sev-high-bg: #3A2C1E; --sev-medium-fg: #D8B45A; --sev-medium-bg: #332B1A; --sev-low-fg: #A6C77E; --sev-low-bg: #26301E; --sev-info-fg: #86B0DA; --sev-info-bg: #20293A; --status-healthy-fg: #8FC78A; --status-healthy-bg: #21301E; --status-degraded-fg: #D8B45A; --status-degraded-bg: #332B1A; --status-down-fg: #E87C6A; --status-down-bg: #3A2420; --viz-1: #E08A63; --viz-2: #86B0DA; --viz-3: #D8B45A; --viz-4: #A6C77E; --viz-5: #B79AC2; --viz-6: #6FC2B6; --viz-7: #E8975A; --viz-8: #B59B80; --shadow-sm: 0 1px 2px rgba(0,0,0,.40); --shadow-md: 0 2px 8px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.35); --shadow-lg: 0 10px 30px rgba(0,0,0,.50), 0 2px 6px rgba(0,0,0,.40); --shadow-xl: 0 20px 50px rgba(0,0,0,.55); --focus-ring: 0 0 0 3px rgba(224, 138, 99, .40); color-scheme: dark; } /* System-preference fallback when no explicit data-theme is set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --hearth-canvas: #191512; --hearth-surface: #211C18; --hearth-raised: #2A241F; --hearth-sunken: #141110; --hearth-border: #38312A; --hearth-border-strong: #4A4138; --hearth-border-subtle: #2E2823; --hearth-text: #F3ECDF; --hearth-text-secondary: #C5BAA8; --hearth-text-muted: #9F9686; --hearth-text-faint: #6E6557; --hearth-text-on-accent: #241B14; --accent: #E08A63; --accent-hover: #EC9A75; --accent-active: #C9714C; --accent-solid-bg: #E08A63; --accent-subtle-bg: #3A2A22; --accent-text: #E8A07F; --accent-border: #5A3C2E; --sev-critical-fg:#E87C6A; --sev-critical-bg:#3A2420; --sev-high-fg:#E8975A; --sev-high-bg:#3A2C1E; --sev-medium-fg:#D8B45A; --sev-medium-bg:#332B1A; --sev-low-fg:#A6C77E; --sev-low-bg:#26301E; --sev-info-fg:#86B0DA; --sev-info-bg:#20293A; --status-healthy-fg:#8FC78A; --status-healthy-bg:#21301E; --status-degraded-fg:#D8B45A; --status-degraded-bg:#332B1A; --status-down-fg:#E87C6A; --status-down-bg:#3A2420; color-scheme: dark; } } /* Honor reduced-motion globally */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; --duration-slower: 0ms; } }