/* ============================================================
   CMC CRM — Design Tokens
   Linear/Notion-inspired, Light + Dark, rich motion
   ============================================================ */

:root {
  /* ---------- Surfaces (Light, default) ---------- */
  --bg:            #FAFAF9;     /* page */
  --bg-2:          #F4F4F2;     /* subtle panel */
  --surface:       #FFFFFF;     /* cards */
  --surface-2:     #FBFBFA;     /* nested cards */
  --surface-hover: #F4F4F2;
  --surface-active:#EDEDEA;

  /* ---------- Borders ---------- */
  --border:        rgba(15, 17, 19, 0.07);
  --border-strong: rgba(15, 17, 19, 0.12);
  --border-focus:  rgba(0, 178, 132, 0.45);

  /* ---------- Text ---------- */
  --text:          #15171A;
  --text-2:        #4A5058;
  --text-3:        #7B8088;
  --text-4:        #ABAFB5;
  --text-inverse:  #FAFAF9;

  /* ---------- Brand / accent ---------- */
  /* Primary: deep emerald, evolved from CMC green */
  --accent:        #00B281;
  --accent-2:      #00A074;
  --accent-soft:   rgba(0, 178, 129, 0.10);
  --accent-soft-2: rgba(0, 178, 129, 0.18);
  --accent-text:   #00855F;

  /* AI / "intelligence" — violet */
  --ai:            #6E5BFF;
  --ai-2:          #5A48E8;
  --ai-soft:       rgba(110, 91, 255, 0.10);
  --ai-soft-2:     rgba(110, 91, 255, 0.18);
  --ai-text:       #5340DD;

  /* Status */
  --warn:          #E8A400;
  --warn-soft:     rgba(232, 164, 0, 0.12);
  --danger:        #E5484D;
  --danger-soft:   rgba(229, 72, 77, 0.12);
  --info:          #2A7FFF;
  --info-soft:     rgba(42, 127, 255, 0.12);
  --success:       #00B281;
  --success-soft:  rgba(0, 178, 129, 0.12);

  /* ---------- Shadows ---------- */
  --shadow-xs: 0 1px 2px rgba(15,17,19,0.04);
  --shadow-sm: 0 1px 3px rgba(15,17,19,0.06), 0 1px 2px rgba(15,17,19,0.04);
  --shadow-md: 0 4px 12px rgba(15,17,19,0.06), 0 2px 4px rgba(15,17,19,0.04);
  --shadow-lg: 0 12px 32px rgba(15,17,19,0.10), 0 4px 8px rgba(15,17,19,0.04);
  --shadow-xl: 0 24px 64px rgba(15,17,19,0.14), 0 8px 16px rgba(15,17,19,0.06);
  --shadow-pop: 0 8px 24px rgba(15,17,19,0.10), 0 0 0 1px rgba(15,17,19,0.06);
  --shadow-focus: 0 0 0 3px rgba(0,178,129,0.18);

  /* ---------- Radii ---------- */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 10px;
  --r-5: 12px;
  --r-6: 16px;
  --r-7: 20px;
  --r-pill: 999px;

  /* ---------- Spacing ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;

  /* ---------- Type ---------- */
  --font-sans: "FiraGO", "Geist", "Noto Sans Georgian", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "FiraGO", "Geist", "Noto Sans Georgian", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-15: 15px;
  --t-16: 16px;
  --t-18: 18px;
  --t-20: 20px;
  --t-24: 24px;
  --t-28: 28px;
  --t-32: 32px;
  --t-40: 40px;
  --t-48: 48px;
  --t-64: 64px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 260ms;
  --dur-4: 400ms;
  --dur-5: 600ms;
  --dur-6: 900ms;

  /* ---------- Layout ---------- */
  --sidebar-w: 252px;
  --topbar-h: 56px;
  --maxw: 1440px;
}

/* ============================================================
   Dark mode
   ============================================================ */
:root[data-theme="dark"] {
  --bg:            #0B0B0C;
  --bg-2:          #0F1011;
  --surface:       #141416;
  --surface-2:     #18191B;
  --surface-hover: #1D1E20;
  --surface-active:#232427;

  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);
  --border-focus:  rgba(0, 200, 145, 0.45);

  --text:          #F5F5F4;
  --text-2:        #B6B7BA;
  --text-3:        #82858B;
  --text-4:        #55585D;
  --text-inverse:  #0B0B0C;

  --accent:        #00CC95;
  --accent-2:      #00B281;
  --accent-soft:   rgba(0, 204, 149, 0.12);
  --accent-soft-2: rgba(0, 204, 149, 0.22);
  --accent-text:   #2EE0AC;

  --ai:            #8B7BFF;
  --ai-2:          #6E5BFF;
  --ai-soft:       rgba(139, 123, 255, 0.14);
  --ai-soft-2:     rgba(139, 123, 255, 0.24);
  --ai-text:       #B0A5FF;

  --warn:          #F2B100;
  --warn-soft:     rgba(242, 177, 0, 0.16);
  --danger:        #FF6166;
  --danger-soft:   rgba(255, 97, 102, 0.16);
  --info:          #5BA0FF;
  --info-soft:     rgba(91, 160, 255, 0.16);
  --success:       #00CC95;
  --success-soft:  rgba(0, 204, 149, 0.14);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.3);
  --shadow-xl: 0 24px 64px rgba(0,0,0,0.55), 0 8px 16px rgba(0,0,0,0.35);
  --shadow-pop: 0 8px 24px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-focus: 0 0 0 3px rgba(0,204,149,0.22);
}

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body, #app { height: 100%; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--t-14);
  line-height: 1.5;
  letter-spacing: -0.005em;
  font-feature-settings: "ss01", "cv11";
  transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out);
}
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--accent-soft-2); color: var(--accent-text); }

/* Scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-4); background-clip: padding-box; }

/* Focus ring */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-3);
}

/* Selection of input */
input, textarea, select { caret-color: var(--accent); }