/** * skins.css — Dialed's ONE token engine (SLICE C2) * ============================================================================ * 10 skins (H5, 2026-09-17: light gold · blush · orchid · iris · sage; dark onyx · midnight · espresso · garnet · pine; gold is the default) × 2 tones, mapped onto the PLATFORM'S canonical token vocabulary * (the names pages actually read: --text-primary, --iris, --border, --pearl-*, * --sidebar-*, --success…). Set `data-palette` + `data-tone` on and the * whole platform reskins — no per-page CSS. * * CONTRACT * * - data-tone → structural tokens (text/bg/border/pearl/semantic/sidebar) * - data-palette → the skin's canvas + accent + mesh + section tints * Applied BEFORE first paint by js/skin-apply.js (no FOUC). * * WHY THIS IS THE UNLOCK (per master plan C2) * 123 files locally redefine --iris/--pearl; a local :root beats this sheet. * Stripping those overrides is the companion step — this sheet is inert until * it's the ONLY place the values are set. Load it LAST, after page styles. * * PALETTES (17): ash blush bone clay espresso fern garnet gold graphite iris * midnight onyx orchid pearl pine sage slate * light: bone ash graphite sage gold clay fern pearl iris blush orchid * dark: onyx slate espresso garnet pine midnight * * The palette anchors below are lifted verbatim from mocks/admin-skins-v3.html, * the reference Elle approved. Do not drift them without re-approving the mock. * ============================================================================ */ /* ─────────────────────────── TONE BASES ───────────────────────────────────── Structural tokens expressed in terms of each skin's --accent / --deep / --canvas. A skin only has to set those three families; the tone supplies the rest of the platform vocabulary. */ :root, :root[data-tone="light"]{ /* light is the DEFAULT tone — tokens resolve even before a skin is applied */ --on-accent: #FDFCFA; /* text/icon ON the accent — light skins have darker accents → white reads */ /* Primary-button fill, PAIRED with --on-accent so the pair always clears AA. White text → deepen the accent so white reads. (Dark-text skins override.) */ --btn-primary-bg: linear-gradient(135deg, color-mix(in oklab,var(--accent),var(--deep) 30%), color-mix(in oklab,var(--accent),var(--deep) 56%)); /* destructive button — matched with --on-danger so the pair clears AA (deep red, white text) */ --on-danger: #FDFCFA; --btn-danger-bg: linear-gradient(135deg, #B23B3B, #8E2E2E); /* TEXT-SAFE ink of the brand accents (AA ≥4.5 on the glass card). The brand --accent/--teal stay for fills, borders, orbs, wordmark, active states; TEXT (eyebrows, labels, links, badges) uses these instead. */ --accent-ink: color-mix(in oklab, var(--accent-deep), var(--deep) 30%); /* deepened accent ramp — reads as small text on light glass + accent-tint badges */ --teal-ink: #235252; /* deep teal — AA on glass AND bare mesh (brand teal #4A9999 is 2.5:1) */ --text-primary: #2D2438; --text-secondary: color-mix(in oklab, var(--deep), transparent 20%); /* AA held (deep ≈ ink-dark in every palette); the old rgba(45,36,56,.80) was IRIS-flavored ink on all 11 light palettes — neutrals now lean each skin's own hue (Apple bench class 04 / desktop-finish 08-23) */ --text-slate: rgba(45,36,56,.80); --text-charcoal: #2D2438; --text-dark: #2D2438; --text-muted: rgba(45,36,56,.74); /* AA-body (alpha-composited over glass; was .64 → 4.2:1) */ --text-tertiary: rgba(45,36,56,.66); /* .44 -> .66 (2026-08-06). At .44 this token could NOT reach 4.5:1 on ANY ground in the system: 2.60:1 on the lightest card, 2.55:1 on the warmest page. A TEXT token that is illegal for text is a bug in the book, not in the 66 places that used it. .66 clears AA with margin and still sits below --text-muted (.74), so the hierarchy survives. */ --text-on-dark: #FDFCFA; --bg-page: var(--canvas); --bg-primary: var(--canvas); /* Glassy: translucent so the mesh canvas drifts through. Card blur frosts it. */ --bg-secondary: color-mix(in oklab, color-mix(in oklab, var(--canvas), #fff 52%), transparent 30%); --bg-card: color-mix(in oklab, color-mix(in oklab, var(--canvas), #fff 70%), transparent 32%); /* Every surface token above is deliberately TRANSLUCENT: it is meant to sit on the canvas and let the mesh through. A FLOATING panel (draft tray, menu, popover) has no such guarantee - it composites onto whatever page content happens to be behind it, which makes its text contrast unpredictable and was measured failing AA. --bg-card-solid is the same colour with the transparency resolved, for panels that float. (2026-08-17) */ --bg-card-solid: color-mix(in oklab, var(--canvas), #fff 70%); /* WORDMARK — LAW 23 fixes these stops verbatim per tone, and they are NOT the same pair: a light-tone wordmark on a dark ground renders near-invisible (measured on pages/dial.html, 2026-08-19). Two-stop, 90deg, static. */ --wordmark-from: #2C2C2C; --wordmark-to: #7A6FA8; /* SCRIM — the wash behind a modal, and it is TONE-AWARE for a reason Elle named on 2026-08-18 ("i want true glass on dark and light but i need design to support light glass. apple knows"). A DARK veil under LIGHT glass can only make mud: the glass composites the dark backdrop through itself and both planes land on the same muddy mid-tone, which is exactly why compose "didn't pop". Apple dims a light appearance with a LIGHT wash. So: on light tones the scrim barely dims and mostly desaturates, letting near-white glass read as clearly above the page; on dark tones it goes deep. */ --scrim: color-mix(in oklab, var(--graphite), transparent 74%); --bg-elevated: color-mix(in oklab, color-mix(in oklab, var(--canvas), #fff 80%), transparent 22%); --bg-hover: color-mix(in oklab, var(--deep), transparent 95%); --pearl: color-mix(in oklab, var(--canvas), #fff 62%); --pearl-white: color-mix(in oklab, var(--canvas), #fff 70%); --pearl-ivory: color-mix(in oklab, var(--canvas), #fff 52%); --pearl-cream: color-mix(in oklab, var(--canvas), #fff 58%); --pearl-warm: color-mix(in oklab, var(--canvas), #fff 46%); --pearl-primary: color-mix(in oklab, var(--canvas), #fff 66%); --pearl-secondary:color-mix(in oklab, var(--canvas), #fff 50%); --pearl-silver: color-mix(in oklab, var(--canvas), #fff 40%); --border: color-mix(in oklab, var(--deep), transparent 88%); --border-light: rgba(45,36,56,.08); --border-primary: rgba(45,36,56,.14); --glass: rgba(255,255,255,.50); --glass-hi: rgba(255,255,255,.72); --card: rgba(255,255,255,.70); --card-line: rgba(45,36,56,.07); /* --surface / --surface-2: the CONTENT surfaces. Distinct from --card/--glass, which are decorative films (in dark, --card is 5% opaque, so text on it is effectively text on the mesh and cannot hold AA). Anything carrying body text sits on --surface. This is the recipe the graded cards mock arrived at and the reason it passes 17 skins where the older framework did not. */ --surface: color-mix(in oklab, var(--pearl-white), transparent 12%); --surface-2: color-mix(in oklab, var(--pearl-white), transparent 22%); /* The band's near-whites carry each palette's OWN hue (deep-tinted) — the flat constant made every rail identical across 17 skins (desktop-finish 08-23). AA holds: ~92% white over the deep band. */ --rail-ink: color-mix(in oklab, color-mix(in oklab, #FDFCFA, var(--deep) 7%), transparent 4%); --rail-ink-2: color-mix(in oklab, color-mix(in oklab, #FDFCFA, var(--deep) 10%), transparent 36%); --rail-ink-3: color-mix(in oklab, color-mix(in oklab, #FDFCFA, var(--deep) 12%), transparent 60%); --rail-line: rgba(255,255,255,.13); --hi: rgba(255,255,255,.90); } :root[data-tone="dark"]{ --on-accent: #16121C; /* dark skins use light/pastel accents → dark text reads on them */ /* dark text → keep the accent LIGHT so dark text reads (deepening would hurt it). */ --btn-primary-bg: linear-gradient(135deg, var(--accent), color-mix(in oklab,var(--accent),#ffffff 14%)); /* dark: danger is a light red → dark text reads on it */ --on-danger: #2A1213; --btn-danger-bg: linear-gradient(135deg, var(--danger), color-mix(in oklab,var(--danger),#ffffff 12%)); /* dark skins already use light/pastel accents → the accent itself reads as text; teal gets a light member so the eyebrow clears AA on the dark glass card. */ --accent-ink: var(--accent); --teal-ink: #86D9C6; /* light teal — reads on dark glass (brand teal #4A9999 is 3.7:1) */ --text-primary: rgba(253,252,250,.96); --text-secondary: color-mix(in oklab, color-mix(in oklab, var(--accent), #FDFCFA 84%), transparent 16%); /* .64 → .72 → .80. The light tone was raised to .80 for this exact reason and the dark tone never was: at .72 it measured 4.1-4.2:1 for normal text in slate, espresso and pine. Raising light text on a dark ground only ever increases contrast, so nothing can regress. */ --text-slate: rgba(253,252,250,.72); --text-charcoal: rgba(253,252,250,.92); --text-dark: rgba(253,252,250,.96); --text-muted: rgba(253,252,250,.62); /* AA-body (alpha-composited over dark glass; was .46) */ --text-tertiary: rgba(253,252,250,.54); /* .50 -> .54 (2026-08-07): measured 4.46:1 on slate's card, four hundredths under AA. The dark tones' grounds are not uniform and .50 cleared some of them and not slate; the floor has to hold on the WORST ground, not the average. */ /* .40 -> .50, same reason: 3.59:1 on the darkest card, 3.58:1 on the lightest dark card. Still below --text-muted (.62). */ --text-on-dark: #FDFCFA; --bg-page: var(--canvas); --bg-primary: var(--canvas); /* Glassy dark: translucent light film over the mesh, frosted by blur. */ --bg-secondary: color-mix(in oklab, color-mix(in oklab, var(--canvas), #fff 7%), transparent 26%); --bg-card: color-mix(in oklab, color-mix(in oklab, var(--canvas), #fff 11%), transparent 24%); --bg-card-solid: color-mix(in oklab, var(--canvas), #fff 11%); /* WORDMARK — the dark-tone pair (LAW 23 Section 02). */ --wordmark-from: #C4BECC; --wordmark-to: #9A8AC4; /* dark tone: the page really does go back, so the scrim goes deep (see the light-tone block above for why this token is tone-aware at all) */ --scrim: color-mix(in oklab, var(--deep), transparent 20%); --bg-elevated: color-mix(in oklab, color-mix(in oklab, var(--canvas), #fff 16%), transparent 18%); --bg-hover: color-mix(in oklab, var(--accent), transparent 92%); --pearl: color-mix(in oklab, var(--canvas), #fff 9%); --pearl-white: color-mix(in oklab, var(--canvas), #fff 11%); --pearl-ivory: color-mix(in oklab, var(--canvas), #fff 7%); --pearl-cream: color-mix(in oklab, var(--canvas), #fff 8%); --pearl-warm: color-mix(in oklab, var(--canvas), #fff 6%); --pearl-primary: color-mix(in oklab, var(--canvas), #fff 10%); --pearl-secondary:color-mix(in oklab, var(--canvas), #fff 7%); --pearl-silver: color-mix(in oklab, var(--canvas), #fff 5%); --border: color-mix(in oklab, color-mix(in oklab, var(--accent), #FFFAF0 70%), transparent 84%); --border-light: rgba(255,250,240,.09); --border-primary: rgba(255,250,240,.16); --glass: rgba(255,252,250,.06); --glass-hi: rgba(255,252,250,.12); --card: rgba(255,252,250,.05); --card-line: rgba(255,250,240,.09); /* --surface / --surface-2: the CONTENT surfaces. Distinct from --card/--glass, which are decorative films (in dark, --card is 5% opaque, so text on it is effectively text on the mesh and cannot hold AA). Anything carrying body text sits on --surface. This is the recipe the graded cards mock arrived at and the reason it passes 17 skins where the older framework did not. */ --surface: color-mix(in oklab, var(--pearl-white), transparent 12%); --surface-2: color-mix(in oklab, var(--pearl-white), transparent 22%); /* The band's near-whites carry each palette's OWN hue (deep-tinted) — the flat constant made every rail identical across 17 skins (desktop-finish 08-23). AA holds: ~92% white over the deep band. */ --rail-ink: color-mix(in oklab, color-mix(in oklab, #FDFCFA, var(--deep) 7%), transparent 4%); --rail-ink-2: color-mix(in oklab, color-mix(in oklab, #FDFCFA, var(--deep) 10%), transparent 36%); --rail-ink-3: color-mix(in oklab, color-mix(in oklab, #FDFCFA, var(--deep) 12%), transparent 60%); --rail-line: rgba(255,255,255,.10); --hi: rgba(255,255,255,.13); } /* Accent aliases every skin inherits (the accent IS the skin's identity). --iris is the platform's dominant accent name (1,021 uses); a skin recolors it. The wordmark gradient is intentionally NOT driven from here (LAW 23: two-stop, static, per-brand — it stays hardcoded). SELECTOR = :root[data-palette], NOT plain :root. This is the whole trick. A page that locally does `:root{--iris:#8A7ABB}` has specificity (0,1,0); ours is (0,2,0) and WINS regardless of load order. That means wiring a page is usually just "add the two lines" — no need to strip its local :root, which is what made prior attempts a 123-file slog. Stripping is only needed where a page overrides at equal-or-higher specificity (rare) or via inline style= (rarer). */ :root[data-palette]{ --iris: var(--accent); --iris-deep: var(--accent-deep); --accent-primary: var(--accent); --accent-iris: var(--accent); --accent-teal: var(--teal); --teal: #4A9999; --iridescent-lavender: var(--accent); --iridescent-teal: var(--teal); /* pink + gold complete the brand's iridescent quartet (2026-08-17): three admin page sheets were each re-declaring these two as local literals a skin could never reach. Brand constants like --teal above; decorative washes only, never ink. */ --iridescent-pink: #E8C4D0; --iridescent-gold: #D4C4A8; --graphite: #2D2438; --slate: var(--text-slate); --success: #4A9B6E; --success-bg: rgba(74,155,110,.13); --success-ink: #1B5A37; --warning: #C4950A; --warning-bg: rgba(196,149,10,.14); --warning-ink: #6E5200; /* --danger was #C45454, a fill NO INK could legally sit on: white measured 4.43:1 and near-black 4.17:1, so both failed AA and there was no third option. A fill that admits no legal ink is a broken fill, not a styling preference. #B84A4A is the same red, one step deeper, and white clears at 5.10:1. --danger-bg and --danger-ink are unchanged: .dl-bad already passes in all 17 palettes and there is no reason to disturb a passing pair. */ --danger: #B84A4A; --on-danger: #FFFFFF; --danger-bg: rgba(196,84,84,.12); --danger-ink: #A02F2F; /* AA text-on-glass variants */ /* info family (2026-08-14): the book had success/warning/danger but no info - every "shipped / in transit" pill was hand-mixing sky and using the raw hue as INK on its own wash (3.9x:1). Same contract as the other families: hue for fills/washes, -ink for text. */ --info: #5A9BB5; --info-bg: rgba(90,155,181,.14); --info-ink: #33607A; } :root[data-palette][data-tone="dark"]{ --success: #5FBE8A; --success-bg: rgba(95,190,138,.16); --success-ink: #7ED3A4; --warning: #E0B14A; --warning-bg: rgba(224,177,74,.16); --warning-ink: #E8C572; --info: #7FB8D4; --info-bg: rgba(127,184,212,.16); --info-ink: #A7D2E8; /* The dark tones use a LIGHT rose for danger, so white ink on it measured 2.58:1 in all six. Dark ink reads at 7.14:1 — the same inversion --on-accent already encodes for the accent. */ --danger: #E88585; --on-danger: #16121C; --danger-bg: rgba(232,133,133,.16); --danger-ink: #F0A0A0; /* AA text-on-glass variants */ } /* Section-tint aliases (Dial/Navigation grids): --tint1/2/3-{bg,ink}. */ /* ─────────────────────────── LIGHT · NEUTRAL ───────────────────────────── */ :root{ /* GOLD is the DEFAULT palette (Elle) — fallback when no skin is set */ --canvas:#F7F1E1; --deep:#2B2416; --accent:#96792C; --accent-h:87.9; --accent-deep:#7A6122; --sidebar-dark:#241E12; --sidebar-mid:#2B2416; --sidebar-light:#4A3E1E; --t1-bg:rgba(206,170,84,.30); --t1-ink:#8A6A1E; --t2-bg:rgba(106,186,186,.20); --t2-ink:#3E8686; --t3-bg:rgba(178,146,104,.28); --t3-ink:#7A5F32; } :root[data-palette="sage"]{ --canvas:#EFF1EC; --deep:#1F2A20; --accent:#5C7A5E; --accent-h:146.5; --accent-deep:#48603E; --sidebar-dark:#18211A; --sidebar-mid:#1F2A20; --sidebar-light:#35452F; --t1-bg:rgba(124,158,120,.24); --t1-ink:#4C6E4E; --t2-bg:rgba(106,186,186,.20); --t2-ink:#3E8686; --t3-bg:rgba(190,180,140,.28); --t3-ink:#7A6E42; } :root[data-palette="gold"]{ --canvas:#F7F1E1; --deep:#2B2416; --accent:#96792C; --accent-h:87.9; --accent-deep:#7A6122; --sidebar-dark:#241E12; --sidebar-mid:#2B2416; --sidebar-light:#4A3E1E; --t1-bg:rgba(206,170,84,.30); --t1-ink:#8A6A1E; --t2-bg:rgba(106,186,186,.20); --t2-ink:#3E8686; --t3-bg:rgba(178,146,104,.28); --t3-ink:#7A5F32; } /* ─────────────────────────── LIGHT · SOFT ──────────────────────────────── */ :root[data-palette="iris"]{ --canvas:#F5F4F6; --deep:#241E33; --accent:#7A6FA8; --accent-h:292.3; --accent-deep:#635693; --sidebar-dark:#1B1628; --sidebar-mid:#241E33; --sidebar-light:#3A3350; --t1-bg:rgba(138,122,187,.18); --t1-ink:#6B5CA5; --t2-bg:rgba(106,186,186,.16); --t2-ink:#3E8686; --t3-bg:rgba(184,169,201,.28); --t3-ink:#6E608C; } :root[data-palette="blush"]{ --canvas:#F8EFEC; --deep:#33212A; --accent:#A8697F; --accent-h:357.5; --accent-deep:#8A5468; --sidebar-dark:#2A1A22; --sidebar-mid:#33212A; --sidebar-light:#4E3541; --t1-bg:rgba(232,150,176,.26); --t1-ink:#A8506F; --t2-bg:rgba(106,186,186,.18); --t2-ink:#3E8686; --t3-bg:rgba(236,176,140,.28); --t3-ink:#A0623A; } :root[data-palette="orchid"]{ --canvas:#F4EFF6; --deep:#2B2036; --accent:#8A5FA8; --accent-h:310.2; --accent-deep:#6E4F86; --sidebar-dark:#221A2C; --sidebar-mid:#2B2036; --sidebar-light:#44364F; --t1-bg:rgba(168,132,196,.24); --t1-ink:#7A4A9A; --t2-bg:rgba(106,186,186,.18); --t2-ink:#3E8686; --t3-bg:rgba(232,160,196,.26); --t3-ink:#A85080; } /* ─────────────────────────── DARK ──────────────────────────────────────── */ :root[data-palette="onyx"]{ --canvas:#131315; --deep:#0E0E10; --accent:#7DD3C0; --accent-h:178.1; --accent-deep:#5ABAA6; --sidebar-dark:#0B0B0D; --sidebar-mid:#131315; --sidebar-light:#26262A; --t1-bg:rgba(240,238,236,.13); --t1-ink:#E6E3E0; --t2-bg:rgba(125,211,192,.20); --t2-ink:#7DD3C0; --t3-bg:rgba(214,190,144,.18); --t3-ink:#D9C08A; } :root[data-palette="espresso"]{ --canvas:#17120D; --deep:#140F0A; --accent:#D4C4A8; --accent-h:81.7; --accent-deep:#B8A585; --sidebar-dark:#0F0B07; --sidebar-mid:#17120D; --sidebar-light:#302418; --t1-bg:rgba(212,196,168,.18); --t1-ink:#E0CCA4; --t2-bg:rgba(224,177,74,.18); --t2-ink:#E5BE6A; --t3-bg:rgba(190,140,96,.20); --t3-ink:#D6A377; } :root[data-palette="garnet"]{ --canvas:#1A1012; --deep:#201114; --accent:#E09090; --accent-h:19.7; --accent-deep:#C97676; --accent-ink:#EBA6A6; /* garnet's accent is the palest → give it a lighter text-ink so small accent text clears AA on faint tints */ --sidebar-dark:#140B0D; --sidebar-mid:#1A1012; --sidebar-light:#33191C; --t1-bg:rgba(216,124,124,.20); --t1-ink:#EAA2A2; --t2-bg:rgba(224,177,74,.17); --t2-ink:#E5BE6A; --t3-bg:rgba(198,152,162,.17); --t3-ink:#DFB2BE; } :root[data-palette="pine"]{ --canvas:#0F1714; --deep:#0D1512; --accent:#7DD3C0; --accent-h:178.1; --accent-deep:#5ABAA6; --sidebar-dark:#0A100E; --sidebar-mid:#0F1714; --sidebar-light:#1D2A24; --t1-bg:rgba(125,211,192,.20); --t1-ink:#7DD3C0; --t2-bg:rgba(160,200,140,.19); --t2-ink:#A8CE94; --t3-bg:rgba(214,196,168,.17); --t3-ink:#D6C4A8; } :root[data-palette="midnight"]{ --canvas:#151020; --deep:#120E1B; --accent:#B8A9C9; --accent-h:306.4; --accent-deep:#9A8AC4; --sidebar-dark:#0E0A17; --sidebar-mid:#151020; --sidebar-light:#2A2038; --t1-bg:rgba(154,138,196,.22); --t1-ink:#C0B0E4; --t2-bg:rgba(125,211,192,.20); --t2-ink:#7DD3C0; --t3-bg:rgba(214,178,206,.18); --t3-ink:#DDB6D2; } /* Safety net: an un-skinned page (no data-palette yet) renders as pearl/light, i.e. today's client-portal look, so nothing goes unstyled mid-rollout. */ :root:not([data-palette]){ --canvas:#F6F4F2; --deep:#2D2438; --accent:#7A6FA8; --accent-deep:#635693; --sidebar-dark:#1A1520; --sidebar-mid:#2D2438; --sidebar-light:#3D3248; --t1-bg:rgba(138,122,187,.15); --t1-ink:#6B5CA5; --t2-bg:rgba(106,186,186,.16); --t2-ink:#3E8686; --t3-bg:rgba(226,178,194,.24); --t3-ink:#B06A85; } :root:not([data-tone]){ color-scheme:light; } /* DECLARED SCHEME (the dark-appearance auto-darkening root, Elle 2026-08-31): a page that never declares color-scheme lets dark-mode Safari darken light chrome into the olive band. Skin tone IS the declaration. */ :root{color-scheme:light} :root[data-tone="dark"]{color-scheme:dark}