/** * ReSense Design System — foundation tokens (draft, proposal stage) * ------------------------------------------------------------------ * Two layers, Material-Design-style: * * 1. Reference palette --rs-palette-{name}-{tone} * Tonal ramps in OKLCH. tone = OKLCH lightness × 100. * NEVER referenced by components — only by the role layer below. * * 2. Semantic roles --rs-color-{role} * What components consume. Light/dark themes remap roles to * different tones of the SAME palettes. * * Anchored on the CANONICAL ReSense brand (2026-07-08 rework): * - resense-knowledge-base/brand/logo-assets.md + visual-identity.md: * Brand peach #E2997D (~peach-75), Growth violet #9D61DE * (~violet-60), Systems indigo #776AEF (~indigo-60), * Ink #191726 (~neutral-20), Ivory #F4F1EF (~neutral-95). * - resense-erp/app/theme/tokens.ts functional colors (product- * adopted 2026-07-05): info #4C8DD6, success #3E9E7B, * warning #E0A03A, error #D65745. * - Typography: Clash Display + Clash Grotesk (brand-site faces, * see fonts.css). Bricolage Grotesque/Figtree (IdP screens) are * superseded by this contract. * * Note: the IdP violet #6d5ce6 sits on the SAME OKLCH hue (283.6) as * Systems indigo #776AEF (283.4) — the indigo ramp subsumes it. * White on indigo-60 (the exact brand tone) is 4.2:1, so interactive * primary uses indigo-55 (5.2:1 AA); tone 60 stays the identity/ * accent value. All role pairs validated WCAG AA by gen_palette2.py. * * Rules: * - Components use roles (and structure tokens), never palette steps. * - No raw hex/oklch values in component CSS. * - Logomark/lockup color: Ink on light surfaces, Ivory on dark — * exposed as --rs-color-logo (never place ink mark on dark or * ivory mark on light; see brand/logo-assets.md). * - Dark mode: prefers-color-scheme by default; [data-theme="light"|"dark"] * wins when set on . */ /* ============================================================ 1. REFERENCE PALETTE (generated by gen_palette2.py — edit the generator, not this) ============================================================ */ :root { /* indigo — Systems domain + primary (anchor #776AEF ~ indigo-60) */ --rs-palette-indigo-0: oklch(0 0.000 271.4); /* #000000 */ --rs-palette-indigo-5: oklch(0.05 0.013 272.4); /* #000001 */ --rs-palette-indigo-10: oklch(0.1 0.046 273.4); /* #010212 */ --rs-palette-indigo-15: oklch(0.15 0.064 274.4); /* #050625 */ --rs-palette-indigo-20: oklch(0.2 0.080 275.4); /* #0e0f39 */ --rs-palette-indigo-25: oklch(0.25 0.096 276.4); /* #18194e */ --rs-palette-indigo-30: oklch(0.3 0.111 277.4); /* #232363 */ --rs-palette-indigo-35: oklch(0.35 0.125 278.4); /* #2f2e79 */ --rs-palette-indigo-40: oklch(0.4 0.140 279.4); /* #3c3990 */ --rs-palette-indigo-45: oklch(0.45 0.153 280.4); /* #4944a7 */ --rs-palette-indigo-50: oklch(0.5 0.167 281.4); /* #5750be */ --rs-palette-indigo-55: oklch(0.55 0.180 282.4); /* #665cd5 */ --rs-palette-indigo-60: oklch(0.6 0.193 283.4); /* #7568ed */ --rs-palette-indigo-65: oklch(0.65 0.176 284.4); /* #867bf5 */ --rs-palette-indigo-70: oklch(0.7 0.158 285.4); /* #968dfb */ --rs-palette-indigo-75: oklch(0.75 0.135 286.4); /* #a8a0ff */ --rs-palette-indigo-80: oklch(0.8 0.106 287.4); /* #b9b3ff */ --rs-palette-indigo-85: oklch(0.85 0.078 288.4); /* #cbc6ff */ --rs-palette-indigo-90: oklch(0.9 0.051 289.4); /* #dcd9ff */ --rs-palette-indigo-95: oklch(0.95 0.023 290.4); /* #eeecfd */ --rs-palette-indigo-98: oklch(0.98 0.005 291.0); /* #f8f8fb */ --rs-palette-indigo-100: oklch(1 0.000 291.4); /* #ffffff */ /* violet — Growth domain (anchor #9D61DE ~ violet-60) */ --rs-palette-violet-0: oklch(0 0.000 303.5); /* #000000 */ --rs-palette-violet-5: oklch(0.05 0.013 303.5); /* #010001 */ --rs-palette-violet-10: oklch(0.1 0.044 303.5); /* #06010e */ --rs-palette-violet-15: oklch(0.15 0.061 303.5); /* #110320 */ --rs-palette-violet-20: oklch(0.2 0.077 303.5); /* #1e0932 */ --rs-palette-violet-25: oklch(0.25 0.092 303.5); /* #2b1245 */ --rs-palette-violet-30: oklch(0.3 0.107 303.5); /* #3a1b58 */ --rs-palette-violet-35: oklch(0.35 0.121 303.5); /* #48256d */ --rs-palette-violet-40: oklch(0.4 0.134 303.5); /* #582f81 */ --rs-palette-violet-45: oklch(0.45 0.148 303.5); /* #673a97 */ --rs-palette-violet-50: oklch(0.5 0.161 303.5); /* #7745ac */ --rs-palette-violet-55: oklch(0.55 0.173 303.5); /* #8851c2 */ --rs-palette-violet-60: oklch(0.6 0.186 303.5); /* #985cd9 */ --rs-palette-violet-65: oklch(0.65 0.169 303.5); /* #a571e2 */ --rs-palette-violet-70: oklch(0.7 0.152 303.5); /* #b384eb */ --rs-palette-violet-75: oklch(0.75 0.134 303.5); /* #c098f3 */ --rs-palette-violet-80: oklch(0.8 0.114 303.5); /* #cdabfa */ --rs-palette-violet-85: oklch(0.85 0.091 303.5); /* #dac0ff */ --rs-palette-violet-90: oklch(0.9 0.058 303.5); /* #e6d5ff */ --rs-palette-violet-95: oklch(0.95 0.022 303.5); /* #f1ebfb */ --rs-palette-violet-98: oklch(0.98 0.005 303.5); /* #f9f8fb */ --rs-palette-violet-100: oklch(1 0.000 303.5); /* #ffffff */ /* peach — Brand domain (anchor #E2997D ~ peach-75) */ --rs-palette-peach-0: oklch(0 0.000 46.0); /* #000000 */ --rs-palette-peach-5: oklch(0.05 0.004 45.7); /* #010000 */ --rs-palette-peach-10: oklch(0.1 0.016 45.4); /* #070201 */ --rs-palette-peach-15: oklch(0.15 0.023 45.1); /* #130804 */ --rs-palette-peach-20: oklch(0.2 0.030 44.8); /* #21120b */ --rs-palette-peach-25: oklch(0.25 0.036 44.5); /* #301c13 */ --rs-palette-peach-30: oklch(0.3 0.043 44.2); /* #40271c */ --rs-palette-peach-35: oklch(0.35 0.049 43.9); /* #503225 */ --rs-palette-peach-40: oklch(0.4 0.055 43.6); /* #613e2f */ --rs-palette-peach-45: oklch(0.45 0.061 43.3); /* #724a39 */ --rs-palette-peach-50: oklch(0.5 0.067 43.0); /* #845644 */ --rs-palette-peach-55: oklch(0.55 0.073 42.7); /* #96634f */ --rs-palette-peach-60: oklch(0.6 0.079 42.4); /* #a9705a */ --rs-palette-peach-65: oklch(0.65 0.085 42.1); /* #bc7e66 */ --rs-palette-peach-70: oklch(0.7 0.091 41.8); /* #cf8b71 */ --rs-palette-peach-75: oklch(0.75 0.097 41.5); /* #e3997e */ --rs-palette-peach-80: oklch(0.8 0.083 41.2); /* #edac95 */ --rs-palette-peach-85: oklch(0.85 0.068 40.9); /* #f6c0ac */ --rs-palette-peach-90: oklch(0.9 0.051 40.6); /* #fdd4c5 */ --rs-palette-peach-95: oklch(0.95 0.016 40.3); /* #f8ebe7 */ --rs-palette-peach-98: oklch(0.98 0.003 40.1); /* #faf8f7 */ --rs-palette-peach-100: oklch(1 0.000 40.0); /* #ffffff */ /* neutral — Ink #191726 ~ neutral-20 -> Ivory #F4F1EF ~ neutral-95 (warm arc) */ --rs-palette-neutral-0: oklch(0 0.000 290.0); /* #000000 */ --rs-palette-neutral-5: oklch(0.05 0.014 290.0); /* #000001 */ --rs-palette-neutral-10: oklch(0.1 0.028 290.0); /* #03020b */ --rs-palette-neutral-15: oklch(0.15 0.028 290.0); /* #0b0916 */ --rs-palette-neutral-20: oklch(0.2 0.028 290.0); /* #161422 */ --rs-palette-neutral-25: oklch(0.25 0.028 290.0); /* #211f2e */ --rs-palette-neutral-30: oklch(0.3 0.026 290.0); /* #2d2c3a */ --rs-palette-neutral-35: oklch(0.35 0.025 290.0); /* #3a3947 */ --rs-palette-neutral-40: oklch(0.4 0.023 290.0); /* #474654 */ --rs-palette-neutral-45: oklch(0.45 0.021 290.0); /* #555361 */ --rs-palette-neutral-50: oklch(0.5 0.020 290.0); /* #63626e */ --rs-palette-neutral-55: oklch(0.55 0.018 290.0); /* #71707c */ --rs-palette-neutral-60: oklch(0.6 0.017 290.0); /* #807f8a */ --rs-palette-neutral-65: oklch(0.65 0.015 290.0); /* #8f8e98 */ --rs-palette-neutral-70: oklch(0.7 0.013 315.6); /* #a29ca4 */ --rs-palette-neutral-75: oklch(0.75 0.012 341.2); /* #b3abb0 */ --rs-palette-neutral-80: oklch(0.8 0.010 6.8); /* #c4bbbc */ --rs-palette-neutral-85: oklch(0.85 0.008 32.4); /* #d3ccca */ --rs-palette-neutral-90: oklch(0.9 0.007 58.0); /* #e1ddda */ --rs-palette-neutral-95: oklch(0.95 0.005 58.0); /* #f1eeeb */ --rs-palette-neutral-98: oklch(0.98 0.005 58.0); /* #fbf8f5 */ --rs-palette-neutral-100: oklch(1 0.000 58.0); /* #ffffff */ /* danger — error anchor #D65745 ~ danger-60 (warm brick) */ --rs-palette-danger-0: oklch(0 0.000 32.0); /* #000000 */ --rs-palette-danger-5: oklch(0.05 0.009 31.9); /* #010000 */ --rs-palette-danger-10: oklch(0.1 0.033 31.8); /* #0b0100 */ --rs-palette-danger-15: oklch(0.15 0.047 31.6); /* #1b0301 */ --rs-palette-danger-20: oklch(0.2 0.061 31.5); /* #2c0804 */ --rs-palette-danger-25: oklch(0.25 0.075 31.4); /* #3e1008 */ --rs-palette-danger-30: oklch(0.3 0.088 31.2); /* #51180f */ --rs-palette-danger-35: oklch(0.35 0.101 31.1); /* #652016 */ --rs-palette-danger-40: oklch(0.4 0.114 31.0); /* #792a1e */ --rs-palette-danger-45: oklch(0.45 0.127 30.9); /* #8e3326 */ --rs-palette-danger-50: oklch(0.5 0.139 30.8); /* #a43d2e */ --rs-palette-danger-55: oklch(0.55 0.152 30.6); /* #b94737 */ --rs-palette-danger-60: oklch(0.6 0.164 30.5); /* #d0513f */ --rs-palette-danger-65: oklch(0.65 0.152 30.4); /* #dc6654 */ --rs-palette-danger-70: oklch(0.7 0.140 30.2); /* #e87a68 */ --rs-palette-danger-75: oklch(0.75 0.127 30.1); /* #f38e7d */ --rs-palette-danger-80: oklch(0.8 0.112 30.0); /* #fea293 */ --rs-palette-danger-85: oklch(0.85 0.082 29.9); /* #ffbaae */ --rs-palette-danger-90: oklch(0.9 0.052 29.8); /* #ffd2ca */ --rs-palette-danger-95: oklch(0.95 0.024 29.6); /* #fee9e5 */ --rs-palette-danger-98: oklch(0.98 0.006 29.6); /* #fdf7f6 */ --rs-palette-danger-100: oklch(1 0.000 29.5); /* #ffffff */ /* success — anchor #3E9E7B ~ success-60 (muted jade) */ --rs-palette-success-0: oklch(0 0.000 166.0); /* #000000 */ --rs-palette-success-5: oklch(0.05 0.006 166.0); /* #000100 */ --rs-palette-success-10: oklch(0.1 0.021 166.0); /* #000502 */ --rs-palette-success-15: oklch(0.15 0.031 166.0); /* #000f08 */ --rs-palette-success-20: oklch(0.2 0.040 166.0); /* #011c12 */ --rs-palette-success-25: oklch(0.25 0.049 166.0); /* #03291c */ --rs-palette-success-30: oklch(0.3 0.057 166.0); /* #073727 */ --rs-palette-success-35: oklch(0.35 0.066 166.0); /* #0c4532 */ --rs-palette-success-40: oklch(0.4 0.074 166.0); /* #13543e */ --rs-palette-success-45: oklch(0.45 0.083 166.0); /* #1a644b */ --rs-palette-success-50: oklch(0.5 0.091 166.0); /* #217357 */ --rs-palette-success-55: oklch(0.55 0.099 166.0); /* #288464 */ --rs-palette-success-60: oklch(0.6 0.107 166.0); /* #2f9471 */ --rs-palette-success-65: oklch(0.65 0.099 166.0); /* #4ba281 */ --rs-palette-success-70: oklch(0.7 0.090 166.0); /* #63b092 */ --rs-palette-success-75: oklch(0.75 0.081 166.0); /* #7bbfa2 */ --rs-palette-success-80: oklch(0.8 0.071 166.0); /* #92cdb3 */ --rs-palette-success-85: oklch(0.85 0.059 166.0); /* #aadbc5 */ --rs-palette-success-90: oklch(0.9 0.047 166.0); /* #c2e8d7 */ --rs-palette-success-95: oklch(0.95 0.015 166.0); /* #e5f2ec */ --rs-palette-success-98: oklch(0.98 0.004 166.0); /* #f6f9f8 */ --rs-palette-success-100: oklch(1 0.000 166.0); /* #ffffff */ /* warning — anchor #E0A03A ~ warning-75 (warm amber) */ --rs-palette-warning-0: oklch(0 0.000 75.0); /* #000000 */ --rs-palette-warning-5: oklch(0.05 0.006 75.0); /* #010000 */ --rs-palette-warning-10: oklch(0.1 0.022 75.0); /* #060300 */ --rs-palette-warning-15: oklch(0.15 0.032 75.0); /* #130900 */ --rs-palette-warning-20: oklch(0.2 0.042 75.0); /* #211300 */ --rs-palette-warning-25: oklch(0.25 0.051 75.0); /* #301d01 */ --rs-palette-warning-30: oklch(0.3 0.060 75.0); /* #3f2903 */ --rs-palette-warning-35: oklch(0.35 0.069 75.0); /* #4f3407 */ --rs-palette-warning-40: oklch(0.4 0.078 75.0); /* #60410c */ --rs-palette-warning-45: oklch(0.45 0.087 75.0); /* #714d12 */ --rs-palette-warning-50: oklch(0.5 0.095 75.0); /* #835a18 */ --rs-palette-warning-55: oklch(0.55 0.104 75.0); /* #95681e */ --rs-palette-warning-60: oklch(0.6 0.112 75.0); /* #a77524 */ --rs-palette-warning-65: oklch(0.65 0.120 75.0); /* #ba832b */ --rs-palette-warning-70: oklch(0.7 0.129 75.0); /* #cd9132 */ --rs-palette-warning-75: oklch(0.75 0.137 75.0); /* #e0a039 */ --rs-palette-warning-80: oklch(0.8 0.120 75.0); /* #ebb25f */ --rs-palette-warning-85: oklch(0.85 0.101 75.0); /* #f5c581 */ --rs-palette-warning-90: oklch(0.9 0.079 75.0); /* #fdd7a3 */ --rs-palette-warning-95: oklch(0.95 0.026 75.0); /* #f9ecdc */ --rs-palette-warning-98: oklch(0.98 0.006 75.0); /* #fbf8f4 */ --rs-palette-warning-100: oklch(1 0.000 75.0); /* #ffffff */ /* info — anchor #4C8DD6 ~ info-60 (calm azure) */ --rs-palette-info-0: oklch(0 0.000 253.0); /* #000000 */ --rs-palette-info-5: oklch(0.05 0.009 253.0); /* #000001 */ --rs-palette-info-10: oklch(0.1 0.031 253.0); /* #00030c */ --rs-palette-info-15: oklch(0.15 0.043 253.0); /* #010b1c */ --rs-palette-info-20: oklch(0.2 0.054 253.0); /* #03162e */ --rs-palette-info-25: oklch(0.25 0.065 253.0); /* #07223f */ --rs-palette-info-30: oklch(0.3 0.075 253.0); /* #0e2e52 */ --rs-palette-info-35: oklch(0.35 0.084 253.0); /* #153b65 */ --rs-palette-info-40: oklch(0.4 0.094 253.0); /* #1d4979 */ --rs-palette-info-45: oklch(0.45 0.103 253.0); /* #26578d */ --rs-palette-info-50: oklch(0.5 0.112 253.0); /* #2f65a1 */ --rs-palette-info-55: oklch(0.55 0.121 253.0); /* #3874b6 */ --rs-palette-info-60: oklch(0.6 0.130 253.0); /* #4283cb */ --rs-palette-info-65: oklch(0.65 0.118 253.0); /* #5892d5 */ --rs-palette-info-70: oklch(0.7 0.106 253.0); /* #6da2df */ --rs-palette-info-75: oklch(0.75 0.094 253.0); /* #83b2e8 */ --rs-palette-info-80: oklch(0.8 0.080 253.0); /* #99c1f1 */ --rs-palette-info-85: oklch(0.85 0.065 253.0); /* #b0d1f8 */ --rs-palette-info-90: oklch(0.9 0.049 253.0); /* #c8e1ff */ --rs-palette-info-95: oklch(0.95 0.015 253.0); /* #e8eff9 */ --rs-palette-info-98: oklch(0.98 0.003 253.0); /* #f7f9fb */ --rs-palette-info-100: oklch(1 0.000 253.0); /* #ffffff */} /* ============================================================ 2. SEMANTIC COLOR ROLES ============================================================ */ /* ---- light (default) ---- */ :root { color-scheme: light dark; --rs-color-bg: var(--rs-palette-neutral-95); /* Ivory */ --rs-color-surface: var(--rs-palette-neutral-100); --rs-color-surface-muted: var(--rs-palette-neutral-98); --rs-color-border: var(--rs-palette-neutral-90); --rs-color-border-strong: var(--rs-palette-neutral-85); --rs-color-text: var(--rs-palette-neutral-20); /* Ink */ --rs-color-text-muted: var(--rs-palette-neutral-45); --rs-color-text-faint: var(--rs-palette-neutral-65); /* non-text UI only */ --rs-color-logo: var(--rs-palette-neutral-20); /* Ink mark on light */ --rs-color-primary: var(--rs-palette-indigo-55); --rs-color-on-primary: var(--rs-palette-indigo-100); --rs-color-primary-hover: var(--rs-palette-indigo-50); --rs-color-primary-active: var(--rs-palette-indigo-45); --rs-color-primary-container: var(--rs-palette-indigo-95); --rs-color-on-primary-container: var(--rs-palette-indigo-25); /* domain accents — identity/graphic use at exact brand tones; containers for tiles/chips. NOT status colors. */ --rs-color-accent-brand: var(--rs-palette-peach-75); --rs-color-accent-growth: var(--rs-palette-violet-60); --rs-color-accent-systems: var(--rs-palette-indigo-60); --rs-color-accent-brand-container: var(--rs-palette-peach-90); --rs-color-on-accent-brand-container: var(--rs-palette-peach-25); --rs-color-accent-growth-container: var(--rs-palette-violet-90); --rs-color-on-accent-growth-container: var(--rs-palette-violet-25); --rs-color-accent-systems-container: var(--rs-palette-indigo-90); --rs-color-on-accent-systems-container: var(--rs-palette-indigo-25); --rs-color-danger: var(--rs-palette-danger-55); --rs-color-on-danger: var(--rs-palette-danger-100); --rs-color-danger-hover: var(--rs-palette-danger-50); --rs-color-danger-container: var(--rs-palette-danger-95); --rs-color-on-danger-container: var(--rs-palette-danger-25); --rs-color-success: var(--rs-palette-success-50); --rs-color-on-success: var(--rs-palette-success-100); --rs-color-success-container: var(--rs-palette-success-95); --rs-color-on-success-container: var(--rs-palette-success-25); --rs-color-warning: var(--rs-palette-warning-75); --rs-color-on-warning: var(--rs-palette-warning-15); --rs-color-warning-container: var(--rs-palette-warning-95); --rs-color-on-warning-container: var(--rs-palette-warning-25); --rs-color-info: var(--rs-palette-info-50); --rs-color-on-info: var(--rs-palette-info-100); --rs-color-info-container: var(--rs-palette-info-95); --rs-color-on-info-container: var(--rs-palette-info-25); --rs-color-focus-ring: color-mix(in oklab, var(--rs-color-primary) 22%, transparent); --rs-color-scrim: color-mix(in oklab, var(--rs-palette-neutral-10) 40%, transparent); /* aurora washes (IdP heritage, now brand tri-color) — consumed by .rs-bg-aurora / .rs-bg-brandsweep */ --rs-aurora-1: color-mix(in oklab, var(--rs-palette-indigo-60) 10%, transparent); --rs-aurora-2: color-mix(in oklab, var(--rs-palette-violet-60) 6%, transparent); --rs-aurora-3: color-mix(in oklab, var(--rs-palette-peach-75) 9%, transparent); --rs-shadow-card: 0 24px 70px oklch(0.25 0.03 290 / 0.1), 0 2px 8px oklch(0.25 0.03 290 / 0.04); --rs-shadow-pop: 0 12px 40px oklch(0.25 0.03 290 / 0.16), 0 2px 8px oklch(0.25 0.03 290 / 0.06); } /* ---- dark role remap (media query; data-theme override below) ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rs-color-bg: var(--rs-palette-neutral-15); --rs-color-surface: var(--rs-palette-neutral-20); --rs-color-surface-muted: var(--rs-palette-neutral-25); --rs-color-border: var(--rs-palette-neutral-25); --rs-color-border-strong: var(--rs-palette-neutral-35); --rs-color-text: var(--rs-palette-neutral-95); /* Ivory */ --rs-color-text-muted: var(--rs-palette-neutral-70); --rs-color-text-faint: var(--rs-palette-neutral-55); --rs-color-logo: var(--rs-palette-neutral-95); /* Ivory mark on dark */ --rs-color-primary: var(--rs-palette-indigo-70); --rs-color-on-primary: var(--rs-palette-indigo-15); --rs-color-primary-hover: var(--rs-palette-indigo-75); --rs-color-primary-active: var(--rs-palette-indigo-80); --rs-color-primary-container: var(--rs-palette-indigo-25); --rs-color-on-primary-container: var(--rs-palette-indigo-90); --rs-color-accent-brand: var(--rs-palette-peach-75); --rs-color-accent-growth: var(--rs-palette-violet-70); --rs-color-accent-systems: var(--rs-palette-indigo-70); --rs-color-accent-brand-container: var(--rs-palette-peach-25); --rs-color-on-accent-brand-container: var(--rs-palette-peach-90); --rs-color-accent-growth-container: var(--rs-palette-violet-25); --rs-color-on-accent-growth-container: var(--rs-palette-violet-90); --rs-color-accent-systems-container: var(--rs-palette-indigo-25); --rs-color-on-accent-systems-container: var(--rs-palette-indigo-90); --rs-color-danger: var(--rs-palette-danger-75); --rs-color-on-danger: var(--rs-palette-danger-15); --rs-color-danger-hover: var(--rs-palette-danger-80); --rs-color-danger-container: var(--rs-palette-danger-20); --rs-color-on-danger-container: var(--rs-palette-danger-90); --rs-color-success: var(--rs-palette-success-75); --rs-color-on-success: var(--rs-palette-success-15); --rs-color-success-container: var(--rs-palette-success-20); --rs-color-on-success-container: var(--rs-palette-success-90); --rs-color-warning: var(--rs-palette-warning-75); --rs-color-on-warning: var(--rs-palette-warning-15); --rs-color-warning-container: var(--rs-palette-warning-20); --rs-color-on-warning-container: var(--rs-palette-warning-90); --rs-color-info: var(--rs-palette-info-75); --rs-color-on-info: var(--rs-palette-info-15); --rs-color-info-container: var(--rs-palette-info-20); --rs-color-on-info-container: var(--rs-palette-info-90); --rs-color-focus-ring: color-mix(in oklab, var(--rs-color-primary) 28%, transparent); --rs-color-scrim: color-mix(in oklab, var(--rs-palette-neutral-0) 55%, transparent); --rs-aurora-1: color-mix(in oklab, var(--rs-palette-indigo-70) 13%, transparent); --rs-aurora-2: color-mix(in oklab, var(--rs-palette-violet-70) 8%, transparent); --rs-aurora-3: color-mix(in oklab, var(--rs-palette-peach-75) 6%, transparent); --rs-shadow-card: 0 30px 80px oklch(0 0 0 / 0.5), inset 0 1px 0 oklch(1 0 0 / 0.04); --rs-shadow-pop: 0 16px 48px oklch(0 0 0 / 0.55), inset 0 1px 0 oklch(1 0 0 / 0.05); } } :root[data-theme="dark"] { --rs-color-bg: var(--rs-palette-neutral-15); --rs-color-surface: var(--rs-palette-neutral-20); --rs-color-surface-muted: var(--rs-palette-neutral-25); --rs-color-border: var(--rs-palette-neutral-25); --rs-color-border-strong: var(--rs-palette-neutral-35); --rs-color-text: var(--rs-palette-neutral-95); --rs-color-text-muted: var(--rs-palette-neutral-70); --rs-color-text-faint: var(--rs-palette-neutral-55); --rs-color-logo: var(--rs-palette-neutral-95); --rs-color-primary: var(--rs-palette-indigo-70); --rs-color-on-primary: var(--rs-palette-indigo-15); --rs-color-primary-hover: var(--rs-palette-indigo-75); --rs-color-primary-active: var(--rs-palette-indigo-80); --rs-color-primary-container: var(--rs-palette-indigo-25); --rs-color-on-primary-container: var(--rs-palette-indigo-90); --rs-color-accent-brand: var(--rs-palette-peach-75); --rs-color-accent-growth: var(--rs-palette-violet-70); --rs-color-accent-systems: var(--rs-palette-indigo-70); --rs-color-accent-brand-container: var(--rs-palette-peach-25); --rs-color-on-accent-brand-container: var(--rs-palette-peach-90); --rs-color-accent-growth-container: var(--rs-palette-violet-25); --rs-color-on-accent-growth-container: var(--rs-palette-violet-90); --rs-color-accent-systems-container: var(--rs-palette-indigo-25); --rs-color-on-accent-systems-container: var(--rs-palette-indigo-90); --rs-color-danger: var(--rs-palette-danger-75); --rs-color-on-danger: var(--rs-palette-danger-15); --rs-color-danger-hover: var(--rs-palette-danger-80); --rs-color-danger-container: var(--rs-palette-danger-20); --rs-color-on-danger-container: var(--rs-palette-danger-90); --rs-color-success: var(--rs-palette-success-75); --rs-color-on-success: var(--rs-palette-success-15); --rs-color-success-container: var(--rs-palette-success-20); --rs-color-on-success-container: var(--rs-palette-success-90); --rs-color-warning: var(--rs-palette-warning-75); --rs-color-on-warning: var(--rs-palette-warning-15); --rs-color-warning-container: var(--rs-palette-warning-20); --rs-color-on-warning-container: var(--rs-palette-warning-90); --rs-color-info: var(--rs-palette-info-75); --rs-color-on-info: var(--rs-palette-info-15); --rs-color-info-container: var(--rs-palette-info-20); --rs-color-on-info-container: var(--rs-palette-info-90); --rs-color-focus-ring: color-mix(in oklab, var(--rs-color-primary) 28%, transparent); --rs-color-scrim: color-mix(in oklab, var(--rs-palette-neutral-0) 55%, transparent); --rs-aurora-1: color-mix(in oklab, var(--rs-palette-indigo-70) 13%, transparent); --rs-aurora-2: color-mix(in oklab, var(--rs-palette-violet-70) 8%, transparent); --rs-aurora-3: color-mix(in oklab, var(--rs-palette-peach-75) 6%, transparent); --rs-shadow-card: 0 30px 80px oklch(0 0 0 / 0.5), inset 0 1px 0 oklch(1 0 0 / 0.04); --rs-shadow-pop: 0 16px 48px oklch(0 0 0 / 0.55), inset 0 1px 0 oklch(1 0 0 / 0.05); } /* ============================================================ 3. TYPOGRAPHY — Clash Display + Clash Grotesk (see fonts.css) ============================================================ */ :root { --rs-font-display: "Clash Display", "Avenir Next", "Segoe UI", sans-serif; --rs-font-body: "Clash Grotesk", "Avenir Next", "Segoe UI", sans-serif; --rs-font-mono: ui-monospace, "JetBrains Mono", "Cascadia Code", monospace; --rs-text-xs: 0.75rem; /* 12 — table meta, badges */ --rs-text-sm: 0.875rem; /* 14 — dense UI default */ --rs-text-base: 1rem; /* 16 — forms, reading */ --rs-text-lg: 1.125rem; /* 18 — section titles */ --rs-text-xl: 1.375rem; /* 22 — page titles */ --rs-text-2xl: 1.75rem; /* 28 — display */ --rs-text-3xl: 2.25rem; /* 36 — hero/auth display */ --rs-leading-tight: 1.2; --rs-leading-normal: 1.5; --rs-leading-relaxed: 1.65; --rs-weight-regular: 400; --rs-weight-medium: 500; --rs-weight-semibold: 600; --rs-weight-display: 570; /* Clash Display variable axis — headings */ } /* ============================================================ 4. STRUCTURE — spacing, radius, focus, motion, layout ============================================================ */ :root { /* 4px grid */ --rs-space-1: 0.25rem; --rs-space-2: 0.5rem; --rs-space-3: 0.75rem; --rs-space-4: 1rem; --rs-space-5: 1.25rem; --rs-space-6: 1.5rem; --rs-space-8: 2rem; --rs-space-10: 2.5rem; --rs-space-12: 3rem; --rs-radius-xs: 6px; /* badges, keys */ --rs-radius-sm: 10px; /* inputs, buttons */ --rs-radius-md: 14px; /* menu items, tiles */ --rs-radius-lg: 18px; /* popovers, panels */ --rs-radius-xl: 28px; /* cards (IdP seed) */ --rs-radius-full: 999px; --rs-focus-ring: 0 0 0 4px var(--rs-color-focus-ring); --rs-dur-fast: 120ms; --rs-dur-base: 200ms; --rs-ease: cubic-bezier(0.2, 0, 0, 1); --rs-topbar-height: 3.5rem; /* 56 */ } @media (prefers-reduced-motion: reduce) { :root { --rs-dur-fast: 0ms; --rs-dur-base: 0ms; } }