/* ===========================
   DESIGN TOKENS — FEI SaaS
   =========================== */
@import url('https://fonts.googleapis.com/css2?family=Hahmlet:wght@100..900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Brand Colors — Jira Enterprise inspired */
  --brand-primary: #0052cc;   /* Atlassian Blue */
  --brand-secondary: #0747a6; /* Darker Blue */
  --brand-accent: #00b8d9;    /* Cyan */
  --brand-success: #36b37e;   /* Green */
  --brand-warning: #ffab00;   /* Orange/Gold */
  --brand-danger: #ff5630;    /* Red/Coral */
  --brand-info: #0065ff;      /* Sky Blue */

  /* Default Light Mode Backgrounds — Jira Crisp */
  --bg-base: #f4f5f7;         /* Light Blue-Gray */
  --bg-surface: #ffffff;     /* Pure White */
  --bg-elevated: #ebecf0;    /* Secondary Background */
  --bg-card: #ffffff;
  --bg-hover: #f1f2f4;
  --bg-border: #dfe1e6;

  /* Glass / Depth */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(9, 30, 66, 0.08);
  --glass-blur: blur(8px);

  /* Text — Atlassian Neutrals */
  --text-primary: #172b4d;    /* Deep Navy */
  --text-secondary: #42526e;  /* Slate */
  --text-muted: #6b778c;     /* Gray */
  --text-inverse: #ffffff;

  /* Gradients — Minimal & Professional */
  --gradient-brand: linear-gradient(180deg, #0065ff 0%, #0052cc 100%);
  --gradient-cyan: linear-gradient(135deg, #00b8d9, #0065ff);
  --gradient-success: linear-gradient(135deg, #36b37e, #00b8d9);
  --gradient-card: linear-gradient(180deg, #ffffff 0%, #f4f5f7 100%);
  /* Sidebar: deep forest → emerald → jade (dark theme) */
  --gradient-sidebar: linear-gradient(
    165deg,
    #071912 0%,
    #0a2318 20%,
    #0e2e20 42%,
    #123a28 68%,
    #164832 88%,
    #185538 100%
  );
  --sidebar-accent: #2a9d6a;
  --sidebar-paper-sheen: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.02) 18%,
    transparent 42%
  );
  --sidebar-paper-depth: inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset -1px 0 0 rgba(0, 0, 0, 0.12);

  /* Shadows — Subtle & Tight */
  --shadow-sm: 0 1px 1px rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31);
  --shadow-md: 0 4px 8px -2px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);
  --shadow-lg: 0 12px 24px -6px rgba(9, 30, 66, 0.25), 0 0 1px rgba(9, 30, 66, 0.31);
  --shadow-glow: 0 0 10px rgba(0, 82, 204, 0.15);
  --shadow-card: 0 1px 1px rgba(9, 30, 66, 0.13);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Typography — Hahmlet + fallback stack */
  --font-sans: 'Hahmlet', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --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;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Layout */
  --sidebar-width: 240px;
  --header-height: 64px;
  --content-max: 1280px;
}

/* ===========================
   LIGHT MODE OVERRIDES
   =========================== */
html[data-theme="light"] {
  --bg-base: #f0f2f8;
  --bg-surface: #ffffff;
  --bg-elevated: #f4f6fb;
  --bg-card: #ffffff;
  --bg-hover: #eef0f8;
  --bg-border: #e2e6f0;

  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.07);

  --text-primary: #0f1117;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --text-inverse: #ffffff;

  --gradient-sidebar: linear-gradient(180deg, #ffffff 0%, #f0f8f4 100%);
  --sidebar-accent: #248f5c;

  --sidebar-paper-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, transparent 40%);
  --sidebar-paper-depth: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset -1px 0 0 rgba(15, 17, 23, 0.06);

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.14);
  --shadow-glow: 0 0 10px rgba(0, 82, 204, 0.15);
  --shadow-card: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* Light mode specific tweaks */
html[data-theme="light"] .card {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

html[data-theme="light"] .sidebar {
  border-right-color: #e2e6f0;
}

html[data-theme="light"] .header {
  background: rgba(255, 255, 255, 0.85);
  border-bottom-color: #e2e6f0;
}

html[data-theme="light"] .form-input,
html[data-theme="light"] .form-select,
html[data-theme="light"] .form-textarea {
  background: #f9fafc;
  border-color: #d1d5e0;
  color: #0f1117;
}

html[data-theme="light"] .table th {
  background: #f4f6fb;
}

html[data-theme="light"] .stat-card::before {
  opacity: 0.85;
}

html[data-theme="light"] .month-bar {
  opacity: 0.85;
}

html[data-theme="light"] .icon-btn {
  background: #f4f6fb;
  border-color: #d1d5e0;
  color: #6b7280;
}

html[data-theme="light"] .icon-btn:hover {
  background: #e8eaf5;
  color: #0f1117;
}

html[data-theme="light"] .sidebar-identity .sidebar-logo-text {
  color: #0f1117;
}

html[data-theme="light"] .sidebar-identity .sidebar-logo-sub {
  color: #6b7280;
}

html[data-theme="light"] .filter-tabs {
  background: #e8eaf5;
}

html[data-theme="light"] .filter-tab.active {
  background: #ffffff;
  color: #0f1117;
}

/* Theme transition — smooth on toggle */
*,
*::before,
*::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}

/* But don't slow down animations that should be fast */
.btn,
.nav-item,
.badge,
.card:hover {
  transition-duration: 0.15s;
}