:root {
  /* Theme tokens driven by DB palette */
  --primary-color: var(--theme-primary, #334155);
  --primary-hover: color-mix(in srgb, var(--theme-primary, #334155) 82%, white);
  --secondary-color: var(--theme-secondary, #cbd5f5);
  --background-gradient: linear-gradient(135deg, var(--theme-primary, #334155) 0%, var(--theme-secondary, #cbd5f5) 100%);
  --text-color: var(--theme-neutral-800, #0f172a);
  --text-color-light: var(--theme-neutral-600, #334155);
  --muted-text: var(--theme-neutral-500, #475569);
  --label-color: var(--theme-neutral-600, #334155);
  --input-bg: var(--theme-neutral-50, #f8fafc);
  --input-border: var(--theme-neutral-200, #cbd5e1);
  --input-focus-border: var(--theme-primary, #334155);
  --input-focus-shadow: rgba(var(--theme-primary-rgb, 51, 65, 85), 0.12);
  --btn-bg: linear-gradient(135deg, var(--theme-primary, #334155) 0%, var(--theme-secondary, #cbd5f5) 100%);
  --btn-hover-shadow: rgba(var(--theme-primary-rgb, 51, 65, 85), 0.28);
  --error-color: var(--theme-danger, #ef4444);
  --error-bg: linear-gradient(135deg, rgba(var(--theme-warning-rgb, 245, 158, 11), 0.18) 0%, rgba(var(--theme-danger-rgb, 239, 68, 68), 0.16) 100%);
  --info-bg: linear-gradient(135deg, var(--theme-primary, #334155) 0%, var(--theme-secondary, #cbd5f5) 100%);
  --info-border: rgba(var(--theme-primary-rgb, 51, 65, 85), 0.22);
  --icon-color: var(--theme-primary, #334155);
  --float-shadow: 0 30px 80px rgba(var(--theme-neutral-900-rgb, 2, 6, 23), 0.25);
  --radial-bg1: radial-gradient(circle at 20% 30%, rgba(var(--theme-primary-rgb, 51, 65, 85), 0.14), transparent 25%);
  --radial-bg2: radial-gradient(circle at 80% 70%, rgba(var(--theme-secondary-rgb, 203, 213, 245), 0.18), transparent 20%);
  --border-radius-medium: 12px;

  /* System semantic colors */
  --success-color: var(--theme-success, #10b981);
  --success-hover: color-mix(in srgb, var(--theme-success, #10b981) 82%, black);
  --warning-color: var(--theme-warning, #f59e0b);
  --danger-color: var(--theme-danger, #ef4444);
  --danger-hover: color-mix(in srgb, var(--theme-danger, #ef4444) 82%, black);
  --info-color: var(--theme-info, var(--theme-primary, #334155));
  --info-hover: color-mix(in srgb, var(--theme-info, var(--theme-primary, #334155)) 82%, black);

  /* Action colors */
  --action-view: var(--theme-primary, #334155);
  --action-view-hover: color-mix(in srgb, var(--theme-primary, #334155) 82%, black);
  --action-edit: var(--theme-success, #10b981);
  --action-edit-hover: color-mix(in srgb, var(--theme-success, #10b981) 82%, black);
  --action-delete: var(--theme-danger, #ef4444);
  --action-delete-hover: color-mix(in srgb, var(--theme-danger, #ef4444) 82%, black);
  --action-schedule: var(--theme-success, #10b981);

  /* Neutrals */
  --white: var(--theme-surface-light, #ffffff);
  --gray-50: var(--theme-neutral-50, #f8fafc);
  --gray-100: var(--theme-neutral-100, #e2e8f0);
  --gray-200: var(--theme-neutral-200, #cbd5e1);
  --gray-300: var(--theme-neutral-300, #94a3b8);
  --gray-400: var(--theme-neutral-400, #64748b);
  --gray-500: var(--theme-neutral-500, #475569);
  --gray-600: var(--theme-neutral-600, #334155);
  --gray-700: var(--theme-neutral-700, #1e293b);
  --gray-800: var(--theme-neutral-800, #0f172a);
  --gray-900: var(--theme-neutral-900, #020617);

  /* Status colors */
  --status-success: var(--theme-success, #10b981);
  --status-warning: var(--theme-warning, #f59e0b);
  --status-error: var(--theme-danger, #ef4444);
  --status-info: var(--theme-info, var(--theme-primary, #334155));

  /* Calendar */
  --calendar-border: rgba(var(--theme-primary-rgb, 51, 65, 85), 0.20);
  --calendar-hover: rgba(var(--theme-primary-rgb, 51, 65, 85), 0.10);
  --calendar-selected: rgba(var(--theme-primary-rgb, 51, 65, 85), 0.22);

  /* Overlays & shadows */
  --overlay-bg: rgba(var(--theme-neutral-900-rgb, 2, 6, 23), 0.5);
  --shadow-sm: 0 1px 3px rgba(var(--theme-neutral-900-rgb, 2, 6, 23), 0.10);
  --shadow-md: 0 4px 12px rgba(var(--theme-neutral-900-rgb, 2, 6, 23), 0.10);
  --shadow-lg: 0 8px 24px rgba(var(--theme-neutral-900-rgb, 2, 6, 23), 0.15);
  --shadow-xl: 0 20px 60px rgba(var(--theme-neutral-900-rgb, 2, 6, 23), 0.30);

  /* Typography */
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

  /* Font sizes */
  --h1-size: 2.2rem;
  --h2-size: 1.5rem;
  --h3-size: 1.25rem;
  --subtitle-size: 0.95rem;
  --label-size: 0.9rem;
  --body-size: 1rem;
  --small-size: 0.875rem;
  --p-size: 1rem;
  --input-font-size: 16px;
  --btn-font-size: 16px;
  --error-font-size: 0.9rem;
  --info-font-size: 0.9rem;
  --forgot-font-size: 0.9rem;

  /* Radius */
  --border-radius: 12px;
  --border-radius-small: 8px;
  --border-radius-large: 20px;
  --border-radius-xl: 30px;

  /* Spacing */
  --padding-xs: 4px;
  --padding-small: 8px;
  --padding-medium: 15px;
  --padding-large: 20px;
  --padding-xl: 30px;
  --padding-xxl: 40px;
  --margin-small: 5px;
  --margin-medium: 10px;
  --margin-large: 20px;
  --margin-xl: 25px;
  --margin-xxl: 30px;
  --gap-medium: 40px;
  --gap-small: 20px;

  /* Shared shadows */
  --box-shadow: 0 30px 80px rgba(var(--theme-neutral-900-rgb, 2, 6, 23), 0.12);
  --box-shadow-light: 0 4px 20px rgba(var(--theme-neutral-900-rgb, 2, 6, 23), 0.10);
  --box-shadow-hover: 0 10px 25px rgba(var(--theme-primary-rgb, 51, 65, 85), 0.28);

  /* Motion */
  --transition: all 0.3s ease;
  --transition-fast: all 0.2s ease;

  /* Icons & animation */
  --icon-size: 18px;
  --float-animation: floatY 6s ease-in-out infinite;
}