/* ============================================================ trwn — Canonical Design Tokens Single source of truth. Loaded FIRST in so other stylesheets can rely on these vars without ordering surprises. ============================================================ */ :root { /* ── Brand palette — fills/backgrounds ───────────────────── */ --trwn-sand: #C4A882; --trwn-sand-light: #D4C4A8; --trwn-sand-pale: #EDE6D8; --trwn-blush: #D4A0A0; --trwn-blush-light: #E8C4C4; --trwn-blush-pale: #F5E6E6; --trwn-charcoal: #2D2926; --trwn-accent: #8B7355; --trwn-sage: #A8B5A0; /* ── Surfaces ────────────────────────────────────────────── */ --trwn-warm-white: #FAF7F2; --trwn-cream: #F5F0E8; --trwn-surface: #FFFFFF; --bg-canvas: var(--trwn-warm-white); --bg-surface: #FFFFFF; --bg-subtle: var(--trwn-cream); --bg-inverse: var(--trwn-charcoal); /* ── Text (WCAG AA on light backgrounds) ─────────────────── */ --trwn-warm-gray: #6B635B; --trwn-light-gray: #B8B0A6; /* DEPRECATED for text — use --text-muted */ --text-primary: var(--trwn-charcoal); /* ~14:1 */ --text-secondary: #5C544B; /* ~7,5:1 */ --text-muted: #857C70; /* ~4,9:1 — was --trwn-light-gray #B8B0A6 (~2,4:1) */ --text-inverse: var(--trwn-warm-white); /* ── Links ───────────────────────────────────────────────── */ --link-color: var(--trwn-accent); /* #8B7355, ~5,0:1 */ --link-hover: #6B563F; /* ── Semantic text ───────────────────────────────────────── */ --success-text: #5A7754; --warning-text: #8B6A2E; --danger-text: #A04444; --info-text: var(--trwn-accent); /* ── Functional mappings (backwards-compat with base.css names) ── */ --color-primary: var(--trwn-sand); --color-primary-light: var(--trwn-sand-light); --color-primary-dark: var(--trwn-accent); --color-secondary: var(--trwn-blush); --color-bg: var(--bg-canvas); --color-surface: var(--bg-surface); --color-bg-card: var(--bg-surface); --color-bg-section: var(--bg-subtle); --color-text: var(--text-primary); --color-text-light: var(--trwn-warm-gray); --color-text-secondary: var(--trwn-warm-gray); --color-text-muted: var(--trwn-light-gray); --color-border: var(--trwn-sand-pale); --color-border-light: var(--trwn-sand-pale); --color-accent: var(--trwn-charcoal); --color-success: var(--trwn-sage); --color-success-bg: #EBF0E9; --color-danger: #C45B5B; /* preserve original fill */ --color-danger-bg: #FBEAEA; --color-warning: var(--trwn-sand); --color-warning-bg: var(--trwn-sand-pale); --color-info: var(--trwn-sand); --color-info-bg: var(--trwn-sand-pale); /* ── Gradients ───────────────────────────────────────────── */ --gradient-hero: linear-gradient(135deg, var(--trwn-cream) 0%, var(--trwn-blush-pale) 50%, var(--trwn-sand-pale) 100%); --gradient-warm: linear-gradient(90deg, var(--trwn-sand), var(--trwn-blush)); --gradient-subtle: linear-gradient(180deg, var(--trwn-warm-white), var(--trwn-cream)); /* ── Type ────────────────────────────────────────────────── */ --font-heading: 'Cormorant Garamond', Georgia, serif; --font-body: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-sans: 'Nunito Sans', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ── Spacing (4-pt grid) ─────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* ── Radii ───────────────────────────────────────────────── */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; /* ── Shadows ─────────────────────────────────────────────── */ --shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --shadow: 0 2px 12px rgba(0,0,0,0.07); --shadow-lg: 0 8px 30px rgba(0,0,0,0.10); --shadow-soft: 0 1px 2px rgba(45,41,38,.04), 0 4px 12px rgba(45,41,38,.06); --shadow-lift: 0 2px 4px rgba(45,41,38,.06), 0 12px 24px rgba(45,41,38,.10); /* ── Borders ─────────────────────────────────────────────── */ --border-width: 1px; --border-style: solid; /* ── Layout ──────────────────────────────────────────────── */ --sidebar-width: 260px; }