:root,
:root[data-theme="light"],
[data-theme="light"] {
  color-scheme: light;
  --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bg-body-gradient: none;
  --glass-blur: blur(14px) saturate(120%);

  --bg-canvas: #f5f3ef;
  --bg-secondary: #eeece8;
  --bg-card: #fffefa;
  --bg-card-hover: #f8f5fb;
  --bg-surface: #fbfaf7;
  --bg-surface-elevated: #ffffff;
  --bg-surface-hover: #f2eff5;
  --bg-modal: var(--bg-surface-elevated);
  --bg-dropdown: var(--bg-surface-elevated);

  --border-subtle: #e9e5df;
  --border-medium: #dcd6ce;
  --border-strong: #c8bfb5;
  --border-focus: #655287;

  --text-primary: #27252b;
  --text-secondary: #5f5b63;
  --text-muted: #77727b;
  --text-faint: #958f98;

  --btn-primary-bg: #655287;
  --btn-primary-text: #ffffff;
  --btn-primary-border: #655287;
  --btn-primary-hover: #554473;
  --btn-secondary-bg: #f5f1f8;
  --btn-secondary-text: #4d4164;
  --btn-secondary-border: #ded5e8;
  --btn-secondary-hover: #ece5f2;

  --accent-primary: #655287;
  --accent-secondary: #397d74;
  --accent-blue: #466f90;
  --accent-cyan: #438b8b;
  --accent-purple: #705991;
  --accent-emerald: #397d68;
  --accent-amber: #a46d30;
  --accent-rose: #ad5e61;
  --accent-primary-contrast: #ffffff;
  --accent-blue-contrast: #ffffff;
  --accent-emerald-contrast: #ffffff;
  --accent-rose-contrast: #ffffff;
  --accent-amber-contrast: #ffffff;

  --accent-primary-soft: #eee8f4;
  --accent-blue-soft: #e9f0f5;
  --accent-emerald-soft: #e7f1ec;
  --accent-amber-soft: #f7efe2;
  --accent-rose-soft: #f7eaea;

  --masthead-bg: rgba(251, 250, 247, 0.94);
  --card-shadow: 0 5px 18px rgba(47, 39, 54, 0.07);
  --card-shadow-hover: 0 12px 28px rgba(47, 39, 54, 0.12);
  --input-bg: #fffefa;
  --input-border: #dcd6ce;
  --story-ring-unseen: #705991;
  --story-avatar-bg: #eee8f4;
  --modal-backdrop: rgba(34, 29, 39, 0.48);


  --ig-gradient: #705991;
  --ig-gradient-text: #ffffff;
  --ig-gradient-soft: rgba(112, 89, 145, 0.10);
  --cyber-gradient: #655287;
  --blue-gradient: #527d9d;
  --purple-gradient: #705991;
  --emerald-gradient: #397d68;
  --pastel-shimmer: none;


  --bg-app: var(--bg-canvas);
  --bg-sidebar: var(--bg-surface);
  --bg-card-subtle: #f5f1f8;
  --bg-input: var(--input-bg);
  --border-color: var(--border-medium);
  --table-stripe: #f7f4f0;
  --table-hover: #f0edf3;
  --accent-blue-hover: #426a88;
  --accent-blue-light: var(--accent-blue-soft);
  --accent-emerald-light: var(--accent-emerald-soft);
  --accent-amber-light: var(--accent-amber-soft);
  --accent-rose-light: var(--accent-rose-soft);
  --accent-purple-light: var(--accent-primary-soft);

  --color-bg: var(--bg-canvas);
  --color-surface: var(--bg-card);
  --color-surface-subtle: var(--bg-surface);
  --color-surface-hover: var(--bg-card-hover);
  --color-surface-active: #e9e3ee;
  --color-surface-selected: #eee8f4;
  --color-border: var(--border-medium);
  --color-border-subtle: var(--border-subtle);
  --color-border-hover: var(--border-strong);
  --color-border-focus: var(--border-focus);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-text-inverse: #ffffff;
  --color-accent: var(--accent-primary);
  --color-accent-hover: #554473;
  --color-accent-active: #48395f;
  --color-accent-subtle: var(--accent-primary-soft);
  --color-accent-text: #ffffff;
  --color-accent-muted: #81738f;
  --color-danger: #ad5e61;
  --color-danger-hover: #934c50;
  --color-danger-subtle: #f7eaea;
  --color-danger-text: #8c4549;
  --color-success: #397d68;
  --color-success-hover: #2d6958;
  --color-success-subtle: #e7f1ec;
  --color-success-text: #2c6957;
  --color-warning: #a46d30;
  --color-warning-subtle: #f7efe2;
  --color-status-online: #397d68;
  --color-status-offline: #928c94;
  --color-status-away: var(--accent-amber);
  --color-msg-sent-bg: #655287;
  --color-msg-sent-text: #ffffff;
  --color-msg-sent-border: transparent;
  --color-msg-sent-meta: rgba(255, 255, 255, 0.82);
  --color-msg-rcvd-bg: #f1eef3;
  --color-msg-rcvd-text: #27252b;
  --color-msg-rcvd-border: #e1dbe4;
  --color-msg-rcvd-meta: #77727b;
  --color-modal-backdrop: var(--modal-backdrop);
  --shadow-overlay: var(--card-shadow);
  --shadow-dropdown: 0 8px 24px rgba(47, 39, 54, 0.12);
  --shadow-tooltip: 0 3px 10px rgba(47, 39, 54, 0.16);

  --ob-page: var(--bg-canvas);
  --ob-surface: var(--bg-card);
  --ob-surface-muted: var(--bg-surface);
  --ob-surface-readonly: #f2eff5;
  --ob-border: var(--border-medium);
  --ob-border-strong: var(--border-strong);
  --ob-text: var(--text-primary);
  --ob-text-secondary: var(--text-secondary);
  --ob-text-muted: var(--text-muted);
  --ob-accent: var(--accent-primary);
  --ob-accent-contrast: #ffffff;
  --ob-focus: var(--border-focus);
  --ob-error-bg: #f7eaea;
  --ob-error-border: #d9a4a6;
  --ob-error-text: #8c4549;
  --ob-success: #2c6957;
  --ob-shadow: var(--card-shadow);
}

:root[data-theme="dark"],
[data-theme="dark"],
html.dark,
body.dark {
  color-scheme: dark;
  --bg-body-gradient: none;

  --bg-canvas: #000000;
  --bg-secondary: #1A1A1A;
  --bg-card: #121212;
  --bg-card-hover: #1A1A1A;
  --bg-surface: #121212;
  --bg-surface-elevated: #262626;
  --bg-surface-hover: #262626;
  --bg-modal: #262626;
  --bg-dropdown: #262626;

  --border-subtle: #363636;
  --border-medium: #363636;
  --border-strong: #363636;
  --border-focus: #0095F6;

  --text-primary: #FFFFFF;
  --text-secondary: #A8A8A8;
  --text-muted: #A8A8A8;
  --text-faint: #A8A8A8;

  --btn-primary-bg: #0095F6;
  --btn-primary-text: #000000;
  --btn-primary-border: #0095F6;
  --btn-primary-hover: #0095F6;
  --btn-secondary-bg: #1A1A1A;
  --btn-secondary-text: #FFFFFF;
  --btn-secondary-border: #363636;
  --btn-secondary-hover: #262626;

  --accent-primary: #0095F6;
  --accent-secondary: #8eb8ad;
  --accent-blue: #0095F6;
  --accent-cyan: #83b7b5;
  --accent-purple: #A8A8A8;
  --accent-emerald: #8db9a3;
  --accent-amber: #c6a477;
  --accent-rose: #c58f96;
  --accent-primary-contrast: #000000;
  --accent-blue-contrast: #000000;
  --accent-emerald-contrast: #000000;
  --accent-rose-contrast: #000000;
  --accent-amber-contrast: #000000;

  --accent-primary-soft: #262626;
  --accent-blue-soft: #262626;
  --accent-emerald-soft: #262626;
  --accent-amber-soft: #262626;
  --accent-rose-soft: #262626;

  --masthead-bg: #121212;
  --card-shadow: 0 5px 18px rgba(0, 0, 0, 0.24);
  --card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.34);
  --input-bg: #1A1A1A;
  --input-border: #363636;
  --story-ring-unseen: #0095F6;
  --story-avatar-bg: #262626;
  --modal-backdrop: rgba(0, 0, 0, 0.72);

  --ig-gradient: #0095F6;
  --ig-gradient-text: #000000;
  --ig-gradient-soft: rgba(0, 149, 246, 0.14);
  --cyber-gradient: #0095F6;
  --blue-gradient: #0095F6;
  --purple-gradient: #0095F6;
  --emerald-gradient: #8db9a3;
  --pastel-shimmer: none;

  --bg-app: var(--bg-canvas);
  --bg-sidebar: var(--bg-surface);
  --bg-card-subtle: #1A1A1A;
  --bg-input: var(--input-bg);
  --border-color: var(--border-medium);
  --table-stripe: #121212;
  --table-hover: #1A1A1A;
  --accent-blue-hover: #0095F6;
  --accent-blue-light: var(--accent-blue-soft);
  --accent-emerald-light: var(--accent-emerald-soft);
  --accent-amber-light: var(--accent-amber-soft);
  --accent-rose-light: var(--accent-rose-soft);
  --accent-purple-light: var(--accent-primary-soft);

  --color-bg: var(--bg-canvas);
  --color-surface: var(--bg-card);
  --color-surface-subtle: var(--bg-secondary);
  --color-surface-hover: var(--bg-card-hover);
  --color-surface-active: #262626;
  --color-surface-selected: #262626;
  --color-border: var(--border-medium);
  --color-border-subtle: var(--border-subtle);
  --color-border-hover: var(--border-strong);
  --color-border-focus: var(--border-focus);
  --color-text-primary: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: var(--text-muted);
  --color-text-inverse: #000000;
  --color-accent: var(--accent-primary);
  --color-accent-hover: #0095F6;
  --color-accent-active: #0095F6;
  --color-accent-subtle: var(--accent-primary-soft);
  --color-accent-text: #000000;
  --color-accent-muted: #A8A8A8;
  --color-danger: #c58f96;
  --color-danger-hover: #d4a0a6;
  --color-danger-subtle: #262626;
  --color-danger-text: #d8a5aa;
  --color-success: #8db9a3;
  --color-success-hover: #a0c8b2;
  --color-success-subtle: #262626;
  --color-success-text: #a0c8b2;
  --color-warning: #c6a477;
  --color-warning-subtle: #262626;
  --color-status-online: #8db9a3;
  --color-status-offline: #8a858e;
  --color-status-away: var(--accent-amber);
  --color-msg-sent-bg: #0095F6;
  --color-msg-sent-text: #000000;
  --color-msg-sent-border: transparent;
  --color-msg-sent-meta: rgba(0, 0, 0, 0.72);
  --color-msg-rcvd-bg: #121212;
  --color-msg-rcvd-text: #FFFFFF;
  --color-msg-rcvd-border: #363636;
  --color-msg-rcvd-meta: #A8A8A8;
  --color-modal-backdrop: var(--modal-backdrop);
  --shadow-overlay: var(--card-shadow);
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.42);
  --shadow-tooltip: 0 3px 10px rgba(0, 0, 0, 0.48);

  --ob-page: var(--bg-canvas);
  --ob-surface: var(--bg-card);
  --ob-surface-muted: var(--bg-secondary);
  --ob-surface-readonly: #1A1A1A;
  --ob-border: var(--border-medium);
  --ob-border-strong: var(--border-strong);
  --ob-text: var(--text-primary);
  --ob-text-secondary: var(--text-secondary);
  --ob-text-muted: var(--text-muted);
  --ob-accent: var(--accent-primary);
  --ob-accent-contrast: #000000;
  --ob-focus: var(--border-focus);
  --ob-error-bg: #262626;
  --ob-error-border: #363636;
  --ob-error-text: #e2b6bb;
  --ob-success: #a0c8b2;
  --ob-shadow: var(--card-shadow);
}


:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-primary) 72%, transparent);
  outline-offset: 2px;
}

::selection {
  background: var(--accent-primary-soft);
  color: var(--text-primary);
}