/* ============================================
   iinix CRM — Design Tokens & Base Styles
   Editorial Utility Design System
   ============================================ */

/* --- Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Source+Serif+4:ital,wght@0,400;0,600;1,400&display=swap');

/* --- CSS Custom Properties --- */
:root {
  /* Typography */
  --font-ui: 'Sora', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-serif: 'Source Serif 4', serif;
  --font-family: var(--font-ui);

  /* Palette — warm Mediterranean */
  --color-bg: #FAF8F4;
  --color-bg-warm: #F3EFE8;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-sidebar: #0D0D12;
  --color-sidebar-hover: #1A1A24;
  --color-sidebar-active: #252533;
  --color-sidebar-text: #9898A6;
  --color-sidebar-text-active: #F0EDE8;

  --color-text: #2D3142;
  --color-text-secondary: #6B7084;
  --color-text-tertiary: #9CA0B0;
  --color-text-inverse: #FAF8F4;

  --color-accent: #E07A5F;
  --color-accent-hover: #D4684D;
  --color-accent-soft: rgba(224, 122, 95, 0.1);
  --color-accent-mid: rgba(224, 122, 95, 0.2);

  --color-success: #81B29A;
  --color-success-soft: rgba(129, 178, 154, 0.12);
  --color-warning: #F2CC8F;
  --color-warning-soft: rgba(242, 204, 143, 0.15);
  --color-danger: #E07A5F;
  --color-danger-soft: rgba(224, 122, 95, 0.1);
  --color-info: #7BA7C9;
  --color-info-soft: rgba(123, 167, 201, 0.12);
  --color-error: var(--color-danger);
  --color-border: rgba(13, 13, 18, 0.08);

  /* Status colors */
  --status-done: #81B29A;
  --status-done-bg: rgba(129, 178, 154, 0.12);
  --status-progress: #7BA7C9;
  --status-progress-bg: rgba(123, 167, 201, 0.12);
  --status-today: #E07A5F;
  --status-today-bg: rgba(224, 122, 95, 0.1);
  --status-todo: #9CA0B0;
  --status-todo-bg: rgba(156, 160, 176, 0.1);
  --status-backlog: #C4C7D4;
  --status-backlog-bg: rgba(196, 199, 212, 0.1);

  /* Priority colors */
  --priority-urgent: #D94F4F;
  --priority-urgent-bg: rgba(217, 79, 79, 0.1);
  --priority-high: #E07A5F;
  --priority-high-bg: rgba(224, 122, 95, 0.1);
  --priority-medium: #F2CC8F;
  --priority-medium-bg: rgba(242, 204, 143, 0.15);
  --priority-low: #81B29A;
  --priority-low-bg: rgba(129, 178, 154, 0.12);

  /* Legacy aliases for backward compatibility */
  --primary: var(--color-accent);
  --primary-hover: var(--color-accent-hover);
  --primary-light: var(--color-accent-soft);
  --color-primary-50: #FEF3F0;
  --color-primary-100: var(--color-accent-soft);
  --color-primary-500: var(--color-accent);
  --color-primary-600: var(--color-accent);
  --color-primary-700: var(--color-accent-hover);
  --gray-50: var(--color-bg);
  --gray-100: var(--color-bg-warm);
  --gray-200: rgba(13, 13, 18, 0.08);
  --gray-300: rgba(13, 13, 18, 0.12);
  --gray-400: var(--color-text-tertiary);
  --gray-500: var(--color-text-secondary);
  --gray-600: var(--color-text-secondary);
  --gray-700: var(--color-text);
  --gray-800: var(--color-text);
  --gray-900: var(--color-text);
  --color-gray-50: var(--color-bg);
  --color-gray-100: var(--color-bg-warm);
  --color-gray-200: rgba(13, 13, 18, 0.08);
  --color-gray-300: rgba(13, 13, 18, 0.12);
  --color-gray-400: var(--color-text-tertiary);
  --color-gray-500: var(--color-text-secondary);
  --color-gray-600: var(--color-text-secondary);
  --color-gray-700: var(--color-text);
  --color-gray-800: var(--color-text);
  --color-gray-900: var(--color-text);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);
  --info: var(--color-info);
  --bg-primary: var(--color-surface);
  --bg-secondary: var(--color-bg);
  --bg-sidebar: var(--color-sidebar);

  /* Font sizes */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.85rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;
  --spacing-8: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;
  --spacing-16: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --radius: var(--radius-md);
  --radius-2xl: 28px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(13, 13, 18, 0.04);
  --shadow-md: 0 2px 8px rgba(13, 13, 18, 0.06), 0 1px 2px rgba(13, 13, 18, 0.04);
  --shadow-lg: 0 8px 24px rgba(13, 13, 18, 0.08), 0 2px 8px rgba(13, 13, 18, 0.04);
  --shadow-xl: 0 16px 48px rgba(13, 13, 18, 0.12), 0 4px 12px rgba(13, 13, 18, 0.06);
  --shadow-card: 0 1px 3px rgba(13, 13, 18, 0.03), 0 0 0 1px rgba(13, 13, 18, 0.04);
  --shadow-card-hover: 0 4px 16px rgba(13, 13, 18, 0.08), 0 0 0 1px rgba(13, 13, 18, 0.06);
  --shadow: var(--shadow-md);

  /* Transitions */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 400ms ease;

  /* Layout */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --header-height: 72px;
  --max-width: 1200px;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

html, body { height: 100%; }

body {
  font-family: var(--font-ui);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  font-size: inherit;
  color: inherit;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

ul, ol { list-style: none; }
img { display: block; max-width: 100%; }

/* --- Utility --- */
.mono { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-4);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* --- Icon Styles --- */
.icon { width: 20px; height: 20px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }

/* --- Avatar Styles --- */
.avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-accent), #F2CC8F);
  color: white;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 32px; height: 32px; font-size: var(--font-size-xs); }
.avatar-lg { width: 48px; height: 48px; font-size: var(--font-size-base); }

/* --- Badge Styles --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
}
.badge-primary { background: var(--color-accent-soft); color: var(--color-accent); }
.badge-success { background: var(--color-success-soft); color: var(--color-success); }
.badge-warning { background: var(--color-warning-soft); color: #92400e; }
.badge-error { background: var(--color-danger-soft); color: var(--color-danger); }

/* --- App Layout --- */
.app-layout {
  display: flex;
  min-height: 100vh;
}

.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  transition: margin-left var(--transition-normal);
}

.main-content {
  flex: 1;
  padding: var(--space-xl);
  max-width: 1400px;
  width: 100%;
}

/* Auth Layout */
.auth-layout {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Page Header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-6);
  flex-wrap: wrap;
  gap: var(--spacing-4);
}
.page-header-back { width: 100%; }
.back-link { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.page-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.page-actions { display: flex; gap: var(--spacing-2); }

/* --- Animations --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn var(--transition-normal) ease-out; }
.animate-slide-up { animation: slideUp var(--transition-slow) ease-out; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(13, 13, 18, 0.12); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: rgba(13, 13, 18, 0.2); }

/* --- Responsive --- */
@media (max-width: 768px) {
  :root { --sidebar-width: 0px; }
  .main-container { margin-left: 0; }
  .main-content { padding: var(--space-md); }
}