/* ============================================================
   SalesBlaster AI — Colors & Type Foundations
   ------------------------------------------------------------
   Source of truth: maxforbang/salesblaster-web-template
   (styles/globals.css — shadcn/ui token set, Inter typeface).
   Light is the primary brand surface; dark is fully supported.
   Hex equivalents are noted inline for non-Tailwind use.
   ============================================================ */

/* ---- Typeface ---- */
/* The product uses Inter (next/font/google) across marketing + app. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap");

:root {
  /* ---------- Brand / type families ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", monospace;

  /* ============================================================
     CORE COLOR TOKENS  (light — the default brand surface)
     SalesBlaster is monochrome-first: a near-black "primary"
     on white, greys for structure, with accent hues reserved
     for status + the AIOS department system.
     ============================================================ */
  --background:            hsl(0 0% 100%);      /* #ffffff */
  --background-subtle:     hsl(0 0% 100%);      /* #ffffff */
  --os-background-100:     hsl(0 0% 100%);      /* #ffffff  app canvas */
  --os-background-200:     hsl(0 0% 98%);       /* #fafafa  app canvas, raised */
  --foreground:            hsl(240 10% 3.9%);   /* #09090b  near-black text */

  --card:                  hsl(0 0% 100%);      /* #ffffff */
  --card-foreground:       hsl(240 10% 3.9%);   /* #09090b */
  --popover:               hsl(0 0% 100%);      /* #ffffff */
  --popover-foreground:    hsl(240 10% 3.9%);   /* #09090b */

  --primary:               hsl(222.2 47.4% 0%); /* #000000  pure black CTA */
  --primary-foreground:    hsl(0 0% 98%);       /* #fafafa */
  --primary-muted:         hsl(0 0% 20%);       /* #333333 */

  --secondary:             hsl(0 0% 89.8%);     /* #e5e5e5 */
  --secondary-foreground:  hsl(240 5.9% 10%);   /* #18181b */

  --muted:                 hsl(240 4.8% 95.9%); /* #f4f4f5  fills, hovers */
  --muted-foreground:      hsl(216 15.5% 46.9%);/* #677589  secondary text */
  --accent:                hsl(240 4.8% 95.9%); /* #f4f4f5 */
  --accent-foreground:     hsl(240 5.9% 10%);   /* #18181b */

  --destructive:           hsl(0 84.2% 60.2%);  /* #ef4444  red */
  --destructive-foreground:hsl(0 0% 98%);       /* #fafafa */

  --border:                hsl(214.3 31.8% 91.4%); /* #e2e8f0  hairline */
  --input:                 hsl(213 31.4% 93.1%);   /* #e8edf3  field border */
  --ring:                  hsl(221.2 83.2% 53.3%); /* #2563eb  focus blue */

  --radius:                0.75rem;              /* 12px — base radius */

  /* ---------- Analytics chart palette ---------- */
  --chart-1:               hsl(173 58% 39%);    /* #2a9d8f teal   */
  --chart-2:               hsl(12 76% 61%);     /* #e76f51 coral  */
  --chart-3:               hsl(197 37% 24%);    /* #264653 slate  */
  --chart-4:               hsl(43 74% 66%);     /* #e9c46a gold   */
  --chart-5:               hsl(27 87% 67%);     /* #f4a261 orange */

  /* ---------- Sidebar (app shell) ---------- */
  --sidebar-background:        hsl(0 0% 100%);      /* #ffffff */
  --sidebar-foreground:        hsl(240 5.3% 26.1%); /* #3f3f46 */
  --sidebar-primary:           hsl(240 5.9% 10%);   /* #18181b */
  --sidebar-primary-foreground:hsl(0 0% 98%);       /* #fafafa */
  --sidebar-accent:            hsl(240 4.8% 95.9%); /* #f4f4f5 */
  --sidebar-accent-foreground: hsl(240 5.9% 10%);   /* #18181b */
  --sidebar-border:            hsl(220 13% 91%);    /* #e5e7eb */
  --sidebar-ring:              hsl(217.2 91.2% 59.8%);/* #3b82f6 */

  /* ============================================================
     STATUS / SEMANTIC ACCENTS
     Used in badges, notifications, live-call states. Almost
     always rendered as a 5–10% tint fill + saturated text.
     ============================================================ */
  --status-success:        hsl(142 71% 45%);    /* #16a34a green-600 */
  --status-success-fill:   hsl(142 71% 45% / 0.10);
  --status-warning:        hsl(38 92% 50%);     /* #f59e0b amber-500 */
  --status-warning-fill:   hsl(45 93% 47% / 0.06);
  --status-danger:         hsl(0 84% 60%);      /* #ef4444 red-500 */
  --status-danger-fill:    hsl(0 84% 60% / 0.06);
  --status-info:           hsl(217 91% 60%);    /* #3b82f6 blue-500 */
  --status-violet:         hsl(258 90% 66%);    /* #8b5cf6 violet-500 */

  /* Real-time notification accents (from product copy) */
  --notify-support:        #00c9a7;  /* support ticket  */
  --notify-lead:           #ffb800;  /* new inbound lead */
  --notify-meeting:        #ff3d71;  /* meeting booked   */
  --notify-transfer:       #1e86ff;  /* live transfer    */

  /* ============================================================
     AIOS DEPARTMENT SYSTEM
     The AI Operating System org-chart colors each department.
     Header cards use a saturated → deep linear gradient.
     ============================================================ */
  --dept-marketing:        #2563eb;  /* blue   */
  --dept-marketing-grad:   linear-gradient(135deg, #3b82f6, #2563eb);
  --dept-sales:            #10b981;  /* green  */
  --dept-sales-grad:       linear-gradient(135deg, #34d399, #059669);
  --dept-support:          #8b5cf6;  /* purple */
  --dept-support-grad:     linear-gradient(135deg, #a78bfa, #7c3aed);
  --dept-operations:       #f97316;  /* orange */
  --dept-operations-grad:  linear-gradient(135deg, #fb923c, #ea580c);

  /* ============================================================
     ELEVATION  (shadows are extremely restrained — shadcn xs/sm)
     ============================================================ */
  --shadow-xs:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm:  0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
  --shadow-md:  0 4px 12px -2px rgb(0 0 0 / 0.08);
  --shadow-lg:  0 12px 32px -8px rgb(0 0 0 / 0.12);
}

/* ============================================================
   DARK THEME
   ============================================================ */
.dark {
  --background:            hsl(0 0% 6%);        /* #0f0f0f */
  --background-subtle:     hsl(240 3% 6%);      /* #0f0f10 */
  --os-background-100:     hsl(0 0% 8%);        /* #141414 */
  --os-background-200:     hsl(0 0% 9%);        /* #171717 */
  --foreground:            hsl(0 0% 98%);       /* #fafafa */

  --card:                  hsl(0 0% 10%);       /* #1a1a1a */
  --card-foreground:       hsl(0 0% 98%);       /* #fafafa */
  --popover:               hsl(0 0% 6%);        /* #0f0f0f */
  --popover-foreground:    hsl(0 0% 98%);       /* #fafafa */

  --primary:               hsl(210 40% 98%);    /* #f8fafc  near-white CTA */
  --primary-foreground:    hsl(222.2 47.4% 0%); /* #000000 */
  --primary-muted:         hsl(210 1.9% 79.6%); /* #c9cacb */

  --secondary:             hsl(240 3.7% 15.9%); /* #27272a */
  --secondary-foreground:  hsl(0 0% 98%);       /* #fafafa */
  --muted:                 hsl(240 3.7% 15.9%); /* #27272a */
  --muted-foreground:      hsl(210 1% 61.2%);   /* #9b9c9d */
  --accent:                hsl(0 0% 20%);       /* #333333 */
  --accent-foreground:     hsl(0 0% 98%);       /* #fafafa */

  --destructive:           hsl(0 62.8% 45%);    /* #bb1f1f */
  --destructive-foreground:hsl(0 0% 98%);       /* #fafafa */

  --border:                hsl(240 3.7% 15.9%); /* #27272a */
  --input:                 hsl(0 0% 18%);       /* #2e2e2e */
  --ring:                  hsl(217.2 91.2% 59.8%);/* #3b82f6 */

  --sidebar-background:        hsl(0 0% 6%);
  --sidebar-foreground:        hsl(240 4.8% 95.9%);
  --sidebar-primary:           hsl(224.3 76.3% 48%);
  --sidebar-primary-foreground:hsl(0 0% 100%);
  --sidebar-accent:            hsl(0 0% 10.2%);
  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
  --sidebar-border:            hsl(0 0% 10.2%);
  --sidebar-ring:              hsl(217.2 91.2% 59.8%);
}

/* ============================================================
   TYPE SCALE  (Inter; tight tracking on display sizes)
   Marketing display is large & balanced; app text is compact.
   ============================================================ */
:root {
  --text-display:  clamp(2.75rem, 5vw, 5.25rem); /* hero h1 (text-6xl→[5.25rem]) */
  --text-h1:       2.25rem;   /* 36px */
  --text-h2:       1.875rem;  /* 30px */
  --text-h3:       1.5rem;    /* 24px */
  --text-h4:       1.25rem;   /* 20px */
  --text-lg:       1.125rem;  /* 18px */
  --text-base:     1rem;      /* 16px */
  --text-sm:       0.875rem;  /* 14px — app default */
  --text-xs:       0.75rem;   /* 12px — badges, meta */
  --text-2xs:      0.6875rem; /* 11px — micro badges */

  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-normal:1.5;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
}

/* ---- Semantic helpers (use directly in static HTML) ---- */
.sb-display {
  font-family: var(--font-sans);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.sb-h1 { font-size: var(--text-h1); font-weight: 600; line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
.sb-h2 { font-size: var(--text-h2); font-weight: 600; line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
.sb-h3 { font-size: var(--text-h3); font-weight: 600; line-height: var(--leading-snug); }
.sb-h4 { font-size: var(--text-h4); font-weight: 600; line-height: var(--leading-snug); }
.sb-body { font-size: var(--text-base); font-weight: 400; line-height: var(--leading-normal); color: var(--muted-foreground); }
.sb-sm { font-size: var(--text-sm); font-weight: 400; line-height: var(--leading-normal); }
.sb-label { font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-snug); }
.sb-mono { font-family: var(--font-mono); font-size: var(--text-sm); }
.sb-eyebrow { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); }

* { font-family: var(--font-sans); }