/* ==========================================================================
   CallCenterCampaigns.com — Design Tokens
   Derived from the official brand kit ("Lead Magnet" mark).
   Brand anchors taken from the logo SVG itself:
     Signal Red  #E02B18   (logo gradient #FF6A4D -> #E42313 -> #971007)
     Signal Blue #1B62D4   (logo gradient #5BB0FF -> #1B62D4 -> #0A3785)
     Ink         #0B0D12   ("CALL" wordmark)
     Muted       #6C778A   ("CAMPAIGNS" wordmark)
   The interaction blue (#2563EB) sits one step brighter than the logo blue,
   per the product brief, and harmonizes with it as the 600 stop of the ramp.
   ========================================================================== */

:root {
  /* ---- Brand primitives (do not edit — sourced from logo) ---------------- */
  --brand-red-light: #ff6a4d;
  --brand-red: #e42313;
  --brand-red-deep: #971007;
  --brand-red-flat: #e02b18;
  --brand-blue-light: #5bb0ff;
  --brand-blue: #1b62d4;
  --brand-blue-deep: #0a3785;
  --brand-ink: #0b0d12;
  --brand-muted: #6c778a;
  --brand-chrome-1: #ffffff;
  --brand-chrome-2: #e4eaf1;
  --brand-chrome-3: #9baabc;

  /* ---- Blue ramp (primary interaction color) ---------------------------- */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;   /* primary */
  --blue-700: #1b62d4;   /* logo blue */
  --blue-800: #12489f;
  --blue-900: #0a3785;
  --blue-950: #072a63;

  /* ---- Red ramp (accent / alert emphasis) ------------------------------- */
  --red-50: #fef3f1;
  --red-100: #fee2dd;
  --red-200: #fecac1;
  --red-300: #fca897;
  --red-400: #f97a62;
  --red-500: #ef5138;
  --red-600: #e02b18;    /* brand red, flat */
  --red-700: #bd1d0e;
  --red-800: #971007;
  --red-900: #7c1006;

  /* ---- Navy / slate ramp (text, structure) ------------------------------ */
  --navy-950: #070b14;
  --navy-900: #0b1324;   /* deep navy, brief */
  --navy-800: #11192c;
  --navy-700: #1c2740;
  --ink: #0b0d12;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;  /* gray, brief */
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-150: #eaeff5;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --white: #ffffff;

  /* ---- Semantic status -------------------------------------------------- */
  --ok-50: #ecfdf5;   --ok-100: #d1fae5;  --ok-500: #10b981;  --ok-600: #059669;  --ok-700: #047857;
  --warn-50: #fffbeb; --warn-100: #fef3c7; --warn-500: #f59e0b; --warn-600: #d97706; --warn-700: #b45309;
  --risk-50: #fef2f2; --risk-100: #fee2e2; --risk-500: #ef4444; --risk-600: #dc2626; --risk-700: #b91c1c;
  --info-50: #eff6ff; --info-100: #dbeafe; --info-500: #3b82f6; --info-600: #2563eb;
  --violet-50: #f5f3ff; --violet-100: #ede9fe; --violet-500: #8b5cf6; --violet-600: #7c3aed;

  /* ---- Surfaces --------------------------------------------------------- */
  --bg: #ffffff;
  --bg-tint: #fbfdff;                 /* white with the faintest blue breath */
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #f1f5f9;
  --surface-inset: #f6f9fd;
  --surface-glass: rgba(255, 255, 255, 0.72);
  --surface-dark: #0b1324;
  --surface-dark-2: #11192c;

  /* Page background: white with an extremely subtle pale-blue tint.
     Two very wide, very low-opacity radial washes — never reads as "blue". */
  --page-bg:
    radial-gradient(1200px 620px at 78% -8%, rgba(37, 99, 235, 0.055), transparent 62%),
    radial-gradient(980px 520px at 8% 4%, rgba(91, 176, 255, 0.05), transparent 58%),
    linear-gradient(180deg, #fdfeff 0%, #f7fbff 42%, #ffffff 100%);

  /* ---- Text ------------------------------------------------------------- */
  --text: #0b1324;
  --text-strong: #070b14;
  --text-muted: #64748b;
  --text-subtle: #94a3b8;
  --text-invert: #ffffff;
  --text-invert-muted: #a8b6cc;
  --text-link: #2563eb;

  /* ---- Borders ---------------------------------------------------------- */
  --border: #e6ecf4;
  --border-strong: #d5dfeb;
  --border-soft: #eef3f9;
  --border-dark: rgba(255, 255, 255, 0.1);
  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.28);
  --focus-ring-red: 0 0 0 3px rgba(224, 43, 24, 0.26);

  /* ---- Radius ----------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 26px;
  --r-full: 999px;

  /* ---- Shadows (soft, premium, never heavy) ----------------------------- */
  --sh-xs: 0 1px 2px rgba(11, 19, 36, 0.04);
  --sh-sm: 0 1px 3px rgba(11, 19, 36, 0.05), 0 1px 2px rgba(11, 19, 36, 0.03);
  --sh-md: 0 4px 12px rgba(11, 19, 36, 0.06), 0 1px 3px rgba(11, 19, 36, 0.04);
  --sh-lg: 0 12px 28px rgba(11, 19, 36, 0.08), 0 2px 8px rgba(11, 19, 36, 0.04);
  --sh-xl: 0 24px 56px rgba(11, 19, 36, 0.10), 0 4px 12px rgba(11, 19, 36, 0.05);
  --sh-blue: 0 10px 30px rgba(37, 99, 235, 0.16);
  --sh-blue-sm: 0 4px 14px rgba(37, 99, 235, 0.18);
  --sh-red-sm: 0 4px 14px rgba(224, 43, 24, 0.2);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;

  --fs-2xs: 0.6875rem;  /* 11 — badges, table meta only */
  --fs-xs: 0.75rem;     /* 12 */
  --fs-sm: 0.8125rem;   /* 13 */
  --fs-base: 0.9375rem; /* 15 — app body */
  --fs-md: 1rem;        /* 16 — marketing body */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.25rem;     /* 20 */
  --fs-2xl: 1.5rem;     /* 24 */
  --fs-3xl: 1.875rem;   /* 30 */
  --fs-4xl: 2.25rem;    /* 36 */
  --fs-5xl: 3rem;       /* 48 */
  --fs-6xl: 3.75rem;    /* 60 */

  --lh-tight: 1.1;
  --lh-snug: 1.28;
  --lh-normal: 1.55;
  --lh-relaxed: 1.7;

  --tr-tight: -0.022em;
  --tr-snug: -0.014em;
  --tr-wide: 0.02em;
  --tr-caps: 0.09em;

  /* ---- Spacing (4px base) ----------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-5: 20px;
  --s-6: 24px;  --s-7: 28px;  --s-8: 32px;  --s-10: 40px; --s-12: 48px;
  --s-14: 56px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-28: 112px;

  /* ---- Layout ----------------------------------------------------------- */
  --container: 1200px;
  --container-wide: 1400px;
  --container-narrow: 820px;
  --nav-h: 72px;
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 64px;

  /* ---- Motion (restrained) ---------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 130ms;
  --t: 200ms;
  --t-slow: 340ms;

  --z-base: 1;
  --z-sticky: 100;
  --z-nav: 500;
  --z-drawer: 900;
  --z-modal: 1000;
  --z-toast: 1100;
}

/* Role accents — used only for the app-shell identity strip, never for status */
:root {
  --role-center: #2563eb;
  --role-buyer: #7c3aed;
  --role-admin: #0b1324;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}