/*
 * Shared semantic colour tokens.
 *
 * This file is intentionally loaded after each page's legacy inline styles.
 * Pages own layout; themes own colour and material. Custom themes can still
 * override any token through inline properties on <html>.
 */
:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F7FAFC;
  --header-bg: var(--bg);
  --sb-color: var(--bg);
  --wall: url("chat-light.webp");
  --wall-default: url("chat-light.webp");
  --menu-wall-default: url("menu-light.webp");

  --text: #253447;
  --text-soft: #5E7080;
  --text-faint: #8A99A8;
  --accent: #4C6378;
  --accent-deep: #2C4056;
  --accent-fg: #FFFFFF;
  --send-bg: var(--accent-deep);
  --tick: #7E93A4;
  --hairline: rgba(120,142,165,.24);

  --card-bg: rgba(244,248,250,.42);
  --card-line: rgba(150,168,182,.12);
  --card-shadow: 0 14px 34px rgba(86,104,118,.08);
  --field-bg: rgba(247,250,252,.92);
  --field-line: rgba(151,169,181,.18);
  --sheet-bg: rgba(252,253,255,.90);
  --sheet-line: rgba(150,168,182,.12);
  --sheet-hi: rgba(255,255,255,.62);
  --sheet-scrim: rgba(44,60,78,.44);
  --shadow: 0 18px 46px rgba(74,93,108,.10);
  --soft-shadow: var(--card-shadow);

  --composer-bg: #EEF4FA;
  --seg-track: rgba(140,160,176,.11);
  --seg-thumb: rgba(255,255,255,.68);
  --seg-thumb-shadow: 0 2px 8px rgba(40,60,78,.08);
  --row-press: rgba(140,160,176,.09);
  --slider-track: rgba(143,162,176,.28);
  --slider-thumb: #44627B;
  --info-ring: rgba(143,162,176,.38);
  --status-dot: #5FBF8F;
  --danger: #B06A6F;

  --bubble-ai-bg: #FCFDFF;
  --bubble-ai-fg: var(--text);
  --bubble-ai-line: transparent;
  --bubble-human-bg: #DFE5EE;
  --bubble-human-fg: var(--text);
  --bubble-human-line: transparent;
  --bubble-ai-alpha: 72%;
  --bubble-human-alpha: 76%;
  --bubble-ai-blur: 16px;
  --bubble-human-blur: 16px;
  --bubble-radius: clamp(22px,3.6vw,30px);
  --think-flourish: rgba(99,121,142,.52);
  --think-label: #6A7E8E;
  --think-body: #56697A;

  --scrim: linear-gradient(180deg,rgba(255,255,255,.38),rgba(255,255,255,.12) 30%,rgba(255,255,255,.04) 68%,rgba(255,255,255,.22));
  --scrim-img: var(--scrim);
}

:root[data-theme="harbor"] {
  color-scheme: light;
  --bg: #F4F2EF;
  --wall: url("chat-harbor-calm.png");
  --wall-default: url("chat-harbor-calm.png");
  --menu-wall-default: url("chat-harbor-calm.png");
  --text: #36404B;
  --text-soft: #5E6B78;
  --text-faint: #9197A0;
  --accent: #4A5D6C;
  --accent-deep: #344A5A;
  --accent-fg: #FFFFFF;
  --send-bg: var(--accent);
  --tick: #7E8E9C;
  --hairline: rgba(74,93,108,.20);
  --card-bg: rgba(239,235,232,.66);
  --card-line: rgba(112,126,139,.22);
  --card-shadow: 0 10px 26px rgba(70,77,84,.12);
  --field-bg: rgba(244,242,239,.88);
  --field-line: rgba(142,151,159,.22);
  --sheet-bg: rgba(247,244,242,.94);
  --sheet-line: rgba(255,255,255,.62);
  --sheet-hi: rgba(255,255,255,.48);
  --sheet-scrim: rgba(45,53,62,.48);
  --shadow: 0 18px 46px rgba(67,73,80,.16);
  --soft-shadow: var(--card-shadow);
  --composer-bg: #EFEBE8;
  --bubble-ai-bg: #F6F2EE;
  --bubble-human-bg: #DDD0C8;
  --bubble-ai-fg: var(--text);
  --bubble-human-fg: var(--text);
  --bubble-ai-alpha: 100%;
  --bubble-human-alpha: 100%;
  --bubble-ai-blur: 0px;
  --bubble-human-blur: 0px;
  --think-flourish: rgba(74,93,108,.48);
  --think-label: var(--text-soft);
  --think-body: #4F5D6A;
  --slider-thumb: var(--accent);
  --status-dot: #6FA98C;
  --scrim: transparent;
  --scrim-img: linear-gradient(transparent,transparent);
}

:root[data-theme="mist"] {
  color-scheme: light;
  --bg: #F4F7F2;
  --wall: url("chat-mist-paper.png");
  --wall-default: url("chat-mist-paper.png");
  --menu-wall-default: var(--wall-default);
  --text: #2F4548;
  --text-soft: #60777A;
  --text-faint: #8CA09F;
  --accent: #587378;
  --accent-deep: #3E5B61;
  --accent-fg: #FFFFFF;
  --send-bg: #2F4C59;
  --tick: #819B9C;
  --hairline: rgba(112,139,130,.23);
  --card-bg: rgba(242,247,244,.54);
  --card-line: rgba(128,153,145,.17);
  --card-shadow: 0 14px 34px rgba(66,91,87,.08);
  --field-bg: rgba(247,250,248,.88);
  --field-line: rgba(133,158,151,.20);
  --sheet-bg: rgba(247,250,248,.94);
  --sheet-line: rgba(176,196,188,.30);
  --sheet-hi: rgba(255,255,255,.56);
  --sheet-scrim: rgba(47,70,68,.42);
  --shadow: 0 18px 46px rgba(66,91,87,.10);
  --soft-shadow: var(--card-shadow);
  --composer-bg: #EEF4F1;
  --bubble-ai-bg: #FFFFFF;
  --bubble-human-bg: #E7E9D5;
  --bubble-ai-fg: var(--text);
  --bubble-human-fg: var(--text);
  --bubble-ai-alpha: 64%;
  --bubble-human-alpha: 62%;
  --bubble-ai-blur: 14px;
  --bubble-human-blur: 14px;
  --think-flourish: rgba(103,132,129,.52);
  --think-label: #6C8584;
  --think-body: #587171;
  --seg-track: rgba(117,146,138,.12);
  --slider-track: rgba(125,151,144,.28);
  --slider-thumb: var(--accent);
  --status-dot: #69AA87;
  --scrim: linear-gradient(180deg,rgba(250,252,250,.32),rgba(248,251,248,.22) 46%,rgba(246,250,247,.28));
  --scrim-img: var(--scrim);
}

:root[data-theme="starry"] {
  color-scheme: light;
  --bg: #EEE9E5;
  --wall: linear-gradient(#EDE7E2,#EDE7E2);
  --wall-default: linear-gradient(#EDE7E2,#EDE7E2);
  --menu-wall-default: var(--custom-wall-image,var(--wall-default));
  --text: #514548;
  --text-soft: #746267;
  --text-faint: #88767B;
  --accent: #86646D;
  --accent-deep: #68505A;
  --accent-fg: #FFF9F6;
  --send-bg: #88656F;
  --tick: #846A72;
  --hairline: rgba(120,94,96,.18);
  --card-bg: rgba(255,253,250,.88);
  --card-line: rgba(134,100,109,.16);
  --card-shadow: 0 12px 32px rgba(105,76,83,.09);
  --field-bg: rgba(251,247,244,.90);
  --field-line: rgba(134,100,109,.20);
  --sheet-bg: rgba(250,244,241,.96);
  --sheet-line: rgba(134,100,109,.18);
  --sheet-hi: rgba(255,255,255,.58);
  --sheet-scrim: rgba(73,53,61,.38);
  --shadow: 0 18px 48px rgba(105,76,83,.10);
  --soft-shadow: 0 12px 30px rgba(105,76,83,.08);
  --composer-bg: var(--field-bg);
  --bubble-ai-bg: #FBF7F3;
  --bubble-human-bg: #DCC5C4;
  --bubble-ai-fg: var(--text);
  --bubble-human-fg: var(--text);
  --bubble-ai-alpha: 88%;
  --bubble-human-alpha: 82%;
  --bubble-ai-blur: 12px;
  --bubble-human-blur: 12px;
  --think-flourish: rgba(134,100,109,.55);
  --think-label: #80636C;
  --think-body: #68565C;
  --seg-track: rgba(134,100,109,.10);
  --seg-thumb: rgba(220,197,196,.80);
  --seg-thumb-shadow: 0 3px 10px rgba(105,76,83,.09);
  --row-press: rgba(134,100,109,.08);
  --slider-track: rgba(134,100,109,.23);
  --slider-thumb: #94717C;
  --info-ring: rgba(134,100,109,.30);
  --status-dot: #67866E;
  --danger: #985762;
  --scrim: linear-gradient(rgba(239,210,215,.08),rgba(239,210,215,.08));
  --scrim-img: var(--scrim);
}

:root[data-theme="gold"] {
  color-scheme: dark;
  --bg: #191512;
  --header-bg: #1D1915;
  --wall: none;
  --wall-default: none;
  --menu-wall-default: none;
  --text: #EEE4D7;
  --text-soft: #C5B39E;
  --text-faint: #8F8070;
  --accent: #D89F52;
  --accent-deep: #9E743A;
  --accent-fg: #1A130D;
  --send-bg: #B77D30;
  --tick: #CC9952;
  --hairline: rgba(216,159,82,.20);
  --card-bg: rgba(40,33,26,.70);
  --card-line: rgba(216,159,82,.22);
  --card-shadow: 0 14px 34px rgba(0,0,0,.32);
  --field-bg: rgba(30,25,20,.86);
  --field-line: rgba(216,159,82,.24);
  --sheet-bg: rgba(32,27,21,.96);
  --sheet-line: rgba(216,159,82,.22);
  --sheet-hi: rgba(235,208,168,.16);
  --sheet-scrim: rgba(6,5,3,.64);
  --shadow: 0 18px 48px rgba(0,0,0,.40);
  --soft-shadow: 0 14px 36px rgba(0,0,0,.30);
  --composer-bg: rgba(24,20,17,.78);
  --bubble-ai-bg: #383025;
  --bubble-human-bg: #4B3927;
  --bubble-ai-fg: #DDD2BF;
  --bubble-human-fg: #F7EDDF;
  --bubble-ai-alpha: 100%;
  --bubble-human-alpha: 100%;
  --bubble-ai-blur: 0px;
  --bubble-human-blur: 0px;
  --think-flourish: rgba(216,159,82,.60);
  --think-label: #C49A66;
  --think-body: #D0BB9F;
  --seg-track: rgba(216,159,82,.13);
  --seg-thumb: rgba(94,70,44,.70);
  --seg-thumb-shadow: 0 3px 10px rgba(0,0,0,.26);
  --row-press: rgba(216,159,82,.12);
  --slider-track: rgba(216,159,82,.28);
  --slider-thumb: var(--accent);
  --info-ring: rgba(216,159,82,.38);
  --status-dot: #9BC98A;
  --danger: #D9A88F;
  --scrim: linear-gradient(180deg,rgba(216,159,82,.05),rgba(25,21,18,.10) 46%,rgba(38,31,25,.14));
  --scrim-img: var(--scrim);
}

:root[data-theme="blank"] {
  color-scheme: light;
  --bg: #F3F1ED;
  --wall: none;
  --wall-default: none;
  --menu-wall-default: none;
  --text: #45433F;
  --text-soft: #706D68;
  --text-faint: #89857F;
  --accent: #706B63;
  --accent-deep: #57534D;
  --accent-fg: #FFFFFF;
  --send-bg: var(--accent);
  --hairline: rgba(90,85,78,.12);
  --card-bg: #FAF9F7;
  --card-line: rgba(90,85,78,.12);
  --card-shadow: none;
  --field-bg: #FFFFFF;
  --field-line: rgba(90,85,78,.15);
  --sheet-bg: #FAF9F7;
  --sheet-line: rgba(90,85,78,.12);
  --sheet-hi: transparent;
  --sheet-scrim: rgba(50,45,40,.30);
  --shadow: none;
  --soft-shadow: none;
  --composer-bg: var(--field-bg);
  --bubble-ai-bg: #FFFFFF;
  --bubble-human-bg: #E5E1DB;
  --bubble-ai-fg: var(--text);
  --bubble-human-fg: var(--text);
  --bubble-ai-alpha: 100%;
  --bubble-human-alpha: 100%;
  --bubble-ai-blur: 0px;
  --bubble-human-blur: 0px;
  --scrim: linear-gradient(transparent,transparent);
  --scrim-img: var(--scrim);
}

/* Stable aliases used by the next refactor stage. */
:root {
  --surface-card-bg: var(--card-bg);
  --surface-card-line: var(--card-line);
  --surface-card-shadow: var(--card-shadow,var(--soft-shadow));
  --surface-field-bg: var(--field-bg);
  --surface-field-line: var(--field-line);
  --surface-sheet-bg: var(--sheet-bg);
  --surface-sheet-line: var(--sheet-line);
  --surface-sheet-scrim: var(--sheet-scrim);
  --control-primary-bg: var(--send-bg,var(--accent));
  --control-primary-fg: var(--accent-fg);
}

/* Custom theme values are inline and retain priority over this palette. */
:root.custom-theme {
  --header-bg: var(--bg);
  --sb-color: var(--bg);
}

/* Material choices cover the same surfaces on every page, including Pearl overrides. */
:root[data-surface] :is(.settings-card,.relationship-card,.action-row,.tp-card,.tc-card,.wake-overview-card,.mcp-list-card,.glass,.card,.dcard,.favorite-card,.room-nav) {
  background:var(--card-bg);
  border:1px solid var(--card-line);
  box-shadow:var(--card-shadow);
  -webkit-backdrop-filter:var(--foundation-filter);
  backdrop-filter:var(--foundation-filter);
  --text:var(--foundation-ink);
  --text-soft:var(--foundation-soft);
  --text-faint:var(--foundation-faint);
  color:var(--text);
}
:root[data-surface] :is(.peerpill,.composer .field,.quick-menu,.model-pop,.sheet,.mcp-editor-sheet,.home-detail-sheet,.relationship-edit-sheet) {
  background:var(--field-bg);
  border-color:var(--field-line);
  --text:var(--foundation-ink);
  --text-soft:var(--foundation-soft);
  --text-faint:var(--foundation-faint);
  color:var(--text);
  -webkit-backdrop-filter:var(--foundation-filter);
  backdrop-filter:var(--foundation-filter);
}
:root[data-surface] :is(.subtab.on,.sheet .row .send,.gatebox .row .send,.mcp-save-wide,.home-confirm,.relationship-edit-save) {
  background:var(--accent-deep);color:var(--accent-fg);
}
:root[data-surface] .segmented button.active {color:var(--text);}
:root.custom-theme .row.ai .bubble {color:var(--bubble-ai-fg);}
:root.custom-theme .row.human .bubble {color:var(--bubble-human-fg);}

/* v247: keep the chat controls as one quiet glass set, separate from card tint. */
:root[data-surface="frost"] :is(.peerpill,.topbtn.settings,.composer .field) {
  background:rgba(255,255,255,.67);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 8px 24px rgba(40,48,60,.10), inset 0 1px 0 rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(22px) saturate(1.12);
  backdrop-filter:blur(22px) saturate(1.12);
  color:var(--text);
}
:root:not([data-surface="solid"]):not([data-surface="frost"]):not([data-theme="gold"]) :is(.peerpill,.topbtn.settings) {
  border-color:rgba(255,255,255,.88);
}
:root[data-surface="frost"] .floatbtn.send {
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.42);
  color:var(--text);
  box-shadow:0 8px 24px rgba(40,48,60,.10), inset 0 1px 0 rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(22px) saturate(1.12);
  backdrop-filter:blur(22px) saturate(1.12);
}
:root[data-surface="frost"] .floatbtn.send:hover{color:var(--text)}
:root[data-surface="frost"] .composer .voice-trigger{
  background:rgba(255,255,255,.68);
  border-color:rgba(255,255,255,.42);
  box-shadow:0 8px 24px rgba(40,48,60,.10), inset 0 1px 0 rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(22px) saturate(1.12);
  backdrop-filter:blur(22px) saturate(1.12);
}
:root[data-surface="frost"] .composer :is(.plusbtn,.call-entry,.voice-trigger){
  color:var(--text);
}
/* Solid custom themes use the same adjustable field colour on both floating pills. */
:root[data-surface="solid"] :is(.peerpill,.topbtn.settings){
  background:var(--field-bg);
  border:1px solid var(--field-line);
  color:var(--foundation-ink);
  box-shadow:var(--card-shadow);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
/* One primary control palette across login, reminders, memory, and sheets. */
:root[data-surface] :is(.login button,.mchip.on,.seg button.on,.wkrow button.on,.wbtn,.pill.primary,.chip.on,.mcp-save-wide,.home-confirm,.relationship-edit-save,.sheet .row .send,.gatebox .row .send) {
  background:var(--accent-deep);
  border-color:var(--accent-deep);
  color:var(--accent-fg);
}
/* Pearl cards, popovers and drawers share the settings card's translucency. */
:root[data-theme="light"] :is(.sheet,.modal-scrim > .modal,.process-sheet,.mcp-editor-sheet,.wake-editor-sheet,.home-detail-sheet,.relationship-edit-sheet,.persona-sheet,.tok-pop),
:root[data-surface="frost"] :is(.sheet,.modal-scrim > .modal,.process-sheet,.mcp-editor-sheet,.wake-editor-sheet,.home-detail-sheet,.relationship-edit-sheet,.persona-sheet,.tok-pop) {
  border-color:var(--card-line);
  box-shadow:var(--card-shadow);
  -webkit-backdrop-filter:blur(24px) saturate(1.1);
  backdrop-filter:blur(24px) saturate(1.1);
}
:root[data-theme="light"] :is(.sheet,.modal-scrim > .modal,.process-sheet,.mcp-editor-sheet,.wake-editor-sheet,.home-detail-sheet,.relationship-edit-sheet,.persona-sheet,.tok-pop,#sheet,#sheet .sheet-top) {
  background:rgba(250,248,246,.94);
}
:root[data-surface="frost"] :is(.sheet,.modal-scrim > .modal,.process-sheet,.mcp-editor-sheet,.wake-editor-sheet,.home-detail-sheet,.relationship-edit-sheet,.persona-sheet,.tok-pop) {
  background:rgba(255,255,255,.88);
  border-color:rgba(255,255,255,.78);
}
/* Chat annotations follow the neutral page ink, including the moon and favorite star. */
:root[data-surface="frost"] :is(.process-bar,.act-label,.human-signature){
  color:var(--text-soft);
}
:root[data-surface="frost"] :is(.process-bar-mark,.act-glyph,.act-state){
  color:color-mix(in srgb,var(--text-soft) 82%,transparent);
}
:root[data-surface="frost"] :is(.message-favorite:not(.on),.token-note:not(.cold)){
  color:var(--text-faint);
  opacity:.9;
}
:root[data-surface="frost"] :is(.message-favorite.on,.token-note.cold){
  color:var(--text-soft);
  opacity:1;
}
:root[data-surface="frost"] .voice-pill-play{ color:var(--text-soft); }
:root[data-surface="frost"] .voice-wave i{
  background:color-mix(in srgb,var(--text-soft) 78%,transparent);
}
/* The nested status row shares the model configuration input's surface. */
:root[data-theme] .action-row.status{
  border:1px solid var(--field-line);
  border-radius:11px;
  background:var(--field-bg);
  padding:9px 12px;
  box-shadow:none;
}
/* Memory drawers keep one white glass surface down through the safe area. */
:root[data-surface="frost"] #sheet,
:root[data-surface="frost"] #sheet .sheet-top{
  background:rgba(255,255,255,.88);
  border-color:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(22px) saturate(1.12);
  backdrop-filter:blur(22px) saturate(1.12);
}
/* One painted memory drawer surface avoids stacked translucent bands. */
:root[data-theme] #sheet :is(.sheet-top,.sheet-scroll){
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
/* Rose floating controls use exactly the composer's surface; custom frost
   already shares its fixed white glass between these three controls. */
:root[data-theme="starry"]:not([data-surface="frost"]) :is(.peerpill,.topbtn.settings){
  background:var(--field-bg);
  border-color:var(--field-line);
}
/* Keep dictation's hit area and icon, without a circular button surface. */
:root[data-theme] .composer .field .voice-trigger{
  background:transparent;
  border:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
:root[data-theme="light"] .composer .quick-menu{background:rgba(250,248,246,.94)}
:root[data-surface="frost"] .composer .quick-menu{background:rgba(255,255,255,.88)}