/* Shared XDesk foundations. Keep the approved palette here. */
:root {
  /* RGB values match desktop/Styles.axaml. All page colors refer to these tokens. */
  --ink: #2e2e32;
  --slate: #666777;
  --silver: #dddde2;
  --white: #fbfbfb;
  --accent: #777fff;
  --charcoal: #323339;
  --graphite: #414248;
  --steel: #61636e;
  --paper: #f3f3f3;
  --danger-dark: #f18d92;
  --danger-light: #b42336;
  color-scheme: dark;
  --page: var(--ink);
  --sidebar: var(--charcoal);
  --surface: var(--graphite);
  --raised: var(--steel);
  --edge: var(--steel);
  --text: var(--white);
  --muted: var(--silver);
  --error: var(--danger-dark);
  --accent-text: #ffffff;
  --accent-hover: var(--accent);
  --focus: var(--accent);
  --header: var(--charcoal);
  --accent-wash: color-mix(in srgb, var(--accent) 12%, transparent);
  --scrim: color-mix(in srgb, var(--ink) 40%, transparent);
  --shadow: color-mix(in srgb, var(--ink) 16%, transparent);
  --width: 1184px;
  --gutter: 32px;
  --radius: 24px;
  --control-radius: 12px;
  --control-height: 52px;
  --control-height-compact: 44px;
  --control-height-prominent: 56px;
  --icon-size: 20px;
  --motion-fast: 150ms;
  --motion-ease: cubic-bezier(.2, 0, .2, 1);
  --section-space: 96px;
  --pro-border: 3px;
  --site-header-height: 61px;
  --reading-size: 16px;
  --reading-line-height: 1.75;
  --reading-width: 48rem;
}
@media (max-width: 900px) { :root { --site-header-height: 61px; } }
html[data-theme=white] {
  color-scheme: light;
  --page: var(--white);
  --sidebar: var(--silver);
  --surface: var(--paper);
  --raised: var(--silver);
  --edge: var(--silver);
  --text: var(--ink);
  --muted: var(--slate);
  --error: var(--danger-light);
  --header: var(--paper);
  --accent-text: #ffffff;
}