/* =========================================================
   LeadForge — Design Tokens
   ---------------------------------------------------------
   Single source of truth for color, type, spacing, radius...
   Components reference the ROLE tokens (--color-*, --text-*),
   NOT the raw scales. So theming later (e.g. dark mode, phase
   2) = remap a handful of role tokens, components untouched.
   Load order:  tokens.css  ->  base.css  ->  components.css
   ========================================================= */

:root {
  /* ---------- Brand (custom indigo — slightly richer than the default) ---------- */
  --brand-50:  #f1f1fe;
  --brand-100: #e4e4fd;
  --brand-200: #cccbfb;
  --brand-300: #aaa8f5;
  --brand-400: #8b86ef;
  --brand-500: #6f68e7;
  --brand-600: #5b51e0;   /* PRIMARY — buttons, active, links */
  --brand-700: #4a3fc9;
  --brand-800: #3d35a3;
  --brand-900: #332e82;

  /* ---------- Neutral (crisp slate) ---------- */
  --gray-50:  #f8f9fb;
  --gray-100: #f1f3f6;
  --gray-200: #e6e9ef;
  --gray-300: #d4d9e2;
  --gray-400: #aab2c0;
  --gray-500: #818b9c;
  --gray-600: #5d6675;
  --gray-700: #424b59;
  --gray-800: #2b333f;
  --gray-900: #181d26;

  /* ---------- Semantic scales ---------- */
  --green-50: #ecfdf3;  --green-100: #d1fadf;  --green-500: #12b76a;  --green-600: #039855;  --green-700: #027a48;
  --amber-50: #fffaeb;  --amber-100: #fef0c7;  --amber-500: #f79009;  --amber-600: #dc6803;  --amber-700: #b54708;
  --red-50:   #fef3f2;  --red-100:   #fee4e2;  --red-500:   #f04438;  --red-600:   #d92d20;  --red-700:   #b42318;
  --blue-50:  #eff8ff;  --blue-100:  #d1e9ff;  --blue-500:  #2e90fa;  --blue-600:  #1570ef;  --blue-700:  #175cd3;

  /* ---------- Role tokens (components use THESE) ---------- */
  --color-bg:             var(--gray-50);
  --color-surface:        #ffffff;
  --color-surface-2:      var(--gray-50);
  --color-border:         var(--gray-200);
  --color-border-strong:  var(--gray-300);

  --color-text:           var(--gray-900);
  --color-text-secondary: var(--gray-600);
  --color-text-tertiary:  var(--gray-500);
  --color-text-inverse:   #ffffff;

  --color-primary:        var(--brand-600);
  --color-primary-hover:  var(--brand-700);
  --color-primary-active: var(--brand-800);
  --color-primary-subtle: var(--brand-50);
  --color-on-subtle:      var(--brand-700);
  --color-primary-text:   #ffffff;

  --color-success:        var(--green-600);
  --color-warning:        var(--amber-600);
  --color-danger:         var(--red-600);
  --color-info:           var(--blue-600);

  --color-focus-ring:     rgba(91, 81, 224, 0.16);

  /* ---------- Typography ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.875rem;   /* 14px — dashboard body default */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */

  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.55;

  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  --tracking-tight:   -0.011em;
  --tracking-tighter: -0.02em;

  /* ---------- Spacing (4px base) ---------- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */

  /* ---------- Radius ---------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   10px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ---------- Shadows (subtle / flat) ---------- */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,0.08), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 4px 8px -2px rgba(16,24,40,0.08), 0 2px 4px -2px rgba(16,24,40,0.04);
  --shadow-lg: 0 12px 16px -4px rgba(16,24,40,0.08), 0 4px 6px -2px rgba(16,24,40,0.03);

  /* ---------- Motion ---------- */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 170ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Z-index ---------- */
  --z-sidebar:  50;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  900;
  --z-modal:    1000;
  --z-toast:    1100;

  /* ---------- Layout ---------- */
  --sidebar-w:   264px;
  --topbar-h:    64px;
  --content-max: 1200px;
}

/* ============================== LF redesign — dark mode (role-token + neutral-ramp remap) ============================== */
[data-theme="dark"] {
  --gray-50:  #14171d; --gray-100: #1b1f27; --gray-200: #262b35; --gray-300: #333a46;
  --gray-400: #8b93a1; --gray-500: #9aa2b1; --gray-600: #b3bac6; --gray-700: #c8cdd7;
  --gray-800: #dfe2e8; --gray-900: #f0f2f5;

  --color-bg:             #0f1115;
  --color-surface:        #171a21;
  --color-surface-2:      #1e222b;
  --color-border:         #2a2f3a;
  --color-border-strong:  #3a4150;
  --color-text:           #f0f2f5;
  --color-text-secondary: #b3bac6;
  --color-text-tertiary:  #8b93a1;
  --color-primary-subtle: #232135;
  --color-on-subtle:      #c7c2f5;

  /* accent tints used by lf-* chips, darkened so icons still pop */
  --amber-50: #2a2410; --red-50: #2a1717; --green-50: #10251a; --brand-50: #1c1b2e;

  color-scheme: dark;
}
[data-theme="dark"] .topbar { background: rgba(23,26,33,0.82); }
[data-theme="dark"] .lf-skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }