/*!
 * EduManage - variables.css
 * Design tokens. Change colors, radius, spacing and font here.
 */

/* ---------- Design tokens (edit these first) ---------- */

:root {
  --primary: #4f46e5;
  --primary-rgb: 79, 70, 229;
  --body-bg: #f6f7fb;
  --card-bg: #fff;
  --text-primary: #111827;
  --text-secondary: #667085;
  --border-color: #e6e8ef;
  --muted-bg: #f1f3f9;
  --sidebar-bg: #fff;
  --sidebar-text: #667085;
  --sidebar-border: #e6e8ef;
  --sidebar-active-bg: rgba(var(--primary-rgb), .1);
  --sidebar-active-text: var(--primary);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, .08);
  --font-family: 'Inter', system-ui, sans-serif;
  --font-scale: 1;
  --card-pad: 1.25rem;
  --row-pad: .8rem;
  --gap: 1.5rem;
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 72px;
  --header-h: 64px;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --info: #0891b2;
}

/* ---------- Theme customizer variants (sidebar style, radius, density, font size) ---------- */

html[data-sidebar=dark] {
  --sidebar-bg: #141a2b;
  --sidebar-text: #a5b0c6;
  --sidebar-border: #141a2b;
  --sidebar-active-bg: rgba(255, 255, 255, .1);
  --sidebar-active-text: #fff;
}

html[data-sidebar=primary] {
  --sidebar-bg: var(--primary);
  --sidebar-text: rgba(255, 255, 255, .78);
  --sidebar-border: var(--primary);
  --sidebar-active-bg: rgba(255, 255, 255, .18);
  --sidebar-active-text: #fff;
}

html[data-radius=sharp] {
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
}

html[data-radius=rounded] {
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
}

html[data-density=compact] {
  --card-pad: .85rem;
  --row-pad: .45rem;
  --gap: 1rem;
}

html[data-fontsize=small] {
  --font-scale: .9375;
}

html[data-fontsize=large] {
  --font-scale: 1.0625;
}