/* ==========================================================================
   iSync Attendance System — Design System Variables & Tokens
   ========================================================================== */

:root {
  /* Brand Palettes */
  --brand-primary: hsl(209, 61%, 48%);         /* Elegant Cobalt / Brass */
  --brand-primary-dark: hsl(209, 67%, 37%);
  --brand-primary-light: hsl(209, 75%, 96%);
  --brand-primary-tint: hsl(209, 60%, 93%);
  --brand-glow: hsla(209, 61%, 48%, 0.25);

  /* Semantic Feedback */
  --success: hsl(164, 53%, 36%);
  --success-dark: hsl(164, 60%, 28%);
  --success-tint: hsl(164, 48%, 94%);
  --success-border: hsl(164, 45%, 80%);
  --success-glow: hsla(164, 53%, 36%, 0.25);

  --danger: hsl(6, 62%, 50%);
  --danger-tint: hsl(6, 65%, 95%);
  --danger-border: hsl(6, 50%, 84%);

  --warning: hsl(38, 92%, 50%);
  --warning-dark: hsl(38, 92%, 36%);
  --warning-tint: hsl(38, 90%, 96%);
  --warning-border: hsl(38, 75%, 82%);

  /* Neutrals — Light Mode (Default) */
  --bg-page: hsl(210, 40%, 97.5%);
  --bg-surface: hsl(0, 0%, 100%);
  --bg-surface-elevated: hsl(0, 0%, 100%);
  --bg-surface-glass: hsla(0, 0%, 100%, 0.85);
  --bg-subtle: hsl(210, 30%, 95%);

  --text-main: hsl(217, 33%, 15%);
  --text-soft: hsl(215, 21%, 30%);
  --text-muted: hsl(215, 14%, 49%);
  --text-faint: hsl(215, 12%, 70%);

  --border-light: hsl(214, 30%, 90%);
  --border-medium: hsl(214, 25%, 82%);
  --border-strong: hsl(214, 28%, 74%);

  /* Elevation & Shadows */
  --shadow-sm: 0 1px 2px hsla(217, 33%, 15%, 0.04);
  --shadow-md: 0 4px 16px -2px hsla(217, 33%, 15%, 0.08), 0 2px 4px -2px hsla(217, 33%, 15%, 0.04);
  --shadow-lg: 0 12px 32px -4px hsla(217, 33%, 15%, 0.12), 0 4px 8px -2px hsla(217, 33%, 15%, 0.04);
  --shadow-modal: 0 20px 48px -8px hsla(217, 33%, 15%, 0.28), 0 8px 16px -4px hsla(217, 33%, 15%, 0.12);

  /* Typography */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Radius & Borders */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* Motion & Easing */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
  --transition-fast: 150ms var(--ease-smooth);
  --transition-normal: 250ms var(--ease-smooth);
  --transition-spring: 300ms var(--ease-spring);
}

/* Dark Theme Overrides */
[data-theme="dark"] {
  --bg-page: hsl(222, 30%, 9%);
  --bg-surface: hsl(222, 24%, 13%);
  --bg-surface-elevated: hsl(222, 22%, 17%);
  --bg-surface-glass: hsla(222, 24%, 13%, 0.85);
  --bg-subtle: hsl(222, 20%, 18%);

  --text-main: hsl(210, 40%, 98%);
  --text-soft: hsl(215, 20%, 82%);
  --text-muted: hsl(215, 15%, 62%);
  --text-faint: hsl(215, 12%, 35%);

  --border-light: hsl(222, 18%, 20%);
  --border-medium: hsl(222, 18%, 26%);
  --border-strong: hsl(222, 18%, 34%);

  --brand-primary-light: hsl(209, 50%, 18%);
  --brand-primary-tint: hsl(209, 45%, 15%);
  --brand-glow: hsla(209, 80%, 55%, 0.35);

  --success-tint: hsl(164, 40%, 14%);
  --success-border: hsl(164, 40%, 25%);

  --danger-tint: hsl(6, 40%, 15%);
  --danger-border: hsl(6, 40%, 26%);

  --warning-tint: hsl(38, 45%, 14%);
  --warning-border: hsl(38, 45%, 26%);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 6px 20px -2px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 36px -4px rgba(0, 0, 0, 0.55);
  --shadow-modal: 0 24px 56px -8px rgba(0, 0, 0, 0.75);
}