/* ============================================================
   Palettes (v206): Wine, Sky and Grey Black, colorways of the Ember skin.
   applyTheme() sets data-skin="ember" plus data-palette, so every Ember rule applies
   and only the colors below change. Loaded last.
   ============================================================ */

/* ============================================================
   1. Tokens. One block per palette. The Ember tokens come first, then the helper
      tokens (--p-*) that the shared overrides in section 2 read.
      blue = actions (buttons, selected chips, links, focus); accent = measures (rings, gauge, checks).
      --p-glass / --p-act / --p-act-hi / --p-meas are "r, g, b" triples for rgba(var(--p-x), a).
   ============================================================ */

/* Wine: brand #7B1939, base #090909. Wine actions, champagne measures. */
:root[data-palette="wine"] {
  --bg: #090909; --bg-2: #100a0c; --card: #150e11; --card-2: #201419;
  --p-tx: #f8f3f4; --tx: var(--p-tx); --tx-2: #d0c2c6; --tx-3: #a5959b;
  --blue: #b3375e; --blue-2: #e0577f; --blue-3: #f4aec1;
  --blue-soft: rgba(179, 55, 94, .2); --blue-line: rgba(224, 87, 127, .45);
  --blue-grad: linear-gradient(100deg, #5e1029 0%, #7b1939 55%, #b3375e 100%);
  --line: rgba(255, 196, 214, .09); --line-2: rgba(255, 196, 214, .16); --field-line: rgba(255, 196, 214, .28);
  --accent: #f3cc9d; --accent-2: #f3cc9d; --accent-3: #ffe3c4;
  --accent-soft: rgba(243, 204, 157, .13); --accent-line: rgba(243, 204, 157, .38);
  --mint: #f3cc9d; --mint-soft: rgba(243, 204, 157, .13);
  --grad: linear-gradient(90deg, #d9a56b, #ffe3c4);
  --p-ramp-a: #c98d4f; --p-ramp-b: #f3cc9d; --p-ramp-c: #ffe3c4;
  --p-wedge-1: #5e1029; --p-wedge-2: #a02c53; --p-wedge-3: #e0577f;
  --on-accent: #1d1006; --button-text: #1d1006;
  --flow-none: #9a868e;   /* unassigned / no purpose: 4.5:1 on the map surface, 3:1 for hatch and bars */
  --m-surface: rgba(255, 196, 214, .035); --m-surface-2: rgba(255, 196, 214, .065); --m-action: #b3375e;

  --p-glass: 255, 196, 214; --p-act: 123, 25, 57; --p-act-hi: 224, 87, 127; --p-meas: 243, 204, 157;
  --p-card-bg: linear-gradient(180deg, rgba(255, 196, 214, .06), rgba(255, 196, 214, .025));
  --p-fill: rgba(255, 196, 214, .07); --p-fill-2: rgba(255, 196, 214, .13); --p-track: rgba(255, 196, 214, .09);
  --p-shadow: 0 4px 14px rgba(123, 25, 57, .5); --p-shadow-lg: 0 8px 26px rgba(123, 25, 57, .6);
  --p-meas-glow: rgba(243, 204, 157, .42);
  --p-aura-1: rgba(224, 87, 127, .8); --p-aura-2: rgba(150, 32, 70, .85);
  --p-on-action: #fff;
  --p-bg-glow:
    radial-gradient(120% 72% at 50% -12%, rgba(123, 25, 57, .98), rgba(104, 20, 48, .42) 46%, rgba(70, 12, 32, .12) 66%, transparent 82%),
    radial-gradient(55% 34% at 86% 0%, rgba(224, 87, 127, .26), transparent 70%);
  --p-bar: rgba(9, 9, 9, .82); --p-tabbar: rgba(22, 11, 16, .84);
  --p-deep: #1b0c13; --p-deep-2: #0b0708;
  --p-sheet: linear-gradient(180deg, #2b0f1b, #0d0709 42%);
  --p-menu: linear-gradient(180deg, rgba(56, 16, 34, .95), rgba(14, 7, 10, .97));
  --p-drawer: radial-gradient(130% 40% at 0% 0%, rgba(123, 25, 57, .55), transparent 70%), linear-gradient(180deg, #1c0b13, #0a0708 60%);
  --p-warm-wash: radial-gradient(120% 90% at 100% 0%, rgba(123, 25, 57, .5), transparent 60%);
}

/* Sky: brand #7BC3E9, base #090909. Sky actions with dark text, warm orange measures. */
:root[data-palette="sky"] {
  --bg: #090909; --bg-2: #0d1114; --card: #11171b; --card-2: #19222a;
  --p-tx: #f4f9fc; --tx: var(--p-tx); --tx-2: #c3d0d8; --tx-3: #8fa0ab;
  --blue: #7bc3e9; --blue-2: #7bc3e9; --blue-3: #b6e1f6;
  --blue-soft: rgba(123, 195, 233, .15); --blue-line: rgba(123, 195, 233, .45);
  --blue-grad: linear-gradient(100deg, #4f9fcb 0%, #7bc3e9 55%, #b6e1f6 100%);
  --line: rgba(160, 215, 245, .09); --line-2: rgba(160, 215, 245, .16); --field-line: rgba(160, 215, 245, .28);
  --accent: #ffb36b; --accent-2: #ffb36b; --accent-3: #ffd3a3;
  --accent-soft: rgba(255, 179, 107, .13); --accent-line: rgba(255, 179, 107, .38);
  --mint: #ffb36b; --mint-soft: rgba(255, 179, 107, .13);
  --grad: linear-gradient(90deg, #ff9a45, #ffd3a3);
  --p-ramp-a: #ff8f3a; --p-ramp-b: #ffb36b; --p-ramp-c: #ffd9b0;
  --p-wedge-1: #4f9fcb; --p-wedge-2: #7bc3e9; --p-wedge-3: #b6e1f6;
  --on-accent: #1d0e05; --button-text: #1d0e05;
  --flow-none: #8094a0;   /* unassigned / no purpose: 4.5:1 on the map surface, 3:1 for hatch and bars */
  --m-surface: rgba(160, 215, 245, .035); --m-surface-2: rgba(160, 215, 245, .065); --m-action: #7bc3e9;

  --p-glass: 160, 215, 245; --p-act: 79, 159, 203; --p-act-hi: 123, 195, 233; --p-meas: 255, 179, 107;
  --p-card-bg: linear-gradient(180deg, rgba(160, 215, 245, .06), rgba(160, 215, 245, .025));
  --p-fill: rgba(160, 215, 245, .07); --p-fill-2: rgba(160, 215, 245, .13); --p-track: rgba(160, 215, 245, .09);
  --p-shadow: 0 4px 14px rgba(79, 159, 203, .3); --p-shadow-lg: 0 8px 26px rgba(79, 159, 203, .4);
  --p-meas-glow: rgba(255, 179, 107, .4);
  --p-aura-1: rgba(255, 150, 70, .8); --p-aura-2: rgba(123, 195, 233, .7);
  --p-on-action: #06141c;
  --p-bg-glow:
    radial-gradient(120% 72% at 50% -12%, rgba(123, 195, 233, .6), rgba(79, 159, 203, .2) 46%, rgba(40, 90, 120, .07) 66%, transparent 82%),
    radial-gradient(55% 34% at 86% 0%, rgba(182, 225, 246, .22), transparent 70%);
  --p-bar: rgba(9, 9, 9, .82); --p-tabbar: rgba(13, 20, 25, .86);
  --p-deep: #0e1a22; --p-deep-2: #080c0f;
  --p-sheet: linear-gradient(180deg, #17303d, #0a1014 42%);
  --p-menu: linear-gradient(180deg, rgba(26, 52, 66, .95), rgba(9, 14, 18, .97));
  --p-drawer: radial-gradient(130% 40% at 0% 0%, rgba(123, 195, 233, .3), transparent 70%), linear-gradient(180deg, #0e1a22, #090c0f 60%);
  --p-warm-wash: radial-gradient(120% 90% at 100% 0%, rgba(123, 195, 233, .32), transparent 60%);
}

/* Grey Black: monochrome. Solid #1c1c1c cards, white actions with black text, white measures. */
:root[data-palette="greyblack"] {
  --bg: #0a0a0a; --bg-2: #0f0f0f; --card: #1c1c1c; --card-2: #232323;
  --p-tx: #fff; --tx: var(--p-tx); --tx-2: #c9c9c9; --tx-3: #8f8f8f;
  --blue: #fff; --blue-2: #f2f2f2; --blue-3: #fff;
  --blue-soft: rgba(255, 255, 255, .1); --blue-line: rgba(255, 255, 255, .34);
  --blue-grad: linear-gradient(180deg, #fff, #e4e4e4);
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16); --field-line: rgba(255, 255, 255, .3);
  --accent: #fff; --accent-2: #fff; --accent-3: #d9d9d9;
  --accent-soft: rgba(255, 255, 255, .1); --accent-line: rgba(255, 255, 255, .34);
  --mint: #fff; --mint-soft: rgba(255, 255, 255, .1);
  --grad: linear-gradient(90deg, #8f8f8f, #fff);
  --p-ramp-a: #8f8f8f; --p-ramp-b: #cfcfcf; --p-ramp-c: #fff;
  --p-wedge-1: #cfcfcf; --p-wedge-2: #e8e8e8; --p-wedge-3: #fff;
  --on-accent: #0a0a0a; --button-text: #0a0a0a;
  --flow-none: #919191;   /* unassigned / no purpose: 4.5:1 on the map surface, 3:1 for hatch and bars */
  --m-surface: #1c1c1c; --m-surface-2: #262626; --m-action: #fff;
  --font-display: "Helvetica Neue", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --p-glass: 255, 255, 255; --p-act: 255, 255, 255; --p-act-hi: 255, 255, 255; --p-meas: 255, 255, 255;
  --p-card-bg: #1c1c1c;
  --p-fill: #262626; --p-fill-2: #2f2f2f; --p-track: rgba(255, 255, 255, .1);
  --p-shadow: 0 4px 14px rgba(0, 0, 0, .5); --p-shadow-lg: 0 8px 26px rgba(0, 0, 0, .55);
  --p-meas-glow: rgba(255, 255, 255, .22);
  --p-aura-1: rgba(255, 255, 255, .22); --p-aura-2: rgba(255, 255, 255, .12);
  --p-on-action: #0a0a0a;
  --p-bg-glow: radial-gradient(110% 55% at 50% -14%, rgba(255, 255, 255, .07), transparent 72%);
  --p-bar: rgba(10, 10, 10, .86); --p-tabbar: rgba(24, 24, 24, .9);
  --p-deep: #1c1c1c; --p-deep-2: #121212;
  --p-sheet: #151515;
  --p-menu: #1c1c1c;
  --p-drawer: #101010;
  --p-warm-wash: none;
}

/* ============================================================
   2. Shared overrides: every Ember rule that hard-codes blue, read through the tokens above.
   ============================================================ */

/* ---- 2a. Background glow, bars, tab bar ---- */
:root[data-palette] body::before { background: var(--p-bg-glow) !important; }
:root[data-palette] .brandbar.stuck { background: var(--p-bar) !important; }
:root[data-palette] .tabbar { background: var(--p-tabbar) !important; }
:root[data-palette] .tab-btn.active { box-shadow: var(--p-shadow-lg); }
:root[data-palette] .tab-btn.active, :root[data-palette] .tab-btn.active svg { color: var(--p-on-action) !important; stroke: var(--p-on-action) !important; }
:root[data-palette] .tab-btn.active svg * { stroke: var(--p-on-action); }
:root[data-palette] .brand-avatar { background: var(--p-fill); border-color: var(--line-2); }
:root[data-palette] .brand-avatar.on { background: var(--blue-grad); color: var(--p-on-action); }
:root[data-palette] .tab-plus { background: var(--blue-grad); color: var(--p-on-action); box-shadow: var(--p-shadow-lg), inset 0 1px 0 rgba(255, 255, 255, .28); }
:root[data-palette] .tab-plus.open { box-shadow: 0 0 0 6px rgba(var(--p-act-hi), .16), var(--p-shadow-lg); }

/* ---- 2b. Glass surfaces (cards, tiles, chips, tracks) ---- */
:root[data-palette] :is(.hero-card.hero-v2, .tr-tile, .bt-tile, .bt-face, .tk-top3, .pd-panel, .jr-day, .card, .ember-activity, .ember-score, .pa2-card, .pb2-goal, .pc .ar-ring-card, .pd-focus .ar-ring-card) { background: var(--p-card-bg); }
:root[data-palette] .pa2-stage.is-now .pa2-card { background: radial-gradient(130% 100% at 0% 0%, color-mix(in srgb, var(--tone) 16%, transparent), transparent 58%), var(--p-card-bg); }
:root[data-palette] .pb2 { background-color: rgba(var(--p-glass), .025); --grid: rgba(var(--p-glass), .05); }
:root[data-palette] :is(.today-tasks-entry, .ember-delta, .ember-pill, .ember-ico, .hero-v2 .day-mode-trigger, .ember-share, .pc-expand, .hr-feel, .tk-group b, .side-me, .side-nav-btn em, .hs-act, .prow, .rem-mode, .jr-input, .area-pills button, .tk-area-pick button, .ck-chips button, .ck-icons button, .ck-task-chips button, .tk-date-chips button) { background: var(--p-fill); }
:root[data-palette] :is(.mini-act, .top-mini, .pd-story-button, .tk-sort) { background: var(--p-fill) !important; }
:root[data-palette] :is(.pd-controls, .arc-workspace-tabs, .ar-view, .planning-period, .brain-range, .seg) { background: var(--p-fill) !important; }
:root[data-palette] .brain-alignment [aria-pressed="true"] { background: var(--p-fill-2); }
:root[data-palette] :is(.rem-time-row select, .rem-time-row input[type="time"], .tr-settings select, .field input, .field select, .tk-field input, .tk-field select) { background: var(--p-fill) !important; }
:root[data-palette] .quick-add .dropup-item:active, :root[data-palette] .ember-share:active { background: var(--p-fill-2); }
:root[data-palette] :is(.tr-ring-track, .pa2-ring-track, .pb2-ring-track, .ar-ring-track) { stroke: var(--p-track); }
:root[data-palette] .ember-day-ring circle { stroke: var(--p-track); }
:root[data-palette] .ember-track { stroke: var(--p-track); }
:root[data-palette] .pb2-bar { background: var(--p-track); }
:root[data-palette] .ember-col i { background: var(--p-fill); }
:root[data-palette] .ember-col i.miss, :root[data-palette] .ember-legend i.miss { background: transparent; border-color: var(--line-2); }
:root[data-palette] .ember-range-bar { background: var(--p-fill-2); }
:root[data-palette] .ember-day:not(.today) .ember-day-ring { background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--p-deep) 80%, transparent), color-mix(in srgb, var(--p-deep-2) 60%, transparent)); }
:root[data-palette] .ember-knob-start { fill: var(--card); stroke: var(--line-2); }

/* ---- 2c. Measures: gauge, rings, week strip, bars, radar ---- */
:root[data-palette] #emberArc stop:nth-child(1), :root[data-palette] #dgEmber stop:nth-child(1), :root[data-palette] #phGrad stop:nth-child(1), :root[data-palette] #phPathGrad stop:nth-child(1) { stop-color: var(--p-ramp-a); }
:root[data-palette] #emberArc stop:nth-child(2), :root[data-palette] #dgEmber stop:nth-child(2), :root[data-palette] #phGrad stop:nth-child(2), :root[data-palette] #phPathGrad stop:nth-child(2) { stop-color: var(--p-ramp-b); }
:root[data-palette] #emberArc stop:nth-child(3), :root[data-palette] #dgEmber stop:nth-child(3), :root[data-palette] #phGrad stop:nth-child(3), :root[data-palette] #phPathGrad stop:nth-child(3) { stop-color: var(--p-ramp-c); }
:root[data-palette] .ember-fill { filter: drop-shadow(0 0 14px var(--p-meas-glow)); }
:root[data-palette] .ember-day.today .ember-day-ring { background: rgba(var(--p-meas), .2); box-shadow: 0 0 18px var(--p-meas-glow); }
:root[data-palette] .ember-day.today .ember-day-ring circle { stroke: rgba(var(--p-meas), .35); }
:root[data-palette] .ember-day.today .ember-day-ring circle.fill { stroke: var(--accent-3); }
:root[data-palette] .arc-progress i { background: var(--grad); }
:root[data-palette] .ember-col i.on { background: var(--grad); box-shadow: 0 0 10px var(--p-meas-glow); }
:root[data-palette] .ember-col i.half { background: linear-gradient(90deg, var(--accent) 50%, var(--p-fill-2) 50%); }
:root[data-palette] .ember-legend i.half { background: linear-gradient(90deg, var(--accent) 50%, var(--p-fill-2) 50%); }
:root[data-palette] .ember-range-bar i { background: var(--grad); }
:root[data-palette] .ember-range-bar em { background: var(--accent); color: var(--on-accent); box-shadow: 0 4px 12px var(--p-meas-glow); }
:root[data-palette] .ar-fill { fill: rgba(var(--p-meas), .2); stroke: var(--accent); filter: drop-shadow(0 0 8px var(--p-meas-glow)); }
:root[data-palette] .tk-check[aria-pressed="true"] circle, :root[data-palette] .tk-row.completing .tk-check circle { filter: drop-shadow(0 0 6px var(--p-meas-glow)); }
:root[data-palette] .pk-node.full .pk-ring { box-shadow: inset 0 0 0 1px rgba(var(--p-meas), .45), 0 0 18px var(--p-meas-glow); }
:root[data-palette] .ph-dial::before { background: radial-gradient(50% 50% at 40% 60%, rgba(var(--p-meas), .2), transparent 70%), radial-gradient(45% 45% at 65% 40%, rgba(var(--p-act-hi), .2), transparent 70%); }
:root[data-palette] .launch-quote-content::before { background: radial-gradient(45% 50% at 38% 55%, rgba(var(--p-meas), .24), transparent 70%), radial-gradient(42% 46% at 64% 42%, rgba(var(--p-act-hi), .28), transparent 70%); }

/* measure glows, bars and the Progress phase ramp that Ember hard-codes in orange */
:root[data-palette] .ph-fill, :root[data-palette] .ph-path-walk { filter: drop-shadow(0 0 6px var(--p-meas-glow)); }
:root[data-palette] .ph-path::before { background: radial-gradient(50% 50% at 40% 60%, rgba(var(--p-meas), .16), transparent 70%); }
:root[data-palette] .ph-path-node.is-finish { stroke: var(--accent-3); }
:root[data-palette] .ph-path-node.is-finish.is-reached { fill: var(--accent-3); }
:root[data-palette] .ph-path-row.is-finish b { color: var(--accent-3); }
:root[data-palette] .you-hero-track i { background: var(--grad); }
:root[data-palette] .pa3-seg i b { background: linear-gradient(90deg, var(--p-ramp-a), var(--p-ramp-b) 60%, var(--p-ramp-c)); }
:root[data-palette] .dg-tile.tier-4 { --rim: var(--accent); }
:root[data-palette] .dg-tile .dg-ring[aria-pressed="true"] circle.dg-fill { filter: drop-shadow(0 0 8px var(--p-meas-glow)); }
:root[data-palette] .dg-tile .dg-ring[aria-pressed="true"] circle.dg-track { fill: rgba(var(--p-meas), .16) !important; }
:root[data-palette] .tk-check[aria-pressed="true"] rect, :root[data-palette] .tk-row.completing .tk-check rect { filter: drop-shadow(0 0 6px var(--p-meas-glow)); }
:root[data-palette] .ar-fill { fill: rgba(var(--p-meas), .16); }
:root[data-palette] .pa2 { --t0: color-mix(in srgb, var(--p-ramp-a) 90%, #000); --t1: var(--p-ramp-a); --t2: color-mix(in srgb, var(--p-ramp-a) 50%, var(--p-ramp-b)); --t3: var(--p-ramp-b); --t4: color-mix(in srgb, var(--p-ramp-b) 50%, var(--p-ramp-c)); --t5: var(--p-ramp-c); --gold: var(--p-ramp-c); --grid: rgba(var(--p-glass), .05); }
:root[data-palette] .arc-comet { background: radial-gradient(circle, #fff 0 28%, var(--p-ramp-c) 42%, rgba(var(--p-meas), .9) 55%, rgba(var(--p-meas), 0) 72%); box-shadow: 0 0 22px 8px var(--p-meas-glow); }
:root[data-palette] .arc-comet.ghost { background: radial-gradient(circle, var(--p-ramp-c) 0 25%, rgba(var(--p-meas), .7) 50%, transparent 72%); box-shadow: 0 0 14px 4px var(--p-meas-glow); }
:root[data-palette] .arc-spark:not(.is-water) { background: radial-gradient(circle, #fff 0 30%, var(--p-ramp-c) 45%, rgba(var(--p-meas), .85) 58%, rgba(var(--p-meas), 0) 74%); box-shadow: 0 0 14px 5px var(--p-meas-glow); }
:root[data-palette] .ember-day.sealed .ember-day-ring::after { border-color: var(--accent-3); }
/* the glows that pulse on the week strip: same motion, recolored */
@keyframes pTodayGlow { 0%, 100% { box-shadow: 0 0 14px color-mix(in srgb, rgb(var(--p-meas)) 35%, transparent); } 50% { box-shadow: 0 0 26px color-mix(in srgb, rgb(var(--p-meas)) 70%, transparent); } }
@keyframes pNextUp { 0% { box-shadow: 0 0 0 0 transparent; } 35% { box-shadow: 0 0 0 4px rgba(var(--p-act-hi), .25), 0 0 20px rgba(var(--p-act-hi), .55); } 100% { box-shadow: 0 0 0 0 transparent; } }
@keyframes pDaySeal { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.28); box-shadow: 0 0 0 8px rgba(var(--p-meas), .2), 0 0 32px rgba(var(--p-meas), .75); } }
:root[data-palette] .ember-day.today .ember-day-ring { animation-name: pTodayGlow; }
:root[data-palette] .ember-day.next-up .ember-day-ring { animation-name: pNextUp; }
:root[data-palette] .ember-day.sealed .ember-day-ring { animation-name: pDaySeal; }

/* the light behind the Today score: two soft glows, one warm (measure) and one cool (action) */
:root[data-palette] .aura-today i:first-child { background: radial-gradient(48% 52% at 35% 58%, var(--p-aura-1), transparent 72%); }
:root[data-palette] .aura-today i:last-child { background: radial-gradient(44% 48% at 68% 40%, var(--p-aura-2), transparent 72%); }
:root[data-palette] .aura-today.bloom::after { background: radial-gradient(closest-side, rgba(var(--p-meas), .45), rgba(var(--p-meas), .16) 55%, transparent); }
:root[data-palette] :is(.dg-tile.just-done .dg-ring::after, .hr-row.just-done .hr-check::after) { background: radial-gradient(circle, rgba(var(--p-meas), .45), transparent 66%); }

/* --flow-none, the "unassigned / no purpose" tone, is one value per look (checked by scripts/ui-matrix-check.cjs):
   Ember here, Wine / Sky / Grey Black in their palette blocks above, Dark and Light in brain-dump.css.
   Each is chosen to hold 4.5:1 for the % caption and sheet label that use it as text, and 3:1 for bars, stripes
   and the hatch on the map surface. The Arc and Progress containers re-declare the token (brain-dump.css), so they
   read it back from :root through --flow-none-root instead of keeping a second copy. */
:root[data-skin="ember"]:not([data-palette]) { --flow-none: #7e8cb8; }
:root[data-skin="ember"], :root[data-palette] { --flow-none-root: var(--flow-none); }
:root[data-skin="ember"]:not([data-palette]) :is(.brain-alignment, .pd-dash, .pd-focus, .pd-shell, .arc-ws, .brain-sheet, .goal-shell) {
  --flow-none: var(--flow-none-root); --brain-orphan: var(--flow-none-root);
}

/* Keyboard focus on the Progress habit tiles (they carry the no-purpose marker): progress-dashboard.css only tints the
   background (4%) and sets outline:none, which leaves no visible ring. Same 2px accent ring as the other controls. */
button.pd-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Arc map and Progress charts: the warm purpose palette, retuned per colorway */
:root[data-palette] :is(.brain-alignment, .pd-dash, .pd-focus, .pd-shell, .arc-ws, .brain-sheet, .goal-shell) {
  --flow-0: rgb(var(--p-act-hi)); --flow-1: var(--accent); --flow-2: var(--accent-3); --flow-none: var(--flow-none-root); --flow-total: var(--tx); --flow-halo: var(--bg);
  --surface-top: rgba(var(--p-glass), .07); --surface-bottom: rgba(var(--p-glass), .02); --edge-top: rgba(var(--p-glass), .14); --edge-bottom: rgba(var(--p-glass), .05);
  --hero-tint: rgba(var(--p-act-hi), .1);
  --brain-0: rgb(var(--p-act-hi)); --brain-1: var(--accent); --brain-2: var(--accent-3); --brain-orphan: var(--flow-none-root);
}

/* ---- 2d. Buttons and selected states: dark or white label on the action gradient ---- */
:root[data-palette] :is(.btn, .ember-cta, .ck-submit, .tk-fab, .m-btn, .m-chip[aria-pressed="true"], .m-chip.on, .ck-chips button[aria-pressed="true"], .ck-icons button[aria-pressed="true"], .tk-lists button[aria-current="page"], .tk-date-chips button[aria-pressed="true"],
  .pd-controls button[aria-pressed="true"], .arc-workspace-tabs button[aria-current="page"], .ar-view button[aria-pressed="true"], .seg button.on, .planning-period button[aria-pressed="true"],
  .sl-tab[aria-selected="true"], .sc-format button[aria-pressed="true"], .sc2-styles .sc-style.on, .hp-row-add.on, .hp-lib .lrow.added .lrow-add, .hp-proto-form .chip.on, .hp-proto-form .protocol-add > .btn,
  .gd-chat .msg.me, .focus-page .focus-stage .focus-begin, .ai-send, .jn-send, .slp-main, .side-avatar, .side-shell .side-upgrade, .ember-day-tip,
  .you-hub .you-signin .auth-panel .btn, .you-hub .profile-updates .sub-btn) { color: var(--p-on-action); }
:root[data-palette] :is(.ck-chips button[aria-pressed="true"], .ck-icons button[aria-pressed="true"], .tk-date-chips button[aria-pressed="true"]) { border-color: transparent; }
/* single-choice groups where a glider (the action gradient) slides behind the picked label */
:root[data-palette] .adaptive-modes.has-glider > [aria-pressed="true"] { color: var(--p-on-action); }
:root[data-palette] .adaptive-modes.has-glider > [aria-pressed="true"] small { color: inherit; border-color: currentColor; opacity: .8; }
:root[data-palette] :is(.btn, .ember-cta, .ck-submit, .tk-fab) { box-shadow: var(--p-shadow); }
:root[data-palette] .btn-ghost { box-shadow: none; }
:root[data-palette] :is(.pd-controls button[aria-pressed="true"], .arc-workspace-tabs button[aria-current="page"], .ar-view button[aria-pressed="true"], .seg button.on, .planning-period button[aria-pressed="true"]) { color: var(--p-on-action) !important; box-shadow: var(--p-shadow) !important; }
:root[data-palette] :is(.sc-format button[aria-pressed="true"], .sl-tab[aria-selected="true"], .tap-glider-chip, .tap-glider-pill, .tap-glider-tab, .side-avatar) { box-shadow: var(--p-shadow); }
:root[data-palette] :is(.side-shell .side-upgrade, .sl-feature-go, .slp-main, .focus-page .focus-stage .focus-begin) { box-shadow: var(--p-shadow-lg); }
:root[data-palette] .ember-cta.tap-pressed { box-shadow: 0 0 0 6px rgba(var(--p-act-hi), .16), 0 0 34px rgba(var(--p-act-hi), .4); }
:root[data-palette] .reminder-modes .tap-glider-chip { background: rgba(var(--p-act-hi), .2); box-shadow: inset 0 0 0 1px rgba(var(--p-act-hi), .55); }
:root[data-palette] .tk-fab { box-shadow: var(--p-shadow-lg); }
:root[data-palette] .tap-float { color: var(--blue-3); text-shadow: 0 0 12px rgba(var(--p-act-hi), .6); }
:root[data-palette] .ck-banner { background: linear-gradient(90deg, rgba(var(--p-act-hi), .24), rgba(var(--p-act-hi), .07)); }
:root[data-palette] .you-switch:checked, :root[data-palette] .focus-page .allday-switch.on { background: var(--blue-grad); }

/* ---- 2e. Panels: sheets, quick add, side menu, share sheet, profile cards ---- */
:root[data-palette] .sheet { background: var(--p-sheet); }
:root[data-palette] .sheet[data-sheet-type="share"] { background: var(--p-sheet) !important; border-top-color: var(--line-2); }
:root[data-palette] .dropup.quick-add { background: var(--p-menu); border-color: var(--line-2); box-shadow: 0 18px 48px rgba(0, 0, 0, .55), 0 0 40px -10px rgba(var(--p-act-hi), .4); }
:root[data-palette] .side-shell .side-drawer { background: var(--p-drawer); border-color: var(--line); }
:root[data-palette] .side-shell .side-nav-btn em, :root[data-palette] .side-me { border-color: var(--line); }
:root[data-palette] .you-arc { background: var(--p-warm-wash), var(--p-card-bg); }
:root[data-palette] .premium-card { background: radial-gradient(120% 120% at 0% 0%, rgba(var(--p-act-hi), .3), var(--p-deep) 65%); }
:root[data-palette] .launch-quote, :root[data-palette] .launch-quote::backdrop { background: var(--p-bg-glow), var(--bg); }
:root[data-palette] .arc90-logo-start { fill: var(--accent); }
:root[data-palette] .launch-logo-symbol { filter: drop-shadow(0 0 18px rgba(var(--p-act-hi), .45)); }
:root[data-palette] .sc2 .sc-slide.on { box-shadow: 0 30px 60px -26px rgba(0, 0, 0, .9), 0 0 44px -12px rgba(var(--p-act-hi), .4); }

/* ---- 2f. Protocols: body scan, rings, levels dial ---- */
/* the body, its core light and the scan line are SVG gradients with blue stops */
:root[data-palette] .pk-ring { background: radial-gradient(circle at 35% 28%, rgba(var(--p-act-hi), .32), var(--p-deep) 70%); box-shadow: inset 0 0 0 1px rgba(var(--p-glass), .24), 0 8px 24px rgba(0, 0, 0, .35); }
@keyframes pPkHot { 0%, 100% { box-shadow: 0 0 0 1px rgba(var(--p-act-hi), .45), 0 0 26px rgba(var(--p-act-hi), .4); } 50% { box-shadow: 0 0 0 1px rgba(var(--p-act-hi), .6), 0 0 46px rgba(var(--p-act-hi), .6); } }
:root[data-palette] .pk-node.hot .pk-ring { animation-name: pPkHot; }
:root[data-palette] .pk-ring i { color: var(--tx); }
:root[data-palette] .pk-node.hot .pk-ring { background: radial-gradient(circle at 35% 28%, rgba(var(--p-act-hi), .55), rgba(var(--p-act), .9) 70%); box-shadow: 0 0 0 1px rgba(var(--p-act-hi), .5), 0 0 34px rgba(var(--p-act-hi), .5); }
:root[data-palette] .pk-node.hot small { color: var(--blue-3); }
:root[data-palette] .pk-insight-ico { border-color: rgba(var(--p-act-hi), .35); color: var(--blue-3); box-shadow: inset 0 0 16px rgba(var(--p-act-hi), .18); }
:root[data-palette] #plGlass stop:nth-child(1) { stop-color: var(--p-deep-2); }
:root[data-palette] #plGlass stop:nth-child(2) { stop-color: var(--p-deep); }
:root[data-palette] #plGlass stop:nth-child(3) { stop-color: color-mix(in srgb, rgb(var(--p-act-hi)) 38%, var(--p-deep)); }
:root[data-palette] #plGlassOn stop:nth-child(1) { stop-color: var(--p-wedge-1); }
:root[data-palette] #plGlassOn stop:nth-child(2) { stop-color: var(--p-wedge-2); }
:root[data-palette] #plGlassOn stop:nth-child(3) { stop-color: var(--p-wedge-3); }
:root[data-palette] .pl { --tone: var(--blue-2); }
:root[data-palette] .pl-edge { stroke: rgba(var(--p-glass), .2); }
:root[data-palette] .pl-wedge.on .pl-edge { stroke: rgba(var(--p-glass), .75); }
:root[data-palette] .pl-seg { color: rgba(var(--p-glass), .66); }
:root[data-palette] .pl-seg.on, :root[data-palette] .pl-seg.on i { color: var(--p-on-action); filter: none; }
:root[data-palette] :is(.pl-card, .pl-act) { color: var(--tx); }
:root[data-palette] .pl-orb-ico { color: var(--p-deep-2); }

/* ---- 2g. Sleep studio: Tonight card, tiles, dock, player ---- */
:root[data-palette] .sl-feature { border-color: rgba(var(--p-act-hi), .28); background: radial-gradient(130% 150% at 88% -10%, rgba(var(--p-act-hi), .3), transparent 58%), linear-gradient(180deg, var(--p-deep), var(--p-deep-2)); }
:root[data-palette] .sl-feature-txt small, :root[data-palette] .slp-kicker { color: var(--blue-3); }
:root[data-palette] .sl-feature-txt p { color: rgba(var(--p-glass), .85); }
:root[data-palette] #slSceneGlow stop { stop-color: var(--blue-3); }
:root[data-palette] .sl-scene-moon { fill: var(--tx); filter: drop-shadow(0 0 10px rgba(var(--p-act-hi), .8)); }
:root[data-palette] .sl-scene-stars circle { fill: var(--tx-2); }
:root[data-palette] .sl-scene-arc { stroke: rgba(var(--p-act-hi), .34); }
:root[data-palette] .sl-scene-arc-2 { stroke: rgba(var(--p-act-hi), .16); }
:root[data-palette] .sl-feature-acts .m-btn-ghost { border-color: var(--line-2); background: var(--p-fill); }
:root[data-palette] .sl-tile { --art: rgb(var(--p-act-hi)); }
:root[data-palette] .sl-tile.g-noise { --art: color-mix(in srgb, rgb(var(--p-act-hi)) 70%, #aaa); }
:root[data-palette] .sl-tile.g-binaural { --art: var(--accent); }
:root[data-palette] .sl-tile.g-tone { --art: var(--accent-3); }
:root[data-palette] .sl-rows .sl-row-art { color: var(--tx); background: radial-gradient(120% 120% at 30% 20%, rgba(var(--p-act-hi), .42), rgba(var(--p-act), .14)); }
:root[data-palette] .sl-dock { border-color: rgba(var(--p-act-hi), .32); background: color-mix(in srgb, var(--p-deep) 88%, transparent); }
:root[data-palette] .sl-dock-txt small { color: var(--tx-2); }
:root[data-palette] .sl-dock-orb { background: radial-gradient(circle at 36% 30%, var(--blue-3), rgb(var(--p-act-hi)) 50%, rgb(var(--p-act)) 80%); box-shadow: 0 0 16px rgba(var(--p-act-hi), .55); }
:root[data-palette] .sheet[data-sheet-type="sleep"] {
  --tx: var(--p-tx); --tx-2: rgba(var(--p-glass), .82); --tx-3: rgba(var(--p-glass), .6);
  --line: rgba(var(--p-glass), .1); --line-2: rgba(var(--p-glass), .2); --m-surface: rgba(var(--p-glass), .05); --m-surface-2: rgba(var(--p-glass), .1);
  border-color: rgba(var(--p-act-hi), .2);
  background: radial-gradient(120% 60% at 50% 0%, rgba(var(--p-act-hi), .26), transparent 62%), linear-gradient(180deg, var(--p-deep), var(--bg) 100%);
}
:root[data-palette] .slp-orb i:nth-child(1) { background: radial-gradient(circle, rgba(var(--p-act-hi), .42), rgba(var(--p-act), .16) 45%, transparent 70%); }
:root[data-palette] .slp-orb i:nth-child(2) { background: radial-gradient(circle at 38% 32%, var(--tx), var(--blue-3) 30%, rgb(var(--p-act-hi)) 55%, rgb(var(--p-act)) 85%); box-shadow: 0 0 64px rgba(var(--p-act-hi), .5); }
:root[data-palette] .slp-orb i:nth-child(3) { border-color: rgba(var(--p-act-hi), .26); }
:root[data-palette] .slp-orb b { text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
:root[data-palette] .slp-bar { background: var(--p-track); }

/* ---- 2h. AI guide and chat ---- */
:root[data-palette] .ai-stage { background: radial-gradient(48% 46% at 50% 46%, rgba(var(--p-act-hi), .2), rgba(var(--p-act-hi), .06) 55%, transparent 75%); }
:root[data-palette] .ai-stage[data-state="listening"] .ai-state, :root[data-palette] .ai-stage[data-state="thinking"] .ai-state { color: var(--blue-2); }
:root[data-palette] .ai-state { color: var(--tx); }
:root[data-palette] .ai-msg.ai::before { background: var(--blue-2); box-shadow: 0 0 8px rgba(var(--p-act-hi), .8); }
:root[data-palette] .ai-msg.ai#aiTypingText::after { background: var(--blue-2); box-shadow: 0 0 10px var(--blue-2); }
:root[data-palette] .ai-compose:focus-within { border-color: rgba(var(--p-act-hi), .5); box-shadow: 0 0 0 3px rgba(var(--p-act-hi), .12), 0 10px 30px rgba(0, 0, 0, .28); }
/* the face is drawn on a canvas in blue, so it is recolored with a filter */
:root[data-palette="wine"] .ai-face { filter: hue-rotate(128deg) saturate(.95); }
:root[data-palette="sky"] .ai-face { filter: hue-rotate(-14deg); }
:root[data-palette="greyblack"] .ai-face { filter: grayscale(1) brightness(1.15); }

/* ============================================================
   3. Sky: a few rules need more than the shared tokens.
   ============================================================ */
/* light action on dark text: the tab bar icons and the FAB plus read as dark ink on the sky pill */
:root[data-palette="sky"] .tab-btn.active { box-shadow: 0 6px 18px rgba(79, 159, 203, .35); }

/* ============================================================
   4. Grey Black: flat black, solid cards, white actions, heavy type.
   ============================================================ */
:root[data-palette="greyblack"] :is(.hero-card.hero-v2, .tr-tile, .bt-tile, .bt-face, .tk-top3, .pd-panel, .jr-day, .card, .ember-activity, .ember-score, .pa2-card, .pb2-goal, .pb2, .pc .ar-ring-card, .pd-focus .ar-ring-card, .pa2-stage.is-now .pa2-card) {
  background: #1c1c1c; border-color: #2b2b2b; -webkit-backdrop-filter: none; backdrop-filter: none;
}
:root[data-palette="greyblack"] :is(.pk-insight, .sl-tile, .m-row, .sl-tabs, .reminder-modes .rem-mode, .prow) { background: #1c1c1c; border-color: #2b2b2b; }
:root[data-palette="greyblack"] .sheet { border-color: #2b2b2b; }
:root[data-palette="greyblack"] .tabbar { border-color: #2b2b2b !important; }
:root[data-palette="greyblack"] .tab-btn { color: var(--tx-3); }
:root[data-palette="greyblack"] .brandbar span { color: #fff; }
:root[data-palette="greyblack"] :is(.you-hub .you-switch, .rem-time-row input[type="checkbox"]):checked { background: #fff; }
:root[data-palette="greyblack"] :is(.you-hub .you-switch, .rem-time-row input[type="checkbox"]):checked::after { background: #0a0a0a; box-shadow: none; }

/* type: heavy, tight, uppercase-capable */
:root[data-palette="greyblack"] :is(h1, h2, .topbar h1, .today-header h1, .section-title, .hr-section-head h2, .tk-today-head h2, .ember-gauge-copy h2, .you-arc h2, .you-hub .you-hero h2) { font-family: var(--font-display); font-weight: 800; letter-spacing: -.035em; }
:root[data-palette="greyblack"] .topbar h1 { text-transform: uppercase; font-size: 30px; letter-spacing: -.04em; line-height: 1; }
:root[data-palette="greyblack"] .today-header h1 { font-size: 22px !important; letter-spacing: -.03em; }
:root[data-palette="greyblack"] :is(.ember-gauge-center strong, .pc-num, .ph-center strong, .pa3-stats b, .pb3-stats b, .ember-stats b, .you-arc dd, .m-hero strong, .sl-avg strong, .sl-head strong, .slp-orb b,
  .focus-page .focus-session-ring strong, .focus-page .focus-today-total strong, .you-hero-stats dd, .hp-act-stats b, .pk-node b, .pk-sum b, .pk-protein-big, .pl-big b, .ember-gauge-center strong small) { font-family: var(--font-display); font-weight: 800; letter-spacing: -.045em; }
:root[data-palette="greyblack"] :is(.sl-feature-txt h2, .slp-title, .gd-focus-name, .gd-forge-title, .focus-page .focus-intention h2, .pq h2, .you-premium-head b, .ai-state) { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; }
:root[data-palette="greyblack"] .ember-gauge-center strong small { font-weight: 600; }
:root[data-palette="greyblack"] .ph-note { font-family: var(--font-display); font-style: normal; }

/* Light, muted text (--tx-3): at least 4.5:1 on every Light surface (#e9edf1, #eff1f3, #f7f8fa, #fff).
   The axe audit of 2026-10-19 found #66727c at 4.35:1 on the #eff1f3 rows (57 places, mostly Sleep).
   approved-design.css is pinned, so the value is settled here; it stays lighter than --tx-2. */
[data-theme="light"] { --tx-3: #606c76; }
/* The stack's fine print fades --tx-3 further; in Light that fell to 3.2:1. */
[data-theme="light"] .pk-fine { opacity: 1; }

/* The Arc empty state's button takes the accent fill (brain-dump.css), so it takes the accent's label too:
   with the action-gradient label, Wine drew white text on peach (1.5:1). The rule in 2d weighs six classes
   (:is() counts its heaviest entry, ".you-hub .you-signin .auth-panel .btn"), hence the repeated class. */
:root[data-palette] .arc-start li > .btn.btn.btn.btn { color: var(--on-accent); }