/* P106 CSS-R5 — Documentation final authority; must remain last. */

/* === SOURCE: app-dual-mode-token-closure-p97.css === */
/* P97 — UXC5 Global Dual-Mode Token Closure.
   One semantic token contract for application UI. Legacy CSS may remain below,
   but shared chrome/components must resolve their final colors through these tokens.
   Desktop index.php and invitation preview/theme canvases are intentionally out of scope. */

:root,
html[data-sh-theme="dark"]{
  --sh-color-page-bg:#101729;
  --sh-color-page-bg-deep:#0d1425;
  --sh-color-surface:#151d31;
  --sh-color-surface-subtle:#1b2438;
  --sh-color-surface-raised:#222c42;
  --sh-color-control:#273248;
  --sh-color-control-hover:#323d54;
  --sh-color-field:#1b263b;
  --sh-color-field-soft:#202b40;
  --sh-color-text:#f8fbff;
  --sh-color-text-secondary:#d2d9e5;
  --sh-color-text-muted:#aab4c4;
  --sh-color-text-dim:#7f8ba0;
  --sh-color-text-on-dark:#f8fbff;
  --sh-color-text-on-accent:#ffffff;
  --sh-color-icon:#e7edf6;
  --sh-color-icon-muted:#aab5c6;
  --sh-color-icon-on-dark:#f8fbff;
  --sh-color-border:#344057;
  --sh-color-border-strong:#526079;
  --sh-color-border-on-dark:rgba(255,255,255,.24);
  --sh-color-accent:#be185d;
  --sh-color-accent-hover:#d11f69;
  --sh-color-accent-soft:rgba(190,24,93,.18);
  --sh-color-accent-line:rgba(226,107,159,.52);
  --sh-color-good:#86efac;
  --sh-color-warn:#fde68a;
  --sh-color-danger:#fca5a5;
  --sh-color-focus:#e36b9f;
  --sh-color-shadow:rgba(0,0,0,.24);
  --sh-color-topbar:#101729;
  --sh-color-topbar-hover:rgba(255,255,255,.09);
  --sh-color-topbar-line:rgba(255,255,255,.18);
}

html[data-sh-theme="light"]{
  --sh-color-page-bg:#f3f6fb;
  --sh-color-page-bg-deep:#e9eef6;
  --sh-color-surface:#ffffff;
  --sh-color-surface-subtle:#eef2f7;
  --sh-color-surface-raised:#e7ecf3;
  --sh-color-control:#dfe6ef;
  --sh-color-control-hover:#d2dbe7;
  --sh-color-field:#e7ecf3;
  --sh-color-field-soft:#eef2f7;
  --sh-color-text:#172033;
  --sh-color-text-secondary:#334158;
  --sh-color-text-muted:#526075;
  --sh-color-text-dim:#627086;
  --sh-color-text-on-dark:#f8fbff;
  --sh-color-text-on-accent:#ffffff;
  --sh-color-icon:#263247;
  --sh-color-icon-muted:#526075;
  --sh-color-icon-on-dark:#f8fbff;
  --sh-color-border:#c7d1df;
  --sh-color-border-strong:#9eacbe;
  --sh-color-border-on-dark:rgba(255,255,255,.30);
  --sh-color-accent:#be185d;
  --sh-color-accent-hover:#a91451;
  --sh-color-accent-soft:#f8e3ec;
  --sh-color-accent-line:#dca0ba;
  --sh-color-good:#166534;
  --sh-color-warn:#92400e;
  --sh-color-danger:#b42318;
  --sh-color-focus:#be185d;
  --sh-color-shadow:rgba(15,23,42,.10);
  /* The workspace header intentionally stays navy in both modes. */
  --sh-color-topbar:#101729;
  --sh-color-topbar-hover:rgba(255,255,255,.10);
  --sh-color-topbar-line:rgba(255,255,255,.22);
}

/* Legacy aliases stay supported, but now resolve through semantic roles. */
html[data-sh-theme]{
  --sh-ui-bg:var(--sh-color-page-bg);
  --sh-ui-bg-deep:var(--sh-color-page-bg-deep);
  --sh-ui-panel:var(--sh-color-surface);
  --sh-ui-panel-2:var(--sh-color-surface-subtle);
  --sh-ui-raised:var(--sh-color-control);
  --sh-ui-line:var(--sh-color-border);
  --sh-ui-text:var(--sh-color-text);
  --sh-ui-muted:var(--sh-color-text-muted);
  --sh-ui-dim:var(--sh-color-text-dim);
  --sh-ui-accent:var(--sh-color-accent);
  --sh-ui-accent-hover:var(--sh-color-accent-hover);
  --sh-ui-accent-soft:var(--sh-color-accent-soft);
  --sh-ui-good:var(--sh-color-good);
  --sh-ui-warn:var(--sh-color-warn);
  --sh-ui-danger:var(--sh-color-danger);
  --sh-ui-input:var(--sh-color-surface);
  --sh-ui-shadow:0 14px 38px var(--sh-color-shadow);
  --sh-ui-button-border:var(--sh-color-border);
  --sh-ui-button-hover:var(--sh-color-control-hover);
}

/* Generic application controls. */
html[data-sh-theme] body.sh-app-page{
  background-color:var(--sh-color-page-bg)!important;
  color:var(--sh-color-text)!important;
}
html[data-sh-theme] body.sh-app-page input,
html[data-sh-theme] body.sh-app-page textarea,
html[data-sh-theme] body.sh-app-page select{
  color:var(--sh-color-text)!important;
  border-color:var(--sh-color-border)!important;
}
html[data-sh-theme] body.sh-app-page input::placeholder,
html[data-sh-theme] body.sh-app-page textarea::placeholder{color:var(--sh-color-text-dim)!important;opacity:1}
html[data-sh-theme] body.sh-app-page svg{color:inherit}

/* Workspace header is a dark chrome surface in BOTH modes.
   Never use the page foreground token on this dark surface. */
html[data-sh-theme] body.sh-workspace-body .topbar{
  background:var(--sh-color-topbar)!important;
  border-bottom-color:var(--sh-color-topbar-line)!important;
  color:var(--sh-color-text-on-dark)!important;
}
html[data-sh-theme] body.sh-workspace-body .topbar .brand,
html[data-sh-theme] body.sh-workspace-body .topbar .brand span,
html[data-sh-theme] body.sh-workspace-body .topbar .brand strong{
  color:var(--sh-color-text-on-dark)!important;
}
html[data-sh-theme] body.sh-workspace-body .topbar .nav .sh-account-trigger,
html[data-sh-theme] body.sh-workspace-body .topbar .nav .sh-theme-toggle{
  color:var(--sh-color-icon-on-dark)!important;
  border-color:var(--sh-color-border-on-dark)!important;
  background:transparent!important;
}
html[data-sh-theme] body.sh-workspace-body .topbar .nav .sh-account-trigger:hover,
html[data-sh-theme] body.sh-workspace-body .topbar .nav .sh-account-menu.is-open .sh-account-trigger,
html[data-sh-theme] body.sh-workspace-body .topbar .nav .sh-account-menu:focus-within .sh-account-trigger,
html[data-sh-theme] body.sh-workspace-body .topbar .nav .sh-theme-toggle:hover{
  color:var(--sh-color-text-on-dark)!important;
  background:var(--sh-color-topbar-hover)!important;
  border-color:var(--sh-color-border-on-dark)!important;
}
html[data-sh-theme] body.sh-workspace-body .topbar .nav .sh-account-trigger:focus-visible,
html[data-sh-theme] body.sh-workspace-body .topbar .nav .sh-theme-toggle:focus-visible{
  outline-color:var(--sh-color-focus)!important;
}
/* Popovers are floating objects; they follow the active mode, not the dark topbar. */
html[data-sh-theme] body.sh-app-page .sh-account-popover{
  background:var(--sh-color-surface)!important;
  border-color:var(--sh-color-border)!important;
  color:var(--sh-color-text)!important;
}
html[data-sh-theme] body.sh-app-page .sh-account-identity strong,
html[data-sh-theme] body.sh-app-page .sh-account-popover>a{color:var(--sh-color-text)!important}
html[data-sh-theme] body.sh-app-page .sh-account-identity span{color:var(--sh-color-text-muted)!important}
html[data-sh-theme] body.sh-app-page .sh-account-identity small{color:var(--sh-color-text-dim)!important}
html[data-sh-theme] body.sh-app-page .sh-account-popover>a:hover,
html[data-sh-theme] body.sh-app-page .sh-account-popover>a:focus-visible{background:var(--sh-color-control-hover)!important}
html[data-sh-theme] body.sh-app-page .sh-account-popover>a.sh-account-logout{color:var(--sh-color-danger)!important}

/* Shared button/icon contract: icon color follows the control foreground. */
html[data-sh-theme] body.sh-app-page .btn:not(.primary):not(.pink):not(.green):not(.danger),
html[data-sh-theme] body.sh-app-page button.btn:not(.primary):not(.pink):not(.green):not(.danger){
  background:var(--sh-color-control)!important;
  border-color:var(--sh-color-border)!important;
  color:var(--sh-color-text)!important;
}
html[data-sh-theme] body.sh-app-page .btn:not(.primary):not(.pink):not(.green):not(.danger):hover,
html[data-sh-theme] body.sh-app-page button.btn:not(.primary):not(.pink):not(.green):not(.danger):hover{
  background:var(--sh-color-control-hover)!important;
}
html[data-sh-theme] body.sh-app-page .btn svg,
html[data-sh-theme] body.sh-app-page button svg{
  color:currentColor!important;
}

/* P97 token closure guard markers used by the release audit. */
:root{--sh-token-closure-version:"P97-UXC5"}

/* === SOURCE: app-component-authority-p98.css === */
/* P98 — UXC5R1 Full Cascade & Component Authority.
   Final semantic component layer for application UI (Desktop and invitation
   theme/preview canvases intentionally excluded). This file is loaded after P97.
*/

/* Shared dark workspace chrome must remain readable in BOTH UI modes. */
html[data-sh-theme] body.sh-app-workspace-page .topbar{
  background:var(--sh-color-topbar)!important;
  color:var(--sh-color-text-on-dark)!important;
  border-bottom-color:var(--sh-color-topbar-line)!important;
}
html[data-sh-theme] body.sh-app-workspace-page .topbar .brand,
html[data-sh-theme] body.sh-app-workspace-page .topbar .brand span,
html[data-sh-theme] body.sh-app-workspace-page .topbar .brand strong{
  color:var(--sh-color-text-on-dark)!important;
}
html[data-sh-theme] body.sh-app-workspace-page .topbar .sh-account-trigger,
html[data-sh-theme] body.sh-app-workspace-page .topbar .sh-theme-toggle{
  color:var(--sh-color-icon-on-dark)!important;
  border-color:var(--sh-color-border-on-dark)!important;
  background:transparent!important;
}
html[data-sh-theme] body.sh-app-workspace-page .topbar .sh-account-trigger svg,
html[data-sh-theme] body.sh-app-workspace-page .topbar .sh-theme-toggle::before{
  color:currentColor!important;
}
html[data-sh-theme] body.sh-app-workspace-page .topbar .sh-account-trigger:hover,
html[data-sh-theme] body.sh-app-workspace-page .topbar .sh-account-trigger:focus-visible,
html[data-sh-theme] body.sh-app-workspace-page .topbar .sh-theme-toggle:hover,
html[data-sh-theme] body.sh-app-workspace-page .topbar .sh-theme-toggle:focus-visible{
  color:var(--sh-color-text-on-dark)!important;
  background:var(--sh-color-topbar-hover)!important;
  border-color:var(--sh-color-border-on-dark)!important;
}

/* Generic semantic text/icon helpers for application surfaces. */
html[data-sh-theme] body.sh-app-page .sh-semantic-text{color:var(--sh-color-text)!important}
html[data-sh-theme] body.sh-app-page .sh-semantic-muted{color:var(--sh-color-text-muted)!important}
html[data-sh-theme] body.sh-app-page .sh-semantic-icon{color:var(--sh-color-icon)!important}

:root{--sh-component-authority-version:"P98-UXC5R1"}