/* =========================================================
   00-THEME-TOKENS.CSS
   Single source of truth for the app design system.

   Theme architecture:
   1. Base theme inputs
   2. Derived app tokens
   3. Component/system tokens
   4. Legacy aliases
   5. Bootstrap bridge

   Settings can safely expose the base inputs first, then expand
   later into advanced controls without rewriting app CSS.
========================================================= */

/* =========================================================
   1. LIGHT THEME / DEFAULT THEME
   Preset name: Light Professional
========================================================= */
:root,
body.theme-light {
  /* Brand inputs */
  --theme-primary: #0d6efd;
  --theme-primary-rgb: 13, 110, 253;
  --theme-primary-hover: #0b5ed7;
  --theme-secondary: #6c757d;
  --theme-secondary-rgb: 108, 117, 125;
  --theme-accent: #3b82f6;
  --theme-accent-rgb: 59, 130, 246;

  /* Background inputs */
  --theme-page-bg: #eef2f7;
  --theme-page-gradient: linear-gradient(180deg, #f6f8fb 0%, #eef2f6 100%);
  --theme-sidebar-bg: #f3f5f9;
  --theme-navbar-bg: #ffffff;

  /* Surface inputs */
  --theme-surface: #ffffff;
  --theme-surface-muted: #f8fafc;
  --theme-surface-elevated: #ffffff;
  --theme-surface-hover: #f8fafc;

  /* Text inputs */
  --theme-text: #0f172a;
  --theme-text-muted: #64748b;
  --theme-text-inverse: #ffffff;
  --theme-placeholder: #94a3b8;

  /* Border inputs */
  --theme-border: #e2e8f0;
  --theme-border-strong: #cbd5e1;

  /* Form/table inputs */
  --theme-input-bg: #ffffff;
  --theme-input-text: var(--theme-text);
  --theme-table-bg: var(--theme-surface);
  --theme-table-header-bg: #f1f5f9;
  --theme-table-border: var(--theme-border);
  --theme-table-text: var(--theme-text);

  /* Semantic inputs */
  --theme-success: #10b981;
  --theme-warning: #f59e0b;
  --theme-danger: #ef4444;
  --theme-info: #3b82f6;

  /* Effects inputs */
  --theme-shadow-color: 0, 0, 0;
  --theme-shadow-strength-sm: 0.05;
  --theme-shadow-strength-md: 0.08;
  --theme-shadow-strength-lg: 0.12;
  --theme-shadow-strength-xl: 0.18;
  --theme-primary-shadow: rgba(var(--theme-primary-rgb), 0.18);
  --theme-glass-bg: rgba(30, 41, 59, 0.88);
  --theme-glass-border: rgba(255, 255, 255, 0.10);

  /* Scrollbar inputs */
  --theme-scrollbar-track: #e5e7eb;
  --theme-scrollbar-thumb: #cbd5e1;
  --theme-scrollbar-thumb-hover: #94a3b8;
}

/* =========================================================
   2. DARK THEME
   Preset name: Slate Blue / Midnight Dispatch
========================================================= */
body.theme-dark {
  /* Brand inputs */
  --theme-primary: #3b82f6;
  --theme-primary-rgb: 59, 130, 246;
  --theme-primary-hover: #60a5fa;
  --theme-secondary: #94a3b8;
  --theme-secondary-rgb: 148, 163, 184;
  --theme-accent: #60a5fa;
  --theme-accent-rgb: 96, 165, 250;

  /* Background inputs */
  --theme-page-bg: #0f172a;
  --theme-page-gradient: none;
  --theme-sidebar-bg: #111827;
  --theme-navbar-bg: #1e293b;

  /* Surface inputs */
  --theme-surface: #1e293b;
  --theme-surface-muted: #111827;
  --theme-surface-elevated: #334155;
  --theme-surface-hover: #334155;

  /* Text inputs */
  --theme-text: #f8fafc;
  --theme-text-muted: #94a3b8;
  --theme-text-inverse: #ffffff;
  --theme-placeholder: #7c8aa5;

  /* Border inputs */
  --theme-border: rgba(255, 255, 255, 0.08);
  --theme-border-strong: #475569;

  /* Form/table inputs */
  --theme-input-bg: #172033;
  --theme-input-text: var(--theme-text);
  --theme-table-bg: var(--theme-surface);
  --theme-table-header-bg: #243044;
  --theme-table-border: var(--theme-border);
  --theme-table-text: var(--theme-text);

  /* Semantic inputs */
  --theme-success: #10b981;
  --theme-warning: #fbbf24;
  --theme-danger: #f87171;
  --theme-info: #60a5fa;

  /* Effects inputs */
  --theme-shadow-color: 0, 0, 0;
  --theme-shadow-strength-sm: 0.18;
  --theme-shadow-strength-md: 0.22;
  --theme-shadow-strength-lg: 0.32;
  --theme-shadow-strength-xl: 0.42;
  --theme-primary-shadow: rgba(var(--theme-primary-rgb), 0.22);
  --theme-glass-bg: rgba(15, 23, 42, 0.88);
  --theme-glass-border: rgba(255, 255, 255, 0.08);

  /* Scrollbar inputs */
  --theme-scrollbar-track: #111827;
  --theme-scrollbar-thumb: #334155;
  --theme-scrollbar-thumb-hover: #475569;
}

/* =========================================================
   3. PRESET HOOKS
   Future Settings can apply one of these classes to body.
========================================================= */

/* =========================================================
   4. APP TOKEN DERIVATION
   All app CSS should use --app-* tokens, not --theme-* tokens.
========================================================= */
:root,
body {
  /* Brand */
  --app-primary: var(--theme-primary);
  --app-primary-rgb: var(--theme-primary-rgb);
  --app-primary-hover: var(--theme-primary-hover);
  --app-secondary: var(--theme-secondary);
  --app-secondary-rgb: var(--theme-secondary-rgb);
  --app-accent: var(--theme-accent);
  --app-accent-rgb: var(--theme-accent-rgb);

  /* Backgrounds */
  --app-page-bg: var(--theme-page-bg);
  --app-page-gradient: var(--theme-page-gradient);
  --app-sidebar-bg: var(--theme-sidebar-bg);
  --app-navbar-bg: var(--theme-navbar-bg);

  /* Surfaces */
  --app-surface: var(--theme-surface);
  --app-surface-muted: var(--theme-surface-muted);
  --app-surface-elevated: var(--theme-surface-elevated);
  --app-surface-hover: var(--theme-surface-hover);

  /* Text */
  --app-text: var(--theme-text);
  --app-text-muted: var(--theme-text-muted);
  --app-text-inverse: var(--theme-text-inverse);
  --app-placeholder: var(--theme-placeholder);

  /* Borders */
  --app-border: var(--theme-border);
  --app-border-strong: var(--theme-border-strong);

  /* Forms */
  --app-input-bg: var(--theme-input-bg);
  --app-input-text: var(--theme-input-text);

  /* Tables */
  --app-table-bg: var(--theme-table-bg);
  --app-table-header-bg: var(--theme-table-header-bg);
  --app-table-border: var(--theme-table-border);
  --app-table-text: var(--theme-table-text);

  /* Semantic */
  --app-success: var(--theme-success);
  --app-warning: var(--theme-warning);
  --app-danger: var(--theme-danger);
  --app-info: var(--theme-info);

  /* Scrollbars */
  --app-scrollbar-track: var(--theme-scrollbar-track);
  --app-scrollbar-thumb: var(--theme-scrollbar-thumb);
  --app-scrollbar-thumb-hover: var(--theme-scrollbar-thumb-hover);

  /* Effects */
  --shadow-sm: 0 1px 3px rgba(var(--theme-shadow-color), var(--theme-shadow-strength-sm));
  --shadow-md: 0 4px 10px rgba(var(--theme-shadow-color), var(--theme-shadow-strength-md));
  --shadow-lg: 0 8px 24px rgba(var(--theme-shadow-color), var(--theme-shadow-strength-lg));
  --shadow-xl: 0 12px 30px rgba(var(--theme-shadow-color), var(--theme-shadow-strength-xl));
  --shadow-primary: 0 8px 18px var(--theme-primary-shadow);
  --glass-bg: var(--theme-glass-bg);
  --glass-border: var(--theme-glass-border);
}

/* =========================================================
   5. DENSITY / RADIUS / MOTION TOKENS
========================================================= */
:root,
body {
  --app-radius-scale: 1;
  --radius-sm: calc(7px * var(--app-radius-scale));
  --radius-md: calc(8px * var(--app-radius-scale));
  --radius-lg: calc(10px * var(--app-radius-scale));
  --radius-xl: calc(12px * var(--app-radius-scale));
  --radius-pill: 999px;
  --radius-dock: calc(16px * var(--app-radius-scale));

  --app-density-scale: 1;
  --app-space-xs: calc(0.25rem * var(--app-density-scale));
  --app-space-sm: calc(0.5rem * var(--app-density-scale));
  --app-space-md: calc(0.75rem * var(--app-density-scale));
  --app-space-lg: calc(1rem * var(--app-density-scale));
  --app-space-xl: calc(1.25rem * var(--app-density-scale));
  --app-card-padding: var(--app-space-lg);
  --app-panel-gap: var(--app-space-md);
  --app-toolbar-gap: var(--app-space-sm);

  --app-header-height: 48px;
  --app-control-height: 36px;
  --app-compact-control-height: 28px;
  --app-sidebar-width: 280px;
  --app-sidebar-compact-width: 250px;

  --transition-fast: 120ms ease;
  --transition-normal: 150ms ease;
  --transition-slow: 250ms ease;
}

body.theme-density-compact {
  --app-density-scale: 0.82;
  --app-header-height: 42px;
  --app-control-height: 32px;
  --app-compact-control-height: 26px;
  --app-sidebar-width: 250px;
  --app-sidebar-compact-width: 230px;
}

body.theme-density-comfortable {
  --app-density-scale: 1.12;
  --app-header-height: 56px;
  --app-control-height: 40px;
  --app-compact-control-height: 32px;
}

body.theme-radius-square {
  --app-radius-scale: 0.45;
}

body.theme-radius-rounded {
  --app-radius-scale: 1;
}

body.theme-radius-soft {
  --app-radius-scale: 1.35;
}

/* =========================================================
   7. BOOTSTRAP TOKEN BRIDGE
========================================================= */
body {
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: var(--app-primary-rgb);
  --bs-body-bg: var(--app-page-bg);
  --bs-body-color: var(--app-text);
  --bs-border-color: var(--app-border);
  --bs-secondary-bg: var(--app-surface-muted);
  background-color: var(--app-page-bg);
  color: var(--app-text);
}