/* ============================================================ MAILROOM — Design Tokens Privacy-first inbox storage reclaim. Provider-agnostic. Themed on the .mr root via [data-theme]; every screen is a self-contained .mr block so light & dark can sit side-by-side. ============================================================ */ /* ---- Fonts (loaded in ) ---- Display / UI : "Schibsted Grotesk" (confident grotesk, tabular nums) Mono / micro : "Geist Mono" ("envelope-only" technical labels) */ .mr { /* ---------- Brand accent: jade-teal = safe / reclaim / breathing room ---------- */ --accent-50: oklch(0.965 0.020 172); --accent-100: oklch(0.935 0.035 172); --accent-200: oklch(0.880 0.052 172); --accent-300: oklch(0.800 0.078 173); --accent-400: oklch(0.715 0.098 173); --accent-500: oklch(0.625 0.106 174); --accent-600: oklch(0.545 0.098 175); --accent-700: oklch(0.455 0.082 176); --accent-800: oklch(0.375 0.062 177); --accent-900: oklch(0.300 0.044 178); /* ---------- Danger: calm coral, reserved for PERMANENT delete only ---------- */ --danger-50: oklch(0.960 0.022 28); --danger-100: oklch(0.910 0.045 28); --danger-400: oklch(0.700 0.150 28); --danger-500: oklch(0.630 0.168 28); --danger-600: oklch(0.560 0.172 28); /* ---------- Warn: soft amber, stale-data / attention ---------- */ --warn-50: oklch(0.965 0.035 80); --warn-100: oklch(0.920 0.070 80); --warn-400: oklch(0.800 0.120 78); --warn-500: oklch(0.760 0.130 74); --warn-600: oklch(0.660 0.120 68); /* ---------- Type scale ---------- */ --font-display: "Schibsted Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; --fs-micro: 11px; --fs-label: 12px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 20px; --fs-xl: 26px; --fs-2xl: 34px; --fs-3xl: 46px; --fs-4xl: 64px; --fs-hero: 92px; /* ---------- Spacing ---------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; --sp-10: 64px; --sp-12: 80px; /* ---------- Radii ---------- */ --r-xs: 6px; --r-sm: 9px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px; /* ---------- Motion ---------- */ --ease-out: cubic-bezier(0.22, 0.7, 0.25, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1); --dur-fast: 0.16s; --dur: 0.32s; --dur-slow: 0.6s; /* ---------- Semantic aliases (use these in components) ---------- --reclaim = the safe/reclaim accent --caution = permanent / irreversible (coral) --attention = stale data / needs attention (amber) */ --reclaim: var(--accent); --reclaim-soft: var(--accent-soft); --reclaim-line: var(--accent-line); --reclaim-text: var(--accent-text); --caution: var(--danger-500); --caution-soft: var(--danger-soft); --caution-text: var(--danger-text); --attention: var(--warn-500); --attention-soft: var(--warn-soft); --attention-line: var(--warn-line); --attention-text: var(--warn-text); font-family: var(--font-display); font-feature-settings: "ss01", "cv01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ================= LIGHT (warm off-white, premium calm) ================= */ .mr[data-theme="light"] { --bg: oklch(0.984 0.005 150); --bg-tint: oklch(0.970 0.010 168); --surface: oklch(1 0 0); --surface-2: oklch(0.975 0.006 152); --surface-3: oklch(0.958 0.008 152); --border: oklch(0.910 0.008 152); --border-strong: oklch(0.860 0.010 152); --text: oklch(0.235 0.014 170); --text-muted: oklch(0.480 0.014 165); --text-faint: oklch(0.625 0.012 162); --on-accent: oklch(0.985 0.010 172); --accent: var(--accent-600); --accent-soft: var(--accent-50); --accent-line: var(--accent-200); --accent-text: var(--accent-700); --shadow-sm: 0 1px 2px rgba(20,38,34,0.05), 0 1px 1px rgba(20,38,34,0.04); --shadow-md: 0 4px 14px rgba(20,38,34,0.07), 0 1px 3px rgba(20,38,34,0.05); --shadow-lg: 0 18px 50px rgba(20,38,34,0.12), 0 4px 12px rgba(20,38,34,0.06); --shadow-pop: 0 28px 70px rgba(20,38,34,0.18); --gauge-track: oklch(0.930 0.010 160); --grid-line: oklch(0.945 0.006 152); background: var(--bg); color: var(--text); } /* ================= DARK (deep ink, green undertone — never pure black) ================= */ .mr[data-theme="dark"] { --bg: oklch(0.185 0.013 178); --bg-tint: oklch(0.215 0.018 176); --surface: oklch(0.228 0.015 178); --surface-2: oklch(0.265 0.016 178); --surface-3: oklch(0.305 0.018 178); --border: oklch(0.320 0.018 178); --border-strong: oklch(0.390 0.020 178); --text: oklch(0.955 0.008 165); --text-muted: oklch(0.720 0.014 168); --text-faint: oklch(0.560 0.014 170); --on-accent: oklch(0.180 0.020 178); --accent: var(--accent-400); --accent-soft: oklch(0.300 0.040 176); --accent-line: oklch(0.420 0.060 176); --accent-text: var(--accent-300); --shadow-sm: 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 6px 20px rgba(0,0,0,0.38); --shadow-lg: 0 22px 60px rgba(0,0,0,0.50), 0 6px 16px rgba(0,0,0,0.35); --shadow-pop: 0 30px 80px rgba(0,0,0,0.60); --gauge-track: oklch(0.300 0.014 178); --grid-line: oklch(0.250 0.012 178); background: var(--bg); color: var(--text); } /* danger/warn surface tints that adapt per theme */ .mr[data-theme="dark"] { --danger-soft: oklch(0.300 0.060 28); --danger-line: oklch(0.420 0.090 28); --danger-text: oklch(0.780 0.110 28); --warn-soft: oklch(0.320 0.060 78); --warn-line: oklch(0.460 0.080 78); --warn-text: oklch(0.840 0.110 80); } .mr[data-theme="light"] { --danger-soft: var(--danger-50); --danger-line: oklch(0.880 0.060 28); --danger-text: var(--danger-600); --warn-soft: var(--warn-50); --warn-line: oklch(0.870 0.090 80); --warn-text: var(--warn-600); }