:root {
  /* Default (no user override): follows system via the media query below. */
  color-scheme: light;
  --bg: #f7f8fc;
  --bg-rgb: 247, 248, 252;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-2: #f1f4fa;
  --surface-2-rgb: 241, 244, 250;
  --text: #0b1220;
  --text-rgb: 11, 18, 32;
  --text-strong: #0b1220;
  --muted: #526178;

  --border-alpha: 0.12;
  --border: rgba(var(--text-rgb), var(--border-alpha));
  --shadow: 0 18px 46px rgba(15, 23, 42, 0.1);

  --primary: #c8cad0;
  --primary-rgb: 200, 202, 208;
  --primary-contrast: #111216;
  --danger: #ef4444;
  --danger-rgb: 239, 68, 68;
  --warning: #d2d4da;
  --warning-rgb: 210, 212, 218;
  --success: #22c55e;
  --success-rgb: 34, 197, 94;

  --focus-ring-alpha: 0.28;
  --focus-ring: 0 0 0 3px rgba(var(--primary-rgb), var(--focus-ring-alpha));
  --accent-strong: #a6a9b2;

  --input-bg: rgba(var(--text-rgb), 0.03);
  --input-border: var(--border);
  --input-text: var(--text);
  --input-placeholder: var(--muted);

  --btn-bg: var(--surface);
  --btn-bg-hover: var(--surface-2);
  --btn-border: var(--border);
  --btn-text: var(--text);
  --btn-primary-bg: var(--primary);
  --btn-primary-text: var(--primary-contrast);
  --btn-danger-bg: var(--danger);
  --btn-danger-text: #ffffff;
  --radius: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
    "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-size-0: 12px;
  --font-size-1: 14px;
  --font-size-2: 16px;
  --font-size-3: 18px;
  --font-size-4: 20px;
  --font-size-5: 24px;
  --font-size-6: 30px;
  --font-line-tight: 1.25;
  --font-line-base: 1.5;
  --font-line-relaxed: 1.65;

  /* Aliases for the existing admin panel palette (`admin.css`) */
  --ui-bg: var(--bg);
  --ui-surface: var(--surface);
  --ui-surface-muted: var(--surface-2);
  --ui-text: var(--text);
  --ui-text-muted: var(--muted);
  --ui-text-strong: var(--text-strong);
  --ui-border: rgba(var(--text-rgb), 0.1);
  --ui-border-strong: rgba(var(--text-rgb), 0.18);
  --ui-primary: var(--primary);
  --ui-primary-dark: #a6a9b2;
  --ui-primary-rgb: var(--primary-rgb);
  --ui-accent: var(--primary);
  --ui-success: var(--success);
  --ui-warning: var(--warning);
  --ui-danger: var(--danger);
  --ui-danger-rgb: var(--danger-rgb);
  --ui-shadow-soft: var(--shadow);
  --ui-shadow-card: 0 12px 30px rgba(15, 23, 42, 0.12);
  --ui-radius-xl: 32px;
  --ui-radius-lg: 24px;
  --ui-radius-md: 18px;
  --ui-radius-pill: 999px;
  --ui-font-heading: var(--font-sans);
  --ui-font-body: var(--font-sans);
  --ui-font-arabic: var(--font-sans);

  /* Bootstrap 5.3 token bridge */
  --bs-body-bg: var(--bg);
  --bs-body-bg-rgb: var(--bg-rgb);
  --bs-body-color: var(--text);
  --bs-body-color-rgb: var(--text-rgb);
  --bs-body-font-family: var(--font-sans);
  --bs-border-color: var(--border);
  --bs-primary: var(--primary);
  --bs-primary-rgb: var(--primary-rgb);
  --bs-success: var(--success);
  --bs-success-rgb: var(--success-rgb);
  --bs-warning: var(--warning);
  --bs-warning-rgb: var(--warning-rgb);
  --bs-danger: var(--danger);
  --bs-danger-rgb: var(--danger-rgb);
  --bs-secondary-bg: var(--surface-2);
  --bs-tertiary-bg: var(--surface-2);
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--accent-strong);
  --bs-link-decoration: none;
  --bs-border-radius: 1rem;
  --bs-border-radius-sm: 0.75rem;
  --bs-border-radius-lg: 1.25rem;
  --bs-border-radius-xl: 1.5rem;
  --bs-border-radius-xxl: 2rem;
  --bs-focus-ring-color: rgba(var(--primary-rgb), var(--focus-ring-alpha));
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0f0f10;
    --bg-rgb: 15, 15, 16;
    --surface: #1c1c1d;
    --surface-rgb: 28, 28, 29;
    --surface-2: #0f0f10;
    --surface-2-rgb: 15, 15, 16;
    --text: #e8e8e8;
    --text-rgb: 232, 232, 232;
    --text-strong: #f5f5f5;
  --muted: #a6a6a6;
  --border-alpha: 0.18;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
  --focus-ring-alpha: 0.35;
  --accent-strong: #b7bac2;
  --ui-shadow-card: 0 12px 30px rgba(0, 0, 0, 0.55);
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f8fc;
  --bg-rgb: 247, 248, 252;
  --surface: #ffffff;
  --surface-rgb: 255, 255, 255;
  --surface-2: #f1f4fa;
  --surface-2-rgb: 241, 244, 250;
  --text: #0b1220;
  --text-rgb: 11, 18, 32;
  --text-strong: #0b1220;
  --muted: #526178;
  --border-alpha: 0.12;
  --shadow: 0 18px 46px rgba(15, 23, 42, 0.1);
  --focus-ring-alpha: 0.28;
  --accent-strong: #a6a9b2;
  --ui-shadow-card: 0 12px 30px rgba(15, 23, 42, 0.12);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0f10;
  --bg-rgb: 15, 15, 16;
  --surface: #1c1c1d;
  --surface-rgb: 28, 28, 29;
  --surface-2: #0f0f10;
  --surface-2-rgb: 15, 15, 16;
  --text: #e8e8e8;
  --text-rgb: 232, 232, 232;
  --text-strong: #f5f5f5;
  --muted: #a6a6a6;
  --border-alpha: 0.18;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.55);
  --focus-ring-alpha: 0.35;
  --accent-strong: #b7bac2;
  --ui-shadow-card: 0 12px 30px rgba(0, 0, 0, 0.55);
}