/* ==========================================================================
   AIME CRM — Base Design System
   Tokens, Reset, Typography, Color Palette
   ========================================================================== */

/* --------------------------------------------------------------------------
   CUSTOM PROPERTIES / DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Brand Palette --- */
  --aime-teal:       #00d4b8;
  --aime-teal-dark:  #00a896;
  --aime-teal-light: #e6faf8;
  --aime-gold:       #f5a623;
  --aime-gold-dark:  #c8881a;
  --aime-gold-light: #fef8ee;

  /* --- Surface Colors (Warm Light Theme) --- */
  --surface-base:    #faf9f7;
  --surface-raised:  #ffffff;
  --surface-overlay: #f5f3ef;
  --surface-inset:   #ede9e3;
  --surface-border:  #e2ddd6;
  --surface-border-strong: #cdc7be;

  /* --- Text Hierarchy --- */
  --text-primary:    #1a1714;
  --text-secondary:  #4a453f;
  --text-tertiary:   #7a746d;
  --text-placeholder:#a09990;
  --text-inverse:    #ffffff;
  --text-teal:       #007a6e;
  --text-gold:       #a0620a;

  /* --- Semantic Colors --- */
  --color-success:   #1a7a5e;
  --color-success-bg:#e8f5f0;
  --color-success-border: #a8d5c4;
  --color-warning:   #a0620a;
  --color-warning-bg:#fef3e2;
  --color-warning-border: #f5d5a0;
  --color-danger:    #b83232;
  --color-danger-bg: #fceaea;
  --color-danger-border: #e8a8a8;
  --color-info:      #2660a4;
  --color-info-bg:   #e8f0fc;
  --color-info-border: #a8c0e8;
  --color-neutral:   #5a5550;
  --color-neutral-bg:#f0ede8;
  --color-neutral-border: #d5d0c8;

  /* --- Pipeline Stage Colors --- */
  --stage-prospecting:    #6b5b95;
  --stage-qualification:  #2660a4;
  --stage-needs:          #00889a;
  --stage-value:          #007a6e;
  --stage-proposal:       #a0620a;
  --stage-negotiation:    #b85c1a;
  --stage-won:            #1a7a5e;
  --stage-lost:           #8a3030;

  --stage-prospecting-bg:    #f3f0f8;
  --stage-qualification-bg:  #e8f0fc;
  --stage-needs-bg:          #e6f6f8;
  --stage-value-bg:          #e6f5f2;
  --stage-proposal-bg:       #fef3e2;
  --stage-negotiation-bg:    #fef0e8;
  --stage-won-bg:            #e8f5f0;
  --stage-lost-bg:           #fceaea;

  /* --- Spacing Scale (4px base) --- */
  --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;
  --space-16: 64px;
  --space-20: 80px;

  /* --- Border Radius --- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs:  0 1px 2px rgba(26, 23, 20, 0.05);
  --shadow-sm:  0 1px 3px rgba(26, 23, 20, 0.08), 0 1px 2px rgba(26, 23, 20, 0.04);
  --shadow-md:  0 4px 8px rgba(26, 23, 20, 0.08), 0 2px 4px rgba(26, 23, 20, 0.04);
  --shadow-lg:  0 8px 24px rgba(26, 23, 20, 0.10), 0 4px 8px rgba(26, 23, 20, 0.05);
  --shadow-xl:  0 16px 40px rgba(26, 23, 20, 0.12), 0 8px 16px rgba(26, 23, 20, 0.06);
  --shadow-teal: 0 4px 16px rgba(0, 168, 150, 0.20);
  --shadow-focus: 0 0 0 3px rgba(0, 212, 184, 0.25);

  /* --- Typography --- */
  --font-heading:  'Syne', sans-serif;
  --font-body:     'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:     'JetBrains Mono', 'Courier New', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  38px;

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* --- Transitions --- */
  --transition-fast:   100ms ease;
  --transition-base:   180ms ease;
  --transition-slow:   300ms ease;
  --transition-spring: 240ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- Sidebar --- */
  --sidebar-width: 240px;
  --sidebar-collapsed: 60px;
  --topbar-height: 56px;
}

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

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--surface-base);
}

img, svg, video {
  display: block;
  max-width: 100%;
}

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

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

ul, ol {
  list-style: none;
}

table {
  border-collapse: collapse;
}

/* --------------------------------------------------------------------------
   SCROLLBAR
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--surface-border-strong);
  border-radius: var(--radius-full);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-placeholder);
}

/* --------------------------------------------------------------------------
   TYPOGRAPHY
   -------------------------------------------------------------------------- */
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }
.font-mono    { font-family: var(--font-mono); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); letter-spacing: -0.015em; }
h3 { font-size: var(--text-xl);  letter-spacing: -0.01em; }
h4 { font-size: var(--text-lg);  letter-spacing: -0.005em; }
h5 { font-size: var(--text-md);  font-weight: 600; }
h6 { font-size: var(--text-base); font-weight: 600; }

p {
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

small {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   UTILITY CLASSES
   -------------------------------------------------------------------------- */

/* Display */
.d-none    { display: none !important; }
.d-flex    { display: flex; }
.d-grid    { display: grid; }
.d-block   { display: block; }
.d-inline  { display: inline; }
.d-inline-flex { display: inline-flex; }

/* Flex utilities */
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center{ align-items: center; }
.items-end   { align-items: flex-end; }
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.flex-1    { flex: 1; }
.flex-none { flex: none; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Text utilities */
.text-xs      { font-size: var(--text-xs); }
.text-sm      { font-size: var(--text-sm); }
.text-base    { font-size: var(--text-base); }
.text-lg      { font-size: var(--text-lg); }
.text-xl      { font-size: var(--text-xl); }
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-teal    { color: var(--text-teal); }
.text-gold    { color: var(--text-gold); }
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.uppercase   { text-transform: uppercase; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Spacing */
.p-0  { padding: 0; }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

/* Width / Height */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.min-w-0 { min-width: 0; }

/* Overflow */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

/* Border radius */
.rounded-sm { border-radius: var(--radius-sm); }
.rounded    { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

/* Focus styles */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Selection */
::selection {
  background: rgba(0, 212, 184, 0.15);
  color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   ANIMATIONS
   -------------------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.anim-fade-in    { animation: fadeIn 200ms ease forwards; }
.anim-fade-in-up { animation: fadeInUp 240ms ease forwards; }
.anim-scale-in   { animation: scaleIn 200ms ease forwards; }
.anim-slide-right{ animation: slideInRight 280ms ease forwards; }