/* ── Colors ─────────────────────────────────────────────────────────── A restrained Gray / Navy / Beige palette. Navy grounds the surfaces in a deep, low-light editorial theme; beige/gold carries primary intent and warmth; grays fill the space between in soft, low-contrast tones. All hues share a subtle warmth so nothing reads clinical. */ :root { /* Beige — paper / surface family (warm, low-chroma) */ --beige-50: #faf7f1; --beige-100: #f4efe4; --beige-200: #ece4d3; --beige-300: #ddd0b8; --beige-400: #c8b795; /* Navy — anchor / surface family (near-neutral charcoal, barely-cool) */ --navy-900: #1c1f25; --navy-800: #24272e; --navy-700: #2f333b; --navy-600: #3f434c; --navy-500: #545963; --navy-300: #8b8f98; --navy-100: #d3d5da; /* Gray — warm neutrals for text & structure */ --gray-900: #23262b; --gray-700: #45494f; --gray-500: #6f747c; --gray-400: #9297a0; --gray-300: #c2c5cb; --gray-200: #e0e1e4; --gray-100: #eeeef0; --white: #ffffff; /* Gold — secondary accent (Tailwind-style ramp from #FFBF00) */ --gold-50: #fffce6; --gold-100: #fff7b8; --gold-200: #ffef85; --gold-300: #ffe74d; --gold-400: #ffdd00; --gold-500: #e6c400; --gold-600: #bfa000; /* Semantic accents — saturated but warm, in-palette */ --accent-success: #4e9e6b; --accent-warning: #e0a33a; --accent-error: #d15449; --accent-info: #4f83c4; /* ── Semantic aliases ─────────────────────────────────────────────── */ /* Surfaces (navy family — deep editorial theme) */ --surface-page: var(--navy-800); --surface-card: var(--navy-700); --surface-raised: var(--navy-600); --surface-sunken: var(--navy-900); --surface-inverse: var(--beige-50); --surface-muted: var(--navy-800); /* Text (light on navy) */ --text-strong: var(--beige-50); --text-body: var(--navy-100); --text-muted: var(--navy-300); --text-subtle: var(--navy-300); --text-inverse: var(--gray-900); --text-on-navy: var(--beige-50); /* Primary intent (beige / gold) */ --primary: var(--beige-400); --primary-hover: var(--beige-300); --primary-active: #b8a67f; --primary-text: var(--navy-900); /* Secondary intent (gold — the vivid pop) */ --secondary: var(--gold-400); --secondary-hover: var(--gold-300); --secondary-active: #e6c700; --secondary-text: var(--navy-900); /* Borders & lines */ --border-soft: var(--navy-800); --border-default:var(--navy-700); --border-strong: var(--navy-600); --border-focus: var(--beige-400); /* Accent for links */ --link: var(--beige-300); --link-hover: var(--beige-50); } /* ── Light theme ────────────────────────────────────────────────────── Warm paper surfaces with navy ink. Only the semantic aliases flip; the raw palette above is shared. Apply with [data-theme="light"] on any ancestor (usually or ). */ [data-theme="light"] { /* Surfaces (beige family — warm paper) */ --surface-page: var(--beige-50); --surface-card: var(--white); --surface-raised: var(--white); --surface-sunken: var(--beige-100); --surface-inverse: var(--navy-800); --surface-muted: var(--beige-100); /* Text (navy ink on paper) */ --text-strong: var(--navy-900); --text-body: var(--gray-900); --text-muted: var(--gray-500); --text-subtle: var(--gray-400); --text-inverse: var(--beige-50); --text-on-navy: var(--beige-50); /* Primary intent (navy for contrast on paper) */ --primary: var(--navy-800); --primary-hover: var(--navy-700); --primary-active: var(--navy-900); --primary-text: var(--beige-50); /* Secondary intent (gold keeps the vivid pop) */ --secondary: var(--gold-400); --secondary-hover: var(--gold-500); --secondary-active: var(--gold-600); --secondary-text: var(--navy-900); /* Borders & lines */ --border-soft: var(--beige-200); --border-default: var(--beige-300); --border-strong: var(--beige-400); --border-focus: var(--gold-500); /* Accent for links */ --link: var(--navy-700); --link-hover: var(--gold-600); }