/* Loom Systems design tokens — Woven Canvas palette (locked 2026-07-15, AGE-31) Single source of truth. Components style through these tokens only; never redefine colors inside media queries — redefine the tokens. Gold rule: --gold marks actions and woven details (CTA, weft dash, selvage, weave thread) and nothing else. */ :root { /* ground */ --bg: #F1EDE2; --bg-raised: #E7E0CD; --card: #EAE4D2; /* ink */ --fg: #1C1A17; --fg-muted: #83786A; /* brand */ --indigo: #2A3B63; --indigo-soft: #4A5B85; --gold: #A8672E; /* structure */ --rule: #D6CDB8; --weave-warp: #A9B4CE; --gold-text: #8F5626; --btn-primary-bg: var(--indigo); --btn-primary-fg: var(--bg); --btn-primary-line: var(--gold); --error: #B23B2E; /* weave layer (background canvas) — reduced-alpha variants so primary content always wins; keep in sync with the solid tokens above */ --weave-warp-bg: rgba(169, 180, 206, 0.55); --weave-thread-bg: rgba(168, 103, 46, 0.5); /* type scale (minor third-ish, rem-based) */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.1875rem; --text-lg: 1.4375rem; --text-xl: 1.75rem; --text-2xl: 2.125rem; --text-hero: clamp(2.125rem, 5vw, 3rem); /* spacing (4px base) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* shape */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; /* weave geometry (shared by CSS texture and canvas layer) */ --warp-spacing: 34px; --course-spacing: 6px; } @media (prefers-color-scheme: dark) { :root { --bg: #14120E; --bg-raised: #1E1B15; --card: #1E1B14; --fg: #EDE7DA; --fg-muted: #9B9080; --indigo: #7288C0; --indigo-soft: #556796; --gold: #C98A4B; --rule: #33301F; --weave-warp: #3D4E78; --gold-text: #C98A4B; --btn-primary-bg: var(--gold); --btn-primary-fg: var(--bg); --btn-primary-line: var(--indigo); --error: #E2836F; --weave-warp-bg: rgba(61, 78, 120, 0.55); --weave-thread-bg: rgba(201, 138, 75, 0.5); } } /* explicit theme override (theme toggle stamps data-theme on ); must win in both directions over the media query */ :root[data-theme="dark"] { --bg: #14120E; --bg-raised: #1E1B15; --card: #1E1B14; --fg: #EDE7DA; --fg-muted: #9B9080; --indigo: #7288C0; --indigo-soft: #556796; --gold: #C98A4B; --rule: #33301F; --weave-warp: #3D4E78; --gold-text: #C98A4B; --btn-primary-bg: var(--gold); --btn-primary-fg: var(--bg); --btn-primary-line: var(--indigo); --error: #E2836F; --weave-warp-bg: rgba(61, 78, 120, 0.55); --weave-thread-bg: rgba(201, 138, 75, 0.5); } :root[data-theme="light"] { --bg: #F1EDE2; --bg-raised: #E7E0CD; --card: #EAE4D2; --fg: #1C1A17; --fg-muted: #83786A; --indigo: #2A3B63; --indigo-soft: #4A5B85; --gold: #A8672E; --rule: #D6CDB8; --weave-warp: #A9B4CE; --gold-text: #8F5626; --btn-primary-bg: var(--indigo); --btn-primary-fg: var(--bg); --btn-primary-line: var(--gold); --error: #B23B2E; --weave-warp-bg: rgba(169, 180, 206, 0.55); --weave-thread-bg: rgba(168, 103, 46, 0.5); }