/* ============================================================
   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: Inter (UI, house font per appitu ADR-0021) + JetBrains Mono (data) --- */
@import url("https://fonts.googleapis.com/css2?family=Inter: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:
    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:
    "Inter", 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.2);

  --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);
}