/* ────────────────────────────────────────────────────────────────────────── Sudoku Prime — Design Tokens Quiet Library: cream paper + deep ink + sage accent + aged gold premium Mapped to SwiftUI semantic colors. Every value here corresponds to a named token an iOS engineer can implement as Color / Font / CGFloat. ────────────────────────────────────────────────────────────────────── */ :root { /* ── Surfaces ─────────────────────────────────────────────────────── */ --paper: oklch(0.984 0.006 85); /* base background (light) */ --paper-2: oklch(0.970 0.008 85); /* grouped background */ --paper-3: oklch(0.955 0.010 85); /* elevated surface */ --card: oklch(1.000 0 0); /* card surface (light) */ --hairline: oklch(0.880 0.006 85); /* divider */ --rule: oklch(0.820 0.008 85); /* stronger separator */ /* ── Ink (foreground) ─────────────────────────────────────────────── */ --ink: oklch(0.200 0.014 250); /* primary text */ --ink-2: oklch(0.380 0.012 250); /* secondary text */ --ink-3: oklch(0.560 0.010 250); /* tertiary text */ --ink-4: oklch(0.720 0.008 250); /* placeholder / disabled */ /* ── Accent: Sage Ink ─────────────────────────────────────────────── */ --accent: oklch(0.450 0.060 185); /* primary accent */ --accent-deep: oklch(0.360 0.060 185); /* pressed / heading */ --accent-soft: oklch(0.890 0.040 185); /* selected cell bg */ --accent-softer: oklch(0.940 0.025 185); /* peer highlight */ --accent-medium: oklch(0.870 0.055 185); /* same-value highlight */ --on-accent: oklch(0.985 0.006 85); /* ── Coach: Warm Amber (distinct from selection) ─────────────────── */ --coach: oklch(0.660 0.110 75); /* coach focus stroke */ --coach-soft: oklch(0.930 0.075 80); /* coach cell bg */ /* ── Premium / Lock: Aged Gold ───────────────────────────────────── */ --gold: oklch(0.620 0.105 72); --gold-deep: oklch(0.480 0.100 65); --gold-soft: oklch(0.945 0.045 80); /* ── Semantic state ──────────────────────────────────────────────── */ --danger: oklch(0.510 0.150 28); /* mistake (+ dashed cue) */ --danger-soft: oklch(0.920 0.045 28); --success: oklch(0.500 0.090 145); --success-soft: oklch(0.930 0.040 145); --warning: oklch(0.660 0.120 75); /* ── Board grid ──────────────────────────────────────────────────── */ --grid-line: oklch(0.870 0.008 85); /* hairline */ --grid-box: oklch(0.350 0.014 250); /* thick box separator */ --given-text: oklch(0.180 0.014 250); --user-text: oklch(0.420 0.060 185); /* sage ink */ --pencil-text: oklch(0.620 0.012 250); --mistake-text: oklch(0.500 0.150 28); /* ── Typography ───────────────────────────────────────────────────── */ --font-ui: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif; --font-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif; --font-round: "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue Rounded", "Nunito", system-ui, sans-serif; --font-serif: "Source Serif 4", "New York", "Charter", "Iowan Old Style", Georgia, serif; --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace; /* Type scale — Dynamic Type anchored, max at xxxLarge */ --t-display: clamp(34px, 5.2vw, 56px); --t-title: 28px; --t-title2: 22px; --t-headline: 17px; --t-body: 17px; --t-callout: 16px; --t-subhead: 15px; --t-footnote: 13px; --t-caption: 12px; --t-caption2: 11px; /* Board digit scales */ --t-digit: clamp(22px, 5vw, 30px); --t-pencil: 9px; --t-cage-sum: 10px; /* ── Spacing 4pt grid ─────────────────────────────────────────────── */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* ── Radii (Apple continuous-corner intent) ─────────────────────── */ --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px; /* ── Elevation (prefer materials) ────────────────────────────────── */ --mat-thin: rgba(255, 255, 255, 0.55); --mat-thin-stroke: rgba(255, 255, 255, 0.65); --mat-reg: rgba(255, 255, 255, 0.75); --shadow-1: 0 1px 2px oklch(0.20 0.014 250 / 0.06), 0 4px 14px oklch(0.20 0.014 250 / 0.06); --shadow-2: 0 2px 6px oklch(0.20 0.014 250 / 0.08), 0 18px 40px oklch(0.20 0.014 250 / 0.10); --shadow-float: 0 10px 30px oklch(0.20 0.014 250 / 0.14); /* ── Motion ──────────────────────────────────────────────────────── */ --m-fast: 140ms; --m-base: 220ms; --m-slow: 360ms; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* easeOutQuint, calm */ --spring: cubic-bezier(0.4, 1.4, 0.6, 1); /* gentle overshoot */ } /* Dark mode tokens — same semantic names, ink-night surfaces */ :root[data-theme="dark"], .dark { --paper: oklch(0.150 0.010 250); --paper-2: oklch(0.180 0.012 250); --paper-3: oklch(0.220 0.014 250); --card: oklch(0.205 0.012 250); --hairline: oklch(0.300 0.010 250); --rule: oklch(0.400 0.012 250); --ink: oklch(0.970 0.006 85); --ink-2: oklch(0.800 0.008 85); --ink-3: oklch(0.620 0.010 85); --ink-4: oklch(0.460 0.012 85); --accent: oklch(0.700 0.075 185); --accent-deep: oklch(0.820 0.060 185); --accent-soft: oklch(0.350 0.050 185); --accent-softer: oklch(0.260 0.030 185); --accent-medium: oklch(0.380 0.060 185); --on-accent: oklch(0.150 0.010 250); --coach: oklch(0.760 0.110 75); --coach-soft: oklch(0.340 0.060 75); --gold: oklch(0.770 0.110 78); --gold-deep: oklch(0.620 0.110 72); --gold-soft: oklch(0.300 0.060 75); --danger: oklch(0.680 0.150 28); --danger-soft: oklch(0.340 0.080 28); --success: oklch(0.700 0.110 145); --success-soft: oklch(0.310 0.060 145); --grid-line: oklch(0.310 0.010 250); --grid-box: oklch(0.620 0.012 250); --given-text: oklch(0.970 0.006 85); --user-text: oklch(0.760 0.080 185); --pencil-text: oklch(0.560 0.012 250); --mistake-text: oklch(0.730 0.140 28); --mat-thin: rgba(28, 30, 36, 0.55); --mat-thin-stroke: rgba(255, 255, 255, 0.08); --mat-reg: rgba(28, 30, 36, 0.78); --shadow-1: 0 1px 2px rgba(0,0,0,0.4), 0 4px 14px rgba(0,0,0,0.35); --shadow-2: 0 2px 6px rgba(0,0,0,0.45), 0 18px 40px rgba(0,0,0,0.45); --shadow-float: 0 10px 30px rgba(0,0,0,0.55); } /* High contrast — strengthen highlights, darken dividers */ :root[data-contrast="high"] { --hairline: oklch(0.660 0.010 85); --rule: oklch(0.520 0.010 85); --grid-line: oklch(0.580 0.012 85); --grid-box: oklch(0.180 0.014 250); --accent-soft: oklch(0.820 0.080 185); --accent-softer: oklch(0.890 0.055 185); } /* ─────────── Cosmetic themes (Premium IAP) ────────────────────────── */ /* Paper — warm cream + book-ink with slight grain feel */ [data-cosmetic="paper"] { --paper: oklch(0.965 0.018 78); --paper-2: oklch(0.945 0.022 78); --card: oklch(0.985 0.010 78); --accent: oklch(0.420 0.080 50); /* warmer brown-red ink */ --user-text: oklch(0.440 0.080 50); --accent-soft: oklch(0.910 0.045 60); --accent-softer: oklch(0.945 0.025 60); --grid-line: oklch(0.850 0.020 75); --grid-box: oklch(0.340 0.020 75); } /* Sepia — golden vellum, low contrast */ [data-cosmetic="sepia"] { --paper: oklch(0.935 0.040 80); --paper-2: oklch(0.905 0.045 78); --card: oklch(0.955 0.030 80); --ink: oklch(0.260 0.030 60); --ink-2: oklch(0.420 0.030 60); --accent: oklch(0.450 0.090 55); --user-text: oklch(0.460 0.080 55); --accent-soft: oklch(0.880 0.060 65); --grid-line: oklch(0.820 0.045 75); --grid-box: oklch(0.380 0.040 65); } /* Mono — pure neutral, single-hue restraint */ [data-cosmetic="mono"] { --paper: oklch(0.985 0 0); --paper-2: oklch(0.965 0 0); --card: oklch(1 0 0); --accent: oklch(0.300 0 0); --accent-deep: oklch(0.180 0 0); --user-text: oklch(0.300 0 0); --accent-soft: oklch(0.900 0 0); --accent-softer: oklch(0.940 0 0); --accent-medium: oklch(0.860 0 0); --grid-line: oklch(0.850 0 0); --grid-box: oklch(0.250 0 0); } [data-cosmetic="mono"][data-theme="dark"] { --paper: oklch(0.140 0 0); --paper-2: oklch(0.180 0 0); --card: oklch(0.210 0 0); --accent: oklch(0.880 0 0); --user-text: oklch(0.860 0 0); --accent-soft: oklch(0.340 0 0); --grid-line: oklch(0.300 0 0); --grid-box: oklch(0.640 0 0); }