/* ------------------------------------------------------------------
   Query Sistemas — Design Tokens
   Mirrors resources/css/app.css from the Liga das Vendas codebase
   (italogustavo/ligadasvendas) and exposes both shadcn-style aliases
   and brand-named tokens so the system can be consumed cross-product.
   ------------------------------------------------------------------ */

/* Body font: Instrument Sans (matches `--font-sans` in the codebase).
   We load the same family the app uses (bunny.net mirror of Google).  */
@import url("https://fonts.bunny.net/css?family=instrument-sans:400,500,600,700");
/* Tabular numerics for tables / dashboards / currency cells.          */
@import url("https://fonts.bunny.net/css?family=jetbrains-mono:400,500,600");

:root {
  /* ---------------- BRAND PALETTE ---------------- */
  /* Roxo Query — primary. Drawn from the `Q` glyph in the wordmark.   */
  --query-purple-50:  oklch(0.97 0.02 305);
  --query-purple-100: oklch(0.93 0.05 305);
  --query-purple-200: oklch(0.85 0.10 305);
  --query-purple-300: oklch(0.74 0.15 305);
  --query-purple-400: oklch(0.62 0.18 305);
  --query-purple-500: oklch(0.52 0.18 305); /* #6B37B7 — primary */
  --query-purple-600: oklch(0.45 0.18 305);
  --query-purple-700: oklch(0.38 0.16 305);
  --query-purple-800: oklch(0.30 0.13 305);
  --query-purple-900: oklch(0.22 0.10 305);

  /* Azul Query — secondary / accent. The cyan ring around the `Q`.     */
  --query-blue-50:    oklch(0.97 0.03 253);
  --query-blue-100:   oklch(0.93 0.07 253);
  --query-blue-200:   oklch(0.85 0.13 253);
  --query-blue-300:   oklch(0.74 0.20 253);
  --query-blue-400:   oklch(0.64 0.24 253);
  --query-blue-500:   oklch(0.55 0.25 253); /* #0D6EFD */
  --query-blue-600:   oklch(0.48 0.22 253);
  --query-blue-700:   oklch(0.40 0.18 253);
  --query-blue-800:   oklch(0.32 0.14 253);
  --query-blue-900:   oklch(0.24 0.10 253);

  /* Neutral grayscale (shadcn neutral baseColor).                      */
  --neutral-0:   oklch(1     0   0);
  --neutral-50:  oklch(0.985 0   0);
  --neutral-100: oklch(0.97  0   0);
  --neutral-200: oklch(0.922 0   0);
  --neutral-300: oklch(0.87  0   0);
  --neutral-400: oklch(0.708 0   0);
  --neutral-500: oklch(0.556 0   0);
  --neutral-600: oklch(0.439 0   0);
  --neutral-700: oklch(0.325 0   0);
  --neutral-800: oklch(0.269 0   0);
  --neutral-900: oklch(0.205 0   0);
  --neutral-950: oklch(0.145 0   0);

  /* Semantic status colors. `destructive` matches shadcn default.      */
  --success:    oklch(0.62 0.17 152);
  --warning:    oklch(0.78 0.16 84);
  --info:       var(--query-blue-500);
  --destructive: oklch(0.577 0.245 27.325);

  /* ---------------- SHADCN COMPATIBILITY LAYER ---------------- */
  /* These names are imported verbatim from resources/css/app.css       */
  --background:           var(--neutral-0);
  --foreground:           var(--neutral-950);
  --card:                 var(--neutral-0);
  --card-foreground:      var(--neutral-950);
  --popover:              var(--neutral-0);
  --popover-foreground:   var(--neutral-950);
  --primary:              var(--query-purple-500);
  --primary-foreground:   var(--neutral-50);
  --secondary:            var(--query-blue-500);
  --secondary-foreground: var(--neutral-50);
  --muted:                var(--neutral-100);
  --muted-foreground:     var(--neutral-500);
  --accent:               var(--query-blue-500);
  --accent-foreground:    var(--neutral-50);
  --destructive-foreground: var(--neutral-50);
  --border:               var(--neutral-200);
  --input:                var(--neutral-200);
  --ring:                 var(--query-purple-500);

  --chart-1: var(--query-purple-500);
  --chart-2: var(--query-blue-500);
  --chart-3: oklch(0.646 0.222 41.116); /* warm orange  */
  --chart-4: oklch(0.828 0.189 84.429); /* amber        */
  --chart-5: oklch(0.769 0.188 70.08);  /* yellow       */

  --sidebar:                       var(--neutral-50);
  --sidebar-foreground:            var(--neutral-950);
  --sidebar-primary:               var(--query-purple-500);
  --sidebar-primary-foreground:    var(--neutral-50);
  --sidebar-accent:                var(--neutral-100);
  --sidebar-accent-foreground:     var(--query-purple-500);
  --sidebar-border:                var(--neutral-200);
  --sidebar-ring:                  var(--query-purple-500);

  /* ---------------- TYPOGRAPHY ---------------- */
  --font-sans:
    "Instrument Sans", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Type scale — 4px grid, semantic. Body anchors at 14px (sm).        */
  --text-2xs: 0.6875rem; /* 11px — micro labels in tables          */
  --text-xs:  0.75rem;   /* 12px — sidebar labels, badges          */
  --text-sm:  0.875rem;  /* 14px — primary body in app             */
  --text-base:1rem;      /* 16px — landing / marketing body        */
  --text-lg:  1.125rem;  /* 18px — card titles                     */
  --text-xl:  1.25rem;   /* 20px — section titles                  */
  --text-2xl: 1.5rem;    /* 24px — page H1                         */
  --text-3xl: 1.875rem;  /* 30px — dashboard hero numbers          */
  --text-4xl: 2.25rem;   /* 36px — marketing hero                  */
  --text-5xl: 3rem;      /* 48px — landing hero                    */
  --text-6xl: 3.75rem;   /* 60px — display                         */

  --font-weight-regular: 400;
  --font-weight-medium:  500; /* default for headings / buttons        */
  --font-weight-semibold:600; /* card titles, table headers            */
  --font-weight-bold:    700; /* dashboard KPIs                        */

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em; /* used on muted ALLCAPS table labels    */

  /* ---------------- SPACING / RADIUS / SHADOW ---------------- */
  --radius: 0.625rem;                       /* 10px — base from app.css */
  --radius-sm: calc(var(--radius) - 4px);   /* 6px  — chips, inputs */
  --radius-md: calc(var(--radius) - 2px);   /* 8px  — buttons */
  --radius-lg: var(--radius);               /* 10px — cards */
  --radius-xl: 0.75rem;                     /* 12px — large cards (CardComponent uses rounded-xl) */
  --radius-2xl: 1rem;
  --radius-full: 9999px;

  /* shadcn ships these as utility tokens; we expose them explicitly.   */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.06);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.06);

  /* Ring/focus — shadcn renders these via ring-3 + ring/50.            */
  --focus-ring: 0 0 0 3px color-mix(in oklch, var(--ring) 50%, transparent);
}

.dark {
  --background:         var(--neutral-950);
  --foreground:         var(--neutral-50);
  --card:               var(--neutral-950);
  --card-foreground:    var(--neutral-50);
  --popover:            var(--neutral-950);
  --popover-foreground: var(--neutral-50);
  --primary:            oklch(0.65 0.2 305);
  --primary-foreground: var(--neutral-50);
  --secondary:          oklch(0.65 0.28 253);
  --secondary-foreground: var(--neutral-50);
  --muted:              var(--neutral-800);
  --muted-foreground:   var(--neutral-400);
  --accent:             oklch(0.65 0.28 253);
  --accent-foreground:  var(--neutral-50);
  --destructive:        oklch(0.396 0.141 25.723);
  --destructive-foreground: var(--neutral-50);
  --border:             var(--neutral-800);
  --input:              var(--neutral-800);
  --ring:               oklch(0.65 0.2 305);

  --sidebar:                       var(--neutral-900);
  --sidebar-foreground:            var(--neutral-50);
  --sidebar-primary:               oklch(0.65 0.2 305);
  --sidebar-primary-foreground:    var(--neutral-50);
  --sidebar-accent:                var(--neutral-800);
  --sidebar-accent-foreground:     var(--neutral-50);
  --sidebar-border:                var(--neutral-800);
  --sidebar-ring:                  oklch(0.65 0.2 305);
}

/* ------------------------------------------------------------------
   Semantic element styles — drop-in for any HTML document.
   ------------------------------------------------------------------ */
html { color-scheme: light; font-family: var(--font-sans); }
body {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--foreground);
  background: var(--background);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h2, .h2 {
  font-size: var(--text-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
}
h3, .h3 {
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
}
h4, .h4 {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
}
h5, .h5 {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
}
small, .text-muted {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}
.kpi {
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}
code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.tabular {
  font-variant-numeric: tabular-nums;
}

/* Brand-name aliases people may reach for.                            */
:root {
  --fg1: var(--foreground);
  --fg2: var(--muted-foreground);
  --bg1: var(--background);
  --bg2: var(--muted);
  --brand: var(--query-purple-500);
  --brand-2: var(--query-blue-500);
}