/* TrnkeyAI design tokens — shared across all four templates.
   Source of truth: DESIGN.MD §2–§4. Do not edit per-template; author once,
   copy byte-identical to insight-hub, sales-portal, command-center, onboarding. */

/* ---------- Minimal reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

ul, ol {
  list-style: none;
  padding: 0;
}

table {
  border-collapse: collapse;
}

/* ---------- Light theme tokens (DESIGN §2.1) ---------- */
:root {
  /* Brand */
  --primary: #0376CC;
  --primary-dark: #044699;
  --primary-foreground: #FFFFFF;

  /* Surfaces */
  --background: #F8FAFC;
  --card: rgba(255, 255, 255, 0.62);       /* glass card fill */
  --card-solid: #FFFFFF;                    /* opaque fallback: menus, table headers */
  --secondary: #D8E5EC;
  --accent: #D8E5EC;
  --popover: rgba(255, 255, 255, 0.62);

  /* Text */
  --foreground: #464D57;
  --muted: #5F6570;        /* darkened from #7E838A for WCAG 2.2 AA (was 3.81:1 on white; now 5.86:1) */
  --muted-foreground: #5F6570;

  /* Structure */
  --border: #E5E7EB;
  --ring: #0376CC;
  --radius: 12px;   /* base; components layer sm 8 / md 12 / lg 16 / xl 20 / pill 999px on top */

  /* Status */
  --success: #10B981;
  --warning: #F59E0B;
  --destructive: #EF4444;
  --info: #0376CC;

  /* Chart series ramp (core 5, source order: blue -> dark blue -> green -> amber -> red) */
  --chart-1: #0376CC;
  --chart-2: #044699;
  --chart-3: #10B981;
  --chart-4: #F59E0B;
  --chart-5: #EF4444;

  /* Extended ramp for busy charts (funnels, multi-series trend, pivot tables) — cycle through
     all 10 before repeating a hue */
  --chart-6: #56C5F9;   /* sky */
  --chart-7: #7E838A;   /* neutral grey, for "Other"/unassigned buckets */
  --chart-8: #8B5CF6;   /* violet, for a 4th+ qualitative series */
  --chart-9: #EC4899;   /* pink */
  --chart-10: #14B8A6;  /* teal */

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Type scale (7-step, DESIGN §3) */
  --text-xs: 0.75rem;    /* 12px — table meta, timestamps, badge text */
  --text-sm: 0.875rem;   /* 14px — body default, form labels */
  --text-base: 1rem;     /* 16px — nav items, card titles */
  --text-lg: 1.125rem;   /* 18px — section headers */
  --text-xl: 1.25rem;    /* 20px — page titles */
  --text-2xl: 1.5rem;    /* 24px — KPI values */
  --text-3xl: 2.25rem;   /* 36px — hero numbers, login headline */
}

/* ---------- Dark theme overrides (DESIGN §2.2) ---------- */
[data-theme="dark"] {
  --primary: #338FDB;         /* lightened for AA contrast on dark surfaces */
  --primary-dark: #0376CC;
  --primary-foreground: #0B1220;

  --background: #0E1420;      /* oklch 0.18 0.02 257, converted */
  --card: rgba(30, 41, 59, 0.55);
  --card-solid: #16202E;
  --secondary: #1E2A3A;
  --accent: #1E2A3A;
  --popover: rgba(30, 41, 59, 0.65);

  --foreground: #E6E9EE;
  --muted: #919CAA;        /* lightened from #8B96A5 for WCAG 2.2 AA (was 4.34:1 for .badge-muted on card-solid; now 4.61:1) */
  --muted-foreground: #919CAA;

  --border: #263243;
  --ring: #338FDB;

  --success: #34D399;
  --warning: #FBBF24;
  --destructive: #F87171;
  --info: #338FDB;

  --chart-1: #338FDB;
  --chart-2: #6BA9E8;
  --chart-3: #34D399;
  --chart-4: #FBBF24;
  --chart-5: #F87171;
  --chart-6: #7DD3FC;
  --chart-7: #94A3B8;
  --chart-8: #A78BFA;
  --chart-9: #F472B6;
  --chart-10: #2DD4BF;
}

/* ---------- Base type application ---------- */
body {
  font-family: var(--font-sans);
  color: var(--foreground);
  font-size: var(--text-sm);
}

/* ---------- Body background — radial gradient (DESIGN §4.2) ---------- */
body {
  background-color: var(--background);
  background-image:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 45%),
    radial-gradient(circle at 85% 90%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 50%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ---------- Tabular numbers utility (DESIGN §3) ---------- */
.tabular {
  font-variant-numeric: tabular-nums;
}