/* Axiom: warm ivory, aubergine and violet. Shared by web and desktop. */
:root {
  --axiom-ivory: #F8F5F0;
  --axiom-porcelain: #FFFDFA;
  --axiom-aubergine: #211B29;
  --axiom-plum: #2D2635;
  --axiom-plum-raised: #393040;
  --axiom-plum-line: #51455B;
  --axiom-violet: #7656B5;
  --axiom-violet-hover: #64459E;
  --axiom-lilac: #C4AFE8;
  --axiom-lilac-soft: #EEE7F4;
  --axiom-lilac-deep: #3B2D4C;
  --axiom-champagne: #C6AA79;
  --axiom-sage: #9DC8AF;
  --axiom-sage-ink: #34684C;
  --axiom-rose: #F0A4AC;
  --axiom-rose-ink: #A83048;
  --axiom-amber: #E1BF84;
  --axiom-amber-ink: #805B22;
  --axiom-muted-light: #706575;
  --axiom-muted-dark: #B9ADBE;
  --axiom-line-light: #DED5E0;
  --axiom-soft-light: #F0EBE6;
  --axiom-overlay: #211B2999;
  --axiom-shadow: #211B29;
}
/* Semantic roles adapt together; product-specific CSS owns layout, not colour. */
:root, body:not(.output-body) {
  --axiom-canvas: var(--axiom-ivory);
  --axiom-panel: var(--axiom-porcelain);
  --axiom-raised: var(--axiom-soft-light);
  --axiom-text: var(--axiom-aubergine);
  --axiom-secondary: var(--axiom-muted-light);
  --axiom-border: var(--axiom-line-light);
  --axiom-highlight: var(--axiom-violet);
  --axiom-selection: var(--axiom-lilac-soft);
  --axiom-selection-border: var(--axiom-violet);
  --axiom-success: var(--axiom-sage-ink);
  --axiom-danger: var(--axiom-rose-ink);
  --axiom-warning: var(--axiom-amber-ink);
}
body:is(.pro-studio,.leader-premium,.member-premium,.operator-desk) {
  --axiom-canvas: var(--axiom-aubergine);
  --axiom-panel: var(--axiom-plum);
  --axiom-raised: var(--axiom-plum-raised);
  --axiom-text: var(--axiom-ivory);
  --axiom-secondary: var(--axiom-muted-dark);
  --axiom-border: var(--axiom-plum-line);
  --axiom-highlight: var(--axiom-lilac);
  --axiom-selection: var(--axiom-lilac-deep);
  --axiom-selection-border: var(--axiom-lilac);
  --axiom-success: var(--axiom-sage);
  --axiom-danger: var(--axiom-rose);
  --axiom-warning: var(--axiom-amber);
  color-scheme: dark;
}
body:is([data-desk-theme="light"],[data-leader-theme="light"],[data-member-theme="light"]) {
  --axiom-canvas: var(--axiom-ivory);
  --axiom-panel: var(--axiom-porcelain);
  --axiom-raised: var(--axiom-soft-light);
  --axiom-text: var(--axiom-aubergine);
  --axiom-secondary: var(--axiom-muted-light);
  --axiom-border: var(--axiom-line-light);
  --axiom-highlight: var(--axiom-violet);
  --axiom-selection: var(--axiom-lilac-soft);
  --axiom-selection-border: var(--axiom-violet);
  --axiom-success: var(--axiom-sage-ink);
  --axiom-danger: var(--axiom-rose-ink);
  --axiom-warning: var(--axiom-amber-ink);
  color-scheme: light;
}
body:not(.output-body) {
  --paper: var(--axiom-canvas) !important;
  --surface: var(--axiom-panel) !important;
  --soft: var(--axiom-raised) !important;
  --ink: var(--axiom-text) !important;
  --muted: var(--axiom-secondary) !important;
  --line: var(--axiom-border) !important;
  --accent: var(--axiom-highlight) !important;
  --title-tint: var(--axiom-highlight) !important;
  --selected: var(--axiom-selection) !important;
  --selected-border: var(--axiom-selection-border) !important;
  --action: var(--axiom-violet) !important;
  --action-ink: var(--axiom-porcelain) !important;
  --live: var(--axiom-success) !important;
  --urgent: var(--axiom-danger) !important;
  --green: var(--axiom-selection) !important;
  --lime: var(--axiom-highlight) !important;
  --workspace-surface: var(--axiom-panel) !important;
  --workspace-sidebar-surface: var(--axiom-panel) !important;
  --desk-blue: var(--axiom-highlight) !important;
  --desk-live: var(--axiom-success) !important;
  background-color: var(--axiom-canvas);
  color: var(--axiom-text);
  color-scheme: light;
}
body:is(.pro-studio,.leader-premium,.member-premium,.operator-desk):not([data-desk-theme="light"]):not([data-leader-theme="light"]):not([data-member-theme="light"]) { color-scheme: dark; }
body:not(.output-body) :is(button,input,select,textarea,progress) { accent-color: var(--axiom-violet); }
body:not(.output-body) :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline-color: var(--axiom-highlight); }
body:not(.output-body) ::selection { background: var(--axiom-selection); color: var(--axiom-text); }

/* Account entry points share the product palette, including the public /app route. */
#account-dialog {
  width: min(480px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: auto;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--ink);
  font-family: Manrope, 'Segoe UI', sans-serif;
}
#account-dialog::backdrop { background: var(--axiom-overlay); backdrop-filter: blur(6px); }
#account-dialog #account-title { margin: 16px 0 10px; font: 650 28px/1.2 Manrope, sans-serif; letter-spacing: -.8px; color: var(--ink); }
#account-dialog #account-description { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
#account-dialog #account-plan { margin: 0 0 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 9px; background: var(--selected); color: var(--ink); font-size: 14px; font-weight: 650; }
#account-dialog #account-plan span { display: block; margin-top: 4px; font-size: 11px; font-weight: 400; color: var(--muted); }
#account-dialog #account-form { display: grid; gap: 14px; }
#account-dialog label { display: grid; gap: 6px; margin: 0; font-size: 12px; color: var(--ink); }
#account-dialog :is(input,select) { margin: 0; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); font-size: 16px; }
#account-dialog :is(input,select):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#account-dialog #account-submit { width: 100%; min-height: 46px; padding: 12px 16px; background: var(--action); border: 1px solid var(--action); color: var(--action-ink); font-size: 13px; }
#account-dialog #account-submit:hover { background: var(--axiom-violet-hover); }
#account-dialog #account-password-help { margin: 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
#account-dialog #account-error { margin: 0; font-size: 12px; line-height: 1.6; color: var(--urgent); }
#account-dialog #account-error:empty { display: none; }
#account-dialog #account-toggle { margin-top: 20px; padding: 8px 0; background: transparent; color: var(--accent); font-size: 12px; }
#account-dialog [hidden] { display: none !important; }
@media (max-width: 520px) {
  #account-dialog { padding: 22px; }
  #account-dialog #account-title { font-size: 25px; }
  #account-dialog #account-form { gap: 12px; }
}