/**
 * RocketCRM design tokens
 * Use these variables only. Do not invent one-off sizes/weights/colours in page CSS.
 * Docs: docs/design-system.md
 */

:root {
  /* ——— Font family ——— */
  --font-sans: "Inter", system-ui, sans-serif;

  /* ——— Type scale (px) ——— */
  --text-caption: 12px;
  --text-label: 12px;
  --text-body-sm: 13px;
  --text-body: 14px;
  --text-card-title: 14px;
  --text-section: 16px;
  --text-page-title: 22px;
  --text-display: 28px; /* rare — empty states / onboarding only */

  --lh-tight: 1.25;
  --lh-snug: 1.4;
  --lh-body: 1.5;

  --letter-label: 0.04em;
  --letter-normal: 0;

  /* Allowed weights only */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ——— Icon sizes ——— */
  --icon-xs: 14px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;

  /* ——— Colour — neutrals ——— */
  --color-bg: #f4f5f7;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-border: #e3e6ea;
  --color-border-strong: #cfd4dc;
  --color-text: #1a1d23;
  --color-text-secondary: #5c6470;
  --color-text-muted: #8b919c;
  --color-text-inverse: #ffffff;

  /* Sidebar / chrome */
  --color-nav-bg: #111318;
  --color-nav-text: #c8ccd4;
  --color-nav-text-active: #ffffff;
  --color-nav-hover: #1e222b;

  /* Overlay (nav drawer, modal scrim) */
  --color-overlay: rgba(17, 19, 24, 0.4);

  /* Accent (staff UI) */
  --color-accent: #00858A;
  --color-accent-hover: #0A5D60;
  --color-accent-hover-text: #ffffff;
  --color-accent-soft: #e6f5f6;
  --color-accent-text: #00666a;

  /* Semantic — teal accent + coral success; warning is clean amber (not muddy brown) */
  --color-success: #EF5B28;
  --color-success-soft: #fde8e0;
  --color-warning: #B45309;
  --color-warning-soft: #fff6e5;
  --color-danger: #c62828;
  --color-danger-hover: #a31f1f;
  --color-danger-soft: #fdecea;
  --color-info: #00858A;
  --color-info-soft: #e6f5f6;

  /* Pipeline / stage chips */
  --color-stage-bg: #eef2ff;
  --color-stage-text: #3730a3;

  /* Deal outcomes — Pipedrive Won (green) / Lost (danger) / chevron track */
  --color-won: #047857;
  --color-won-hover: #065f46;
  --color-won-soft: #e7f3ee;
  --color-pipeline-done: #047857;
  --color-pipeline-current: #059669;
  --color-pipeline-todo: #eef0f2;

  /* ——— Spacing (4px base) ——— */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ——— Radius ——— */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* ——— Buttons (Pipedrive-compact; default for all .btn) ——— */
  --btn-height: 32px;
  --btn-pad-x: var(--space-3);
  --btn-gap: var(--space-1);
  --btn-font-size: var(--text-body-sm);
  --btn-radius: var(--radius-md);

  /* ——— Shadow ——— */
  --shadow-sm: 0 1px 2px rgba(17, 19, 24, 0.06);
  --shadow-md: 0 4px 12px rgba(17, 19, 24, 0.08);
  --shadow-lg: 0 20px 60px rgba(17, 19, 24, 0.18);
  --shadow-focus: 0 0 0 3px rgba(0, 133, 138, 0.25);

  /* ——— Layout ——— */
  --nav-width: 240px;
  --nav-width-collapsed: 64px;
  --topbar-height: 56px;
  --page-side-width: 220px; /* secondary side nav (Settings, Contacts sub-nav, etc.) */
  --page-side-width-collapsed: 56px;
  /*
   * Staff chrome (Pipedrive-style) — locked:
   * - Main pane = flush white (--color-surface) under the top bar
   * - No grey gutter / page-level boxed cards; padding lives inside the white pane
   * - Secondary side nav = grey (--color-bg), flush to the primary icon sidebar
   * - Never constrain the staff main pane with a content max-width
   */

  /* ——— Motion ——— */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration: 180ms;
}

/* Semantic type utilities — prefer these over raw font-size */
.text-page-title {
  font-family: var(--font-sans);
  font-size: var(--text-page-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--letter-normal);
  color: var(--color-text);
}

.text-section {
  font-family: var(--font-sans);
  font-size: var(--text-section);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}

.text-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-card-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.text-body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.text-body-sm {
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--color-text-secondary);
}

.text-label {
  font-family: var(--font-sans);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--letter-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.text-caption {
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.text-display {
  font-family: var(--font-sans);
  font-size: var(--text-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--color-text);
}