/* ============================================================ CUREM — DESIGN TOKENS (CSS custom properties) Import after fonts.css. Pair with a [data-theme="dark"] toggle on or any container for dark surfaces. ============================================================ */ :root { /* ---- Raw palette ---- */ --curem-ink: #0B2239; /* near-black navy: headings, dark grounds */ --curem-ink-2: #081826; /* deepest */ --curem-text: #2A3744; /* body text on light */ --curem-muted: #6B7886; /* secondary text */ --curem-faint: #9AA7B4; /* tertiary / captions */ --curem-hair: #E4EAF0; /* hairlines, borders */ --curem-hair-2: #EDF1F6; --curem-panel: #F4F6F9; /* tinted surfaces */ --curem-panel-2: #EEF2F7; --curem-blue: #15457E; /* PRIMARY brand blue */ --curem-blue-700: #0E3358; /* hover / pressed */ --curem-blue-bright: #1E5FA8; /* primary on dark grounds */ --curem-blue-300: #7FA6CF; --curem-blue-100: #C9DBEE; --curem-blue-50: #EAF1F8; /* tint wash */ --curem-signal: #14A081; /* ACCENT teal: live / on-target / success */ --curem-signal-dark: #0E7E66; --curem-signal-light: #5FCBB4; /* accent on dark grounds */ --curem-signal-50: #E4F4EF; --curem-amber: #D99A2B; /* tertiary / warning / data status */ --curem-rose: #C8553D; /* negative / error / "don't" */ --curem-white: #FFFFFF; /* ---- Semantic tokens (LIGHT, default) ---- */ --color-bg: var(--curem-white); --color-surface: var(--curem-panel); --color-surface-2: var(--curem-panel-2); --color-fg: var(--curem-ink); --color-fg-body: var(--curem-text); --color-fg-muted: var(--curem-muted); --color-fg-faint: var(--curem-faint); --color-border: var(--curem-hair); --color-primary: var(--curem-blue); --color-primary-hover: var(--curem-blue-700); --color-on-primary: var(--curem-white); --color-accent: var(--curem-signal); --color-accent-soft: var(--curem-signal-50); --color-success: var(--curem-signal-dark); --color-warning: var(--curem-amber); --color-danger: var(--curem-rose); --color-focus-ring: var(--curem-blue-bright); /* ---- Type ---- */ --font-display: "Newsreader", Georgia, "Times New Roman", serif; --font-sans: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --text-display: 3.5rem; --leading-display: 1.05; --text-h1: 2.5rem; --leading-h1: 1.1; --text-h2: 1.75rem; --leading-h2: 1.2; --text-h3: 1.125rem; --leading-h3: 1.3; --text-lead: 1.375rem; --leading-lead: 1.45; --text-body: 1rem; --leading-body: 1.6; --text-small: 0.875rem; --leading-small: 1.5; --text-label: 0.75rem; --tracking-label: 0.12em; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Shape & motion ---- */ --radius-sm: 4px; --radius: 8px; --radius-lg: 14px; --radius-pill: 999px; --ring: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 35%, transparent); --shadow-sm: 0 1px 2px rgba(11,34,57,.06), 0 1px 3px rgba(11,34,57,.08); --shadow: 0 4px 16px rgba(11,34,57,.08); --ease: cubic-bezier(.2,.7,.3,1); --dur: 180ms; } /* ---- Semantic tokens (DARK surfaces) ---- */ [data-theme="dark"], .curem-dark { --color-bg: var(--curem-ink); --color-surface: #102C49; --color-surface-2: #143458; --color-fg: var(--curem-white); --color-fg-body: rgba(255,255,255,.86); --color-fg-muted: rgba(255,255,255,.62); --color-fg-faint: rgba(255,255,255,.42); --color-border: rgba(255,255,255,.14); --color-primary: var(--curem-blue-bright); --color-primary-hover: var(--curem-blue-300); --color-on-primary: var(--curem-white); --color-accent: var(--curem-signal-light); --color-accent-soft: rgba(95,203,180,.16); --color-success: var(--curem-signal-light); --color-warning: var(--curem-amber); --color-danger: #E07A66; } /* ============================================================ Optional base layer — minimal, opt-in. Delete if you have your own reset / are driving everything through Tailwind. ============================================================ */ .curem-base { background: var(--color-bg); color: var(--color-fg-body); font-family: var(--font-sans); font-size: var(--text-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; } .curem-base h1, .curem-base h2, .curem-base h3, .curem-display { font-family: var(--font-display); color: var(--color-fg); } .curem-base h1 { font-size: var(--text-h1); line-height: var(--leading-h1); font-weight: 600; letter-spacing: -0.01em; } .curem-base h2 { font-size: var(--text-h2); line-height: var(--leading-h2); font-weight: 600; } .curem-base h3 { font-family: var(--font-sans); font-size: var(--text-h3); line-height: var(--leading-h3); font-weight: 600; } .curem-lead { font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: var(--text-lead); line-height: var(--leading-lead); } .curem-label { font-family: var(--font-sans); font-weight: 600; font-size: var(--text-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }