/* ============================================================
   KG APP — Design Tokens
   Colors, type, spacing, radii, shadows, motion.
   Dark-default per CLAUDE.md (codebase) — "control center" feel.
   Light tokens shipped for marketing surfaces / print exports.
   ============================================================ */

/* --- Font face: Plus Jakarta Sans (UI) + JetBrains Mono (data) --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     BRAND — sampled directly from the KG diamond logo
     ============================================================ */
  --kg-teal-50:  #ecfbf8;
  --kg-teal-100: #cdf3ec;
  --kg-teal-200: #9ce6d9;
  --kg-teal-300: #62d2c2;
  --kg-teal-400: #40a9a4;   /* diamond highlight */
  --kg-teal-500: #20a29a;   /* PRIMARY — the diamond face */
  --kg-teal-600: #1a8580;   /* hover / pressed surface */
  --kg-teal-700: #17676e;   /* tagline ink */
  --kg-teal-800: #154f55;
  --kg-teal-900: #0f3a3f;
  --kg-teal-950: #082427;

  /* Brand secondary — the deeper diamond shadow */
  --kg-emerald-500: #2d7e75;
  --kg-emerald-700: #1f5a52;

  /* ============================================================
     NEUTRALS — slate-warm, never pure black, never bluish.
     Tuned so cards on bg never feel like "default tailwind dark".
     ============================================================ */
  --slate-0:   #ffffff;
  --slate-25:  #fafbfb;
  --slate-50:  #f4f6f7;
  --slate-100: #e7ebed;
  --slate-200: #ced5d9;
  --slate-300: #aab4ba;
  --slate-400: #7c8990;
  --slate-500: #5a666d;
  --slate-600: #404a50;
  --slate-700: #2c3439;
  --slate-800: #1d2429;     /* card surface (dark) */
  --slate-850: #161c20;
  --slate-900: #11161a;     /* page bg (dark) */
  --slate-950: #0a0d10;     /* page bg deep / sidebar */

  /* ============================================================
     SEMANTIC — status colors. Warm spectrum, never neon.
     ============================================================ */
  --kg-success: #2da16c;       /* Ativo, Efetivado, hire confirmed */
  --kg-success-soft: #1f4a36;
  --kg-warning: #d99834;       /* Em Experiência, Vencendo */
  --kg-warning-soft: #4a3618;
  --kg-danger:  #d8584e;       /* Desligado, Atrasada, Vencido */
  --kg-danger-soft: #4a221f;
  --kg-info:    #4a8fd1;       /* Afastado, neutral info */
  --kg-info-soft: #1e3247;

  /* Chart palette — KPI cards & Tremor charts.
     Anchored to teal, with warm complements so series feel related, not random. */
  --chart-1: var(--kg-teal-500);
  --chart-2: #d99834;
  --chart-3: #7c5cd1;
  --chart-4: #d8584e;
  --chart-5: #4a8fd1;
  --chart-6: #2da16c;

  /* ============================================================
     SEMANTIC SURFACE TOKENS — use these in components, not raw scales
     ============================================================ */

  /* Default = dark. Light theme below overrides. */
  --bg-app:        var(--slate-900);   /* the page */
  --bg-sidebar:    var(--slate-950);   /* deepest, the navigation rail */
  --bg-elevated:   var(--slate-800);   /* cards, popovers */
  --bg-elevated-2: var(--slate-700);   /* hover-elevated card, nested card */
  --bg-input:      var(--slate-850);
  --bg-input-hover: var(--slate-800);
  --bg-overlay:    rgba(10, 13, 16, 0.72);

  --fg-1: #e7ebed;   /* primary ink — high contrast */
  --fg-2: #aab4ba;   /* body / secondary */
  --fg-3: #7c8990;   /* tertiary / labels */
  --fg-4: #5a666d;   /* placeholder / muted icon */
  --fg-on-brand: #ffffff;
  --fg-on-warm: #1d2429;

  --border-1: rgba(231, 235, 237, 0.08);   /* card edge */
  --border-2: rgba(231, 235, 237, 0.14);   /* divider stronger */
  --border-3: rgba(231, 235, 237, 0.22);   /* focused / pressed */
  --border-brand: var(--kg-teal-500);

  --ring-brand: 0 0 0 3px rgba(32, 162, 154, 0.32);
  --ring-danger: 0 0 0 3px rgba(216, 88, 78, 0.32);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-sans:    'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;   /* same family, used at heavier weight */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-numeric: 'JetBrains Mono', ui-monospace, monospace;  /* used for tabular KPI numbers */

  /* Type scale — designed for 1440px dashboards + readable density */
  --text-3xs: 10px;
  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-base: 14px;          /* SaaS body default */
  --text-md:  15px;
  --text-lg:  17px;
  --text-xl:  20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 38px;           /* KPI hero numbers */
  --text-5xl: 48px;

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.018em;   /* used on display / KPI numbers */
  --tracking-snug:  -0.006em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;     /* eyebrows / uppercase labels */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semi: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ============================================================
     SPACING — 4px grid; SaaS-density.
     ============================================================ */
  --space-0: 0;
  --space-px: 1px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ============================================================
     RADII — moderate rounding; never pill-shaped except for chips.
     ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;     /* default input / button */
  --radius-lg: 10px;    /* card */
  --radius-xl: 14px;    /* hero KPI card */
  --radius-2xl: 18px;
  --radius-pill: 999px;

  /* ============================================================
     SHADOWS — soft, lifted, never aggressive.
     Dark mode shadows use ambient + brand-tinted ring for depth.
     ============================================================ */
  --shadow-xs: 0 1px 0 0 rgba(0,0,0,0.25);
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.32);
  --shadow-md: 0 4px 12px -2px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.24);
  --shadow-lg: 0 12px 32px -8px rgba(0,0,0,0.45), 0 4px 10px -2px rgba(0,0,0,0.28);
  --shadow-xl: 0 24px 56px -12px rgba(0,0,0,0.55), 0 8px 16px -4px rgba(0,0,0,0.3);

  /* Inset shadow used on input fields to feel "set into the surface" */
  --shadow-inset-input: inset 0 1px 0 0 rgba(255,255,255,0.02), inset 0 0 0 1px var(--border-1);

  /* Brand glow used sparingly — focused brand button, KPI emphasis */
  --shadow-brand-glow: 0 8px 28px -8px rgba(32, 162, 154, 0.45), 0 2px 0 0 rgba(255,255,255,0.06) inset;

  /* ============================================================
     MOTION — quick, never bouncy. Easing tuned for SaaS density.
     ============================================================ */
  --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);     /* default */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emph: cubic-bezier(0.32, 0.72, 0, 1);    /* dialogs, sheets */

  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;

  /* ============================================================
     LAYOUT GUIDES
     ============================================================ */
  --sidebar-w: 240px;
  --sidebar-collapsed-w: 64px;
  --topbar-h: 56px;
  --content-max: 1280px;
  --kpi-card-min: 220px;
}

/* ------------------------------------------------------------
   LIGHT THEME — opt-in via [data-theme="light"]
   Used on marketing site, printable reports, light-mode preference.
   ------------------------------------------------------------ */
[data-theme="light"] {
  --bg-app:        var(--slate-25);
  --bg-sidebar:    #ffffff;
  --bg-elevated:   #ffffff;
  --bg-elevated-2: var(--slate-50);
  --bg-input:      #ffffff;
  --bg-input-hover: var(--slate-25);
  --bg-overlay:    rgba(17, 22, 26, 0.4);

  --fg-1: var(--slate-900);
  --fg-2: var(--slate-600);
  --fg-3: var(--slate-500);
  --fg-4: var(--slate-400);
  --fg-on-brand: #ffffff;

  --border-1: rgba(17, 22, 26, 0.08);
  --border-2: rgba(17, 22, 26, 0.12);
  --border-3: rgba(17, 22, 26, 0.20);

  --shadow-xs: 0 1px 0 0 rgba(17,22,26,0.04);
  --shadow-sm: 0 1px 2px 0 rgba(17,22,26,0.06);
  --shadow-md: 0 4px 12px -2px rgba(17,22,26,0.08), 0 2px 4px -1px rgba(17,22,26,0.04);
  --shadow-lg: 0 12px 32px -8px rgba(17,22,26,0.12), 0 4px 10px -2px rgba(17,22,26,0.06);
  --shadow-brand-glow: 0 10px 28px -10px rgba(32, 162, 154, 0.5);

  --kg-success-soft: #e3f4ec;
  --kg-warning-soft: #fbeed3;
  --kg-danger-soft:  #fbdedb;
  --kg-info-soft:    #dfeaf6;
}

/* ============================================================
   SEMANTIC HTML BASE — apply tokens to default elements
   ============================================================ */
html, body {
  background: var(--bg-app);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  color: var(--fg-1);
}
h2, .h2 {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-bold);
  color: var(--fg-1);
}
h3, .h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: var(--weight-semi);
  color: var(--fg-1);
}
h4, .h4 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semi);
  color: var(--fg-1);
}
p, .body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
}
small, .caption {
  font-size: var(--text-xs);
  color: var(--fg-3);
}
.eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-semi);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--fg-3);
}
code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.kpi-number {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

::selection {
  background: var(--kg-teal-500);
  color: var(--fg-on-brand);
}