/* ==========================================================================
   TVET Management System - Design Tokens
   Tanzania / TVET palette: Blue, Green, Gold, Black
   ========================================================================== */

:root {
  /* Tanzania & TVET colors */
  --tz-blue: #1e88e5;
  --tz-blue-dark: #1565c0;
  --tz-green: #2e7d32;
  --tz-green-dark: #1b5e20;
  --tz-gold: #fbc02d;
  --tz-gold-dark: #f9a825;
  --tz-black: #1a1a1a;

  /* Semantic */
  --color-primary: var(--tz-green);
  --color-primary-hover: var(--tz-green-dark);
  --color-secondary: var(--tz-blue);
  --color-secondary-hover: var(--tz-blue-dark);
  --color-accent: var(--tz-gold);

  /* Surfaces - Light mode */
  --bg-body: #f0f4f8;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-sidebar: linear-gradient(180deg, #1b5e20 0%, #1565c0 100%);
  --bg-header: #ffffff;
  --text-primary: #1a1a1a;
  --text-secondary: #5f6368;
  --text-muted: #80868b;
  --text-inverse: #ffffff;
  --border-color: #e0e0e0;
  --border-light: #f1f3f4;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 2px 8px rgba(30, 136, 229, 0.08);

  /* Status */
  --color-success: #2e7d32;
  --color-warning: #f9a825;
  --color-danger: #d32f2f;
  --color-info: #1e88e5;

  /* Layout */
  --sidebar-width: 260px;
  --header-height: 64px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  /* Typography */
  --font-family: 'Inter', 'Poppins', 'Roboto', system-ui, sans-serif;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark mode */
[data-theme="dark"] {
  --bg-body: #121212;
  --bg-surface: #1e1e1e;
  --bg-surface-elevated: #2d2d2d;
  --bg-sidebar: linear-gradient(180deg, #0d3d0f 0%, #0d47a1 100%);
  --bg-header: #1e1e1e;
  --text-primary: #e8eaed;
  --text-secondary: #9aa0a6;
  --text-muted: #80868b;
  --border-color: #3c4043;
  --border-light: #2d2d2d;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.3);
}