/* Design tokens: shared variables for consistent UI.
   Draft (2026-02-18). Prefer using variables over hardcoded hex in templates. */

:root {
  /* Typography */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* Type scale (rem) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  /* Line heights */
  --lh-tight: 1.15;
  --lh-snug: 1.25;
  --lh-normal: 1.5;

  /* CRM typography presets (visual baseline) */
  --crm-h1-size: var(--text-3xl);
  --crm-h1-line-height: var(--lh-tight);
  --crm-h1-weight: var(--fw-black);
  --crm-h1-tracking: -0.02em;

  --crm-subtitle-size: var(--text-sm);
  --crm-subtitle-line-height: var(--lh-normal);
  --crm-subtitle-weight: var(--fw-semibold);

  --crm-h2-size: var(--text-xl);
  --crm-h2-line-height: var(--lh-snug);
  --crm-h2-weight: var(--fw-black);

  --crm-h3-size: var(--text-lg);
  --crm-h3-line-height: var(--lh-snug);
  --crm-h3-weight: var(--fw-extrabold);

  /* Brand palette (legacy) */
  --brand-500: #667eea;
  --brand-700: #4f46e5;
  --brand-900: #2e1065;
  --brand-accent-500: #764ba2;

  /* CRM accent palette (new) */
  --accent-500: #7c3aed;
  --accent-400: #a855f7;

  /* Semantic colors */
  --success-500: #22c55e;
  --warning-500: #f59e0b;
  --danger-600: #dc2626;

  /* Radii (fallback to layout-standards.css if present) */
  --radius-sm: var(--radius-small, 0.5rem);
  --radius-md: var(--radius-medium, 0.75rem);
  --radius-lg: var(--radius-large, 1rem);

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.14);

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-accent-500) 100%);
  --gradient-accent: linear-gradient(135deg, var(--accent-500) 0%, var(--accent-400) 100%);
}

/* Theme: Dark (legacy app shell) */
[data-theme="dark"] {
  --color-bg: var(--bg-primary, #0f0f23);
  --color-bg-2: var(--bg-secondary, #1a1a2e);
  --color-surface: rgba(255, 255, 255, 0.06);
  --color-surface-2: rgba(255, 255, 255, 0.1);
  --color-border: rgba(255, 255, 255, 0.14);
  --color-text: var(--text-primary, #ffffff);
  --color-text-2: var(--text-secondary, rgba(255, 255, 255, 0.78));
  --color-muted: rgba(255, 255, 255, 0.6);
  --color-link: #93c5fd;

  /* Component defaults */
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
}

/* Theme: Light (school_admin / CRM) */
[data-theme="light"] {
  --color-bg: #f9fafb;
  --color-bg-2: #ffffff;
  --color-surface: #ffffff;
  --color-surface-2: #f3f4f6;
  --color-border: #e5e7eb;
  --color-text: #111827;
  --color-text-2: #374151;
  --color-muted: #6b7280;
  --color-link: #4f46e5;

  /* Component defaults */
  --card-bg: var(--color-surface);
  --card-border: var(--color-border);
}

/* Base theme application */
body[data-theme="light"] {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

body[data-theme="dark"] {
  background-color: var(--color-bg) !important;
  color: var(--color-text) !important;
}

[data-theme="light"] main {
  background-color: var(--color-bg) !important;
}

/* Legacy component alias (keep working during migration) */
[data-theme="light"] .glass-card {
  background: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  color: var(--color-text) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* New components (use these for new UI) */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.card--glass {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
}

[data-theme="light"] .card--glass {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.card--solid {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
}

/* CRM helpers (initial set) */
.crm-tab-active {
  background: var(--gradient-accent);
  color: #fff;
}

.crm-btn-primary {
  background: var(--gradient-accent);
  color: #fff;
}

.crm-btn-primary:hover {
  filter: saturate(1.05);
  box-shadow: var(--shadow-md);
}

.crm-icon-accent {
  color: var(--accent-500);
}

/* Layout / shell */
:root {
  --shell-sidebar-width: 17rem;
  --shell-sidebar-collapsed-width: 5.25rem;
  --container-shell: 104rem;
  --container-wide: 88rem;
  --container-narrow: 60rem;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
}