/* =========================================================================
   Monolit CRM — Foundations
   Source: alexzhovnir/monolit-cms · docs/design-system.md + tokens/*.tokens.json
   Stack: React + shadcn/ui + Tailwind CSS · Inter Variable + Lucide icons
   Theme: Light-first with Dark support (Supabase-inspired)
   ========================================================================= */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable.woff2") format("woff2-variations"),
       url("fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/InterVariable-Italic.woff2") format("woff2-variations"),
       url("fonts/InterVariable-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("fonts/JetBrainsMono-VariableFont_wght.woff2") format("woff2");
}

/* =========================================================================
   PRIMITIVES — raw palettes (Tailwind slate/teal/blue/green/orange/red)
   ========================================================================= */
:root {
  /* Slate (neutral) */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;
  --slate-950: #020617;

  /* Teal (primary) */
  --teal-50:  #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e59;
  --teal-900: #134e4a;
  --teal-950: #042f2e;

  /* Blue (secondary) */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;
  --blue-950: #172554;

  /* Green (success) */
  --green-100: #dcfce7;
  --green-200: #bbf7d0;
  --green-300: #86efac;
  --green-400: #4ade80;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --green-700: #15803d;
  --green-800: #166534;
  --green-900: #14532d;
  --green-950: #052e16;

  /* Orange (warning) */
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;
  --orange-950: #431407;

  /* Red (error) */
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;
  --red-950: #450a0a;
}

/* =========================================================================
   SEMANTIC TOKENS — Light (default) — "Token 3" naming
   ========================================================================= */
:root, [data-theme="light"] {
  /* Backgrounds */
  --bg-app:   var(--slate-50);
  --bg-modal: rgba(0, 0, 0, 0.70);
  --bg-1:     #ffffff;
  --bg-2:     var(--slate-100);
  --bg-3:     var(--slate-200);
  --bg-4:     var(--slate-300);
  --bg-5:     var(--slate-400);

  /* Text */
  --text-1: var(--slate-800);
  --text-2: var(--slate-700);
  --text-3: var(--slate-500);

  /* Borders / dividers (derived from bg-3) */
  --border-1: var(--slate-200);
  --border-2: var(--slate-300);

  /* Primary — Teal */
  --primary-main:     var(--teal-400);
  --primary-up:       var(--teal-300);
  --primary-down:     var(--teal-500);
  --primary-on:       var(--teal-950);
  --primary-low:      var(--teal-200);
  --primary-low-up:   var(--teal-100);
  --primary-low-down: var(--teal-400);
  --primary-low-on:   var(--teal-700);

  /* Secondary — Blue */
  --secondary-main:     var(--blue-500);
  --secondary-up:       var(--blue-400);
  --secondary-down:     var(--blue-600);
  --secondary-on:       var(--blue-950);
  --secondary-low:      var(--blue-100);
  --secondary-low-up:   var(--blue-200);
  --secondary-low-down: var(--blue-300);
  --secondary-low-on:   var(--blue-700);

  /* Success — Green (dark green to avoid clashing w/ primary teal) */
  --success-main:     var(--green-700);
  --success-up:       var(--green-600);
  --success-down:     var(--green-800);
  --success-on:       var(--green-950);
  --success-low:      var(--green-100);
  --success-low-up:   var(--green-300);
  --success-low-down: var(--green-400);
  --success-low-on:   var(--green-800);

  /* Warning — Orange */
  --warning-main:     var(--orange-600);
  --warning-up:       var(--orange-500);
  --warning-down:     var(--orange-700);
  --warning-on:       var(--orange-950);
  --warning-low:      var(--orange-100);
  --warning-low-up:   var(--orange-200);
  --warning-low-down: var(--orange-300);
  --warning-low-on:   var(--orange-800);

  /* Error — Red */
  --error-main:     var(--red-600);
  --error-up:       var(--red-500);
  --error-down:     var(--red-900);
  --error-on:       var(--red-200);
  --error-low:      var(--red-100);
  --error-low-up:   var(--red-200);
  --error-low-down: var(--red-500);
  --error-low-on:   var(--red-600);

  /* Shadow tints — based on slate alpha */
  --shadow-sm-tint:    rgba(15, 23, 42, 0.05);
  --shadow-base-tint:  rgba(15, 23, 42, 0.08);
  --shadow-md-tint:    rgba(15, 23, 42, 0.10);
  --shadow-lg-tint:    rgba(15, 23, 42, 0.14);
  --shadow-xl-tint:    rgba(15, 23, 42, 0.18);
  --shadow-inner-sm-tint: rgba(15, 23, 42, 0.04);
  --shadow-inner-md-tint: rgba(15, 23, 42, 0.06);

  color-scheme: light;
}

/* =========================================================================
   SEMANTIC TOKENS — Dark
   ========================================================================= */
[data-theme="dark"] {
  --bg-app:   var(--slate-950);
  --bg-modal: rgba(0, 0, 0, 0.75);
  --bg-1:     var(--slate-900);
  --bg-2:     var(--slate-800);
  --bg-3:     var(--slate-700);
  --bg-4:     var(--slate-600);
  --bg-5:     var(--slate-500);

  --text-1: var(--slate-100);
  --text-2: var(--slate-300);
  --text-3: var(--slate-400);

  --border-1: var(--slate-700);
  --border-2: var(--slate-600);

  /* Primary teal — slightly stronger on dark */
  --primary-main:     var(--teal-500);
  --primary-up:       var(--teal-400);
  --primary-down:     var(--teal-600);
  --primary-on:       var(--teal-950);
  --primary-low:      var(--teal-900);
  --primary-low-up:   var(--teal-800);
  --primary-low-down: var(--teal-950);
  --primary-low-on:   var(--teal-200);

  --secondary-main:   var(--blue-400);
  --secondary-up:     var(--blue-300);
  --secondary-down:   var(--blue-500);
  --secondary-on:     var(--blue-950);
  --secondary-low:    var(--blue-900);
  --secondary-low-on: var(--blue-200);

  --success-main:   var(--green-500);
  --success-low:    var(--green-900);
  --success-low-on: var(--green-200);

  --warning-main:   var(--orange-500);
  --warning-low:    var(--orange-900);
  --warning-low-on: var(--orange-200);

  --error-main:   var(--red-500);
  --error-low:    var(--red-900);
  --error-low-on: var(--red-200);

  --shadow-sm-tint:    rgba(0, 0, 0, 0.40);
  --shadow-base-tint:  rgba(0, 0, 0, 0.50);
  --shadow-md-tint:    rgba(0, 0, 0, 0.55);
  --shadow-lg-tint:    rgba(0, 0, 0, 0.65);
  --shadow-xl-tint:    rgba(0, 0, 0, 0.75);

  color-scheme: dark;
}

/* =========================================================================
   TYPOGRAPHY — primitive scale (from tokens)
   ========================================================================= */
:root {
  --font-sans: "Inter", "Inter Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Font size */
  --font-size-xs:  10px;
  --font-size-sm:  12px;
  --font-size-base:14px;
  --font-size-lg:  16px;
  --font-size-xl:  18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-size-5xl: 36px;
  --font-size-6xl: 48px;
  --font-size-7xl: 60px;
  --font-size-8xl: 72px;
  --font-size-9xl: 96px;

  /* Line height */
  --line-height-xs:  12px;
  --line-height-sm:  16px;
  --line-height-base:20px;
  --line-height-lg:  24px;
  --line-height-xl:  28px;
  --line-height-2xl: 32px;
  --line-height-3xl: 36px;
  --line-height-4xl: 40px;
  --line-height-5xl: 44px;
  --line-height-6xl: 48px;

  /* Font weights — Inter variable axis */
  --font-weight-default: 450; /* body */
  --font-weight-medium:  550; /* labels, secondary headings */
  --font-weight-strong:  650; /* headings, buttons */
  --font-weight-heavy:   700; /* big accents */
}

/* =========================================================================
   TYPOGRAPHY — semantic tokens (Tailwind/shadcn pattern)
   Title-N · Buttons-N · Labels-N · Body-N
   ========================================================================= */

/* Headings (title-*) — heavy weight, tight tracking */
.title-1 { font: var(--font-weight-heavy) var(--font-size-3xl)/var(--line-height-2xl) var(--font-sans); letter-spacing: -0.25px; }
.title-2 { font: var(--font-weight-heavy) var(--font-size-2xl)/var(--line-height-xl)  var(--font-sans); letter-spacing: -0.25px; }
.title-3 { font: var(--font-weight-heavy) var(--font-size-xl) /var(--line-height-lg)  var(--font-sans); letter-spacing: -0.25px; }
.title-4 { font: var(--font-weight-heavy) var(--font-size-lg) /var(--line-height-base)var(--font-sans); letter-spacing: -0.25px; }
.title-5 { font: var(--font-weight-heavy) var(--font-size-base)/var(--line-height-sm) var(--font-sans); letter-spacing: -0.25px; }
.title-6 { font: var(--font-weight-strong) var(--font-size-sm)/var(--line-height-xs)  var(--font-sans); letter-spacing: -0.25px; text-transform: uppercase; }

/* Buttons */
.buttons-lg { font: var(--font-weight-medium) var(--font-size-lg) /var(--line-height-lg)  var(--font-sans); letter-spacing: -0.25px; }
.buttons-md { font: var(--font-weight-strong) var(--font-size-base)/var(--line-height-base)var(--font-sans); letter-spacing: -0.25px; }
.buttons-sm { font: var(--font-weight-medium) var(--font-size-sm) /var(--line-height-sm)  var(--font-sans); letter-spacing: -0.10px; }
.buttons-xs { font: var(--font-weight-strong) var(--font-size-xs) /var(--line-height-xs)  var(--font-sans); letter-spacing:  0.25px; text-transform: uppercase; }

/* Labels (form labels, table headers, small caps) */
.labels-lg { font: var(--font-weight-medium) var(--font-size-lg) /var(--line-height-lg)  var(--font-sans); letter-spacing: -0.25px; }
.labels-md { font: var(--font-weight-medium) var(--font-size-base)/var(--line-height-base)var(--font-sans); letter-spacing: -0.25px; }
.labels-sm { font: var(--font-weight-medium) var(--font-size-sm) /var(--line-height-sm)  var(--font-sans); letter-spacing: -0.25px; }
.labels-xs { font: var(--font-weight-heavy)  var(--font-size-xs) /var(--line-height-xs)  var(--font-sans); letter-spacing:  0.20px; text-transform: uppercase; }

/* Body */
.body-lg { font: var(--font-weight-default) var(--font-size-lg) /var(--line-height-lg)  var(--font-sans); letter-spacing: -0.10px; }
.body-md { font: var(--font-weight-default) var(--font-size-base)/var(--line-height-base)var(--font-sans); letter-spacing: -0.10px; }
.body-sm { font: var(--font-weight-medium)  var(--font-size-sm) /var(--line-height-sm)  var(--font-sans); letter-spacing: -0.10px; }
.body-xs { font: var(--font-weight-medium)  var(--font-size-xs) /var(--line-height-xs)  var(--font-sans); letter-spacing: -0.10px; }

/* Mono — derived from body, JetBrains Mono */
.mono-md { font: var(--font-weight-default) var(--font-size-base)/var(--line-height-base) var(--font-mono); }
.mono-sm { font: var(--font-weight-default) var(--font-size-sm)/var(--line-height-sm)     var(--font-mono); }

/* =========================================================================
   SPACING — base 4px
   ========================================================================= */
:root {
  --spacing-px:  1px;
  --spacing-0-5: 2px;
  --spacing-1:   4px;
  --spacing-1-5: 6px;
  --spacing-2:   8px;
  --spacing-2-5: 10px;
  --spacing-3:   12px;
  --spacing-3-5: 14px;
  --spacing-4:   16px;
  --spacing-5:   20px;
  --spacing-6:   24px;
  --spacing-7:   28px;
  --spacing-8:   32px;
  --spacing-9:   36px;
  --spacing-10:  40px;
  --spacing-11:  44px;
  --spacing-12:  48px;
  --spacing-14:  56px;
  --spacing-16:  64px;
  --spacing-20:  80px;
  --spacing-24:  96px;
  --spacing-28:  112px;
  --spacing-32:  128px;
  --spacing-96:  384px;
}

/* =========================================================================
   RADII — semantic + primitive
   ========================================================================= */
:root {
  --radius-none:    0;
  --radius-xs:      2px;
  --radius-sm:      4px;   /* DEFAULT */
  --radius-md:      6px;
  --radius-lg:      8px;
  --radius-full:    9999px;

  /* Semantic */
  --radi-none: var(--radius-none);
  --radi-xs:   var(--radius-xs);
  --radi-sm:   var(--radius-sm);
  --radi-md:   var(--radius-md);
  --radi-lg:   var(--radius-lg);
  --radi-full: var(--radius-full);
}

/* =========================================================================
   STROKE & BORDERS
   ========================================================================= */
:root {
  --border-width-0: 0; /* @kind spacing */
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;

  --stroke-md:     var(--border-width-0);
  --stroke-lg:     var(--border-width-2);
  --stroke-button: var(--border-width-1);
  --stroke-widget: var(--border-width-0);
}

/* =========================================================================
   COMPONENT SIZES (heights for buttons / inputs / selects)
   ========================================================================= */
:root {
  --size-xs: 24px;
  --size-sm: 28px;
  --size-md: 32px;
  --size-lg: 40px;
}

/* =========================================================================
   SHADOWS
   ========================================================================= */
:root {
  --shadow-sm:    0 1px 2px 0 var(--shadow-sm-tint);
  --shadow-base:  0 1px 3px 0 var(--shadow-base-tint), 0 1px 2px -1px var(--shadow-sm-tint);
  --shadow-md:    0 4px 6px -1px var(--shadow-md-tint), 0 2px 4px -2px var(--shadow-sm-tint);
  --shadow-lg:    0 10px 15px -3px var(--shadow-lg-tint), 0 4px 6px -4px var(--shadow-md-tint);
  --shadow-xl:    0 20px 25px -5px var(--shadow-xl-tint), 0 8px 10px -6px var(--shadow-md-tint);
  --shadow-inner-sm: inset 0 1px 2px 0 var(--shadow-inner-sm-tint);
  --shadow-inner-md: inset 0 2px 4px 0 var(--shadow-inner-md-tint);
}

/* =========================================================================
   ICONS
   ========================================================================= */
:root {
  --icons-xs: 12px;
  --icons-sm: 16px;
  --icons-md: 20px;
  --icons-lg: 24px;
  --icons-line-sm: 1; /* @kind other */
  --icons-line-md: 1.5; /* @kind other */
  --icons-line-lg: 2; /* @kind other */
}

/* =========================================================================
   BREAKPOINTS (reference)
   --screen-sm: 640px
   --screen-md: 768px
   --screen-lg: 1024px
   --screen-xl: 1280px
   ========================================================================= */

/* =========================================================================
   BASELINE
   ========================================================================= */
html, body {
  font-family: var(--font-sans);
  color: var(--text-1);
  background: var(--bg-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01", "ss03";
}
* { box-sizing: border-box; }

/* Semantic element defaults */
h1 { font: var(--font-weight-heavy) var(--font-size-3xl)/var(--line-height-2xl) var(--font-sans); letter-spacing: -0.25px; margin: 0; color: var(--text-1); }
h2 { font: var(--font-weight-heavy) var(--font-size-2xl)/var(--line-height-xl)  var(--font-sans); letter-spacing: -0.25px; margin: 0; color: var(--text-1); }
h3 { font: var(--font-weight-heavy) var(--font-size-xl) /var(--line-height-lg)  var(--font-sans); letter-spacing: -0.25px; margin: 0; color: var(--text-1); }
h4 { font: var(--font-weight-heavy) var(--font-size-lg) /var(--line-height-base)var(--font-sans); letter-spacing: -0.25px; margin: 0; color: var(--text-1); }
p  { font: var(--font-weight-default) var(--font-size-base)/var(--line-height-base) var(--font-sans); margin: 0; color: var(--text-2); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }