/* ============================================ S&R Studio — Design Tokens (OKLCH) Generated from oklch-audit.html v1 ============================================ Lightness ladder (shared across all scales): 50 → 97% light tint 100 → 92% 200 → 84% 300 → 76% 400 → 68% 500 → 60% midpoint 600 → 52% 700 → 44% 800 → 33% 900 → 22% 950 → 16% near-black Hue map: Warm 264° cool near-achromatic neutrals Rose 20° saturated warm Amber 55° orange bridge Green 155° natural accent Accent 264° blue (base #3366FF) ============================================ */ :root { /* ------------------------------------------------- 1. Cool Neutrals · hue 264° Near-achromatic grays — very slight cool undertone ------------------------------------------------- */ --warm-50: #f8f8fa; /* oklch(97.5% 0.003 264) */ --warm-100: #ececee; /* oklch(93.0% 0.004 264) */ --warm-200: #d5d5d8; /* oklch(85.0% 0.004 264) */ --warm-300: #bdbdc1; /* oklch(77.0% 0.004 264) */ --warm-400: #a5a5a9; /* oklch(69.0% 0.003 264) */ --warm-500: #8e8e93; /* oklch(61.0% 0.003 264) */ --warm-600: #78787d; /* oklch(53.0% 0.003 264) */ --warm-700: #636367; /* oklch(45.0% 0.003 264) */ --warm-800: #48484b; /* oklch(34.0% 0.002 264) */ --warm-900: #2c2c2e; /* oklch(23.0% 0.002 264) */ --warm-950: #1c1c1e; /* oklch(17.0% 0.002 264) */ /* ------------------------------------------------- 2. Accent (Blue) · hue 264° · base #3366FF Primary brand accent — Gaussian chroma peak at 500-600 ------------------------------------------------- */ --accent-50: #f0f5ff; /* oklch(97.0% 0.014 264) */ --accent-100: #d8e5ff; /* oklch(92.0% 0.038 264) */ --accent-200: #b1cbff; /* oklch(84.0% 0.079 264) */ --accent-300: #89b0ff; /* oklch(76.0% 0.123 264) */ --accent-400: #6293ff; /* oklch(68.0% 0.169 264) */ --accent-500: #4076f5; /* oklch(60.0% 0.200 264) */ --accent-600: #2a5cda; /* oklch(52.0% 0.200 264) */ --accent-700: #1d47b1; /* oklch(44.0% 0.175 264) */ --accent-800: #0d2c7c; /* oklch(33.0% 0.140 264) */ --accent-900: #031448; /* oklch(22.0% 0.100 264) */ --accent-950: #01072f; /* oklch(16.0% 0.080 264) */ /* ------------------------------------------------- 3. Amber · hue 55° Warm orange bridge — analogous to warm (43° gap) ------------------------------------------------- */ --amber-50: #fff2ea; /* oklch(97.0% 0.018 55) */ --amber-100: #ffddc7; /* oklch(92.0% 0.049 55) */ --amber-200: #ffb98a; /* oklch(84.0% 0.102 55) */ --amber-300: #ef9a5d; /* oklch(76.0% 0.128 55) */ --amber-400: #dd7c2c; /* oklch(68.0% 0.149 55) */ --amber-500: #c16300; /* oklch(60.0% 0.149 55) */ --amber-600: #9f5000; /* oklch(52.0% 0.129 55) */ --amber-700: #7f3f00; /* oklch(44.0% 0.109 55) */ --amber-800: #542700; /* oklch(33.0% 0.082 55) */ --amber-900: #2d1200; /* oklch(22.0% 0.055 55) */ --amber-950: #1a0800; /* oklch(16.0% 0.041 55) */ /* ------------------------------------------------- 4. Green · hue 155° Natural / sustainable accent — triadic to purple ------------------------------------------------- */ --green-50: #ddffe7; /* oklch(97.0% 0.047 155) */ --green-100: #c8f0d5; /* oklch(92.0% 0.056 155) */ --green-200: #a4dab5; /* oklch(84.0% 0.075 155) */ --green-300: #80c397; /* oklch(76.0% 0.093 155) */ --green-400: #5cac7b; /* oklch(68.0% 0.108 155) */ --green-500: #3b9461; /* oklch(60.0% 0.117 155) */ --green-600: #1d7c4a; /* oklch(52.0% 0.117 155) */ --green-700: #016337; /* oklch(44.0% 0.108 155) */ --green-800: #004122; /* oklch(33.0% 0.082 155) */ --green-900: #00220f; /* oklch(22.0% 0.055 155) */ --green-950: #001206; /* oklch(16.0% 0.040 155) */ /* ------------------------------------------------- 5. Rose · hue 20° Warm neutrals at full saturation — inviting, human ------------------------------------------------- */ --rose-50: #fff1f1; /* oklch(97.0% 0.015 20) */ --rose-100: #ffdad9; /* oklch(92.0% 0.041 20) */ --rose-200: #feb4b3; /* oklch(84.0% 0.087 20) */ --rose-300: #ee9494; /* oklch(76.0% 0.109 20) */ --rose-400: #db7677; /* oklch(68.0% 0.127 20) */ --rose-500: #c45a5d; /* oklch(60.0% 0.137 20) */ --rose-600: #a94147; /* oklch(52.0% 0.137 20) */ --rose-700: #8b2e34; /* oklch(44.0% 0.127 20) */ --rose-800: #61151d; /* oklch(33.0% 0.109 20) */ --rose-900: #390108; /* oklch(22.0% 0.087 20) */ --rose-950: #230003; /* oklch(16.0% 0.065 20) */ /* ------------------------------------------------- Semantic Tokens ------------------------------------------------- */ /* Surfaces */ --surface-page: var(--warm-50); --surface-card: #ffffff; --surface-muted: var(--warm-100); --surface-inverse: var(--warm-900); /* Text */ --text-primary: var(--warm-900); --text-secondary: var(--warm-600); --text-muted: var(--warm-400); --text-inverse: var(--warm-50); --text-accent: var(--accent-700); /* Interactive — primary (purple) */ --interactive-primary: var(--accent-600); --interactive-primary-hover: var(--accent-700); --interactive-primary-active: var(--accent-800); --interactive-primary-text: #ffffff; /* Interactive — secondary (amber) */ --interactive-secondary: var(--amber-500); --interactive-secondary-hover: var(--amber-600); --interactive-secondary-active: var(--amber-700); --interactive-secondary-text: #ffffff; /* Borders */ --border-default: var(--warm-200); --border-strong: var(--warm-300); --border-accent: var(--accent-300); /* Status / feedback */ --status-success: var(--green-600); --status-warning: var(--amber-500); --status-info: var(--accent-500); --status-highlight: var(--rose-500); /* Focus ring */ --focus-ring: var(--accent-400); }