/* Design Tokens */

:root {
  /* ── SEMANTIC COLORS ── */
  --color-info: #007cff; /* Info / brand base — primary action, links, highlights */
  --color-info-light: #f0f7ff; /* Info tinted background — info banners, subtle fills */
  --color-info-dark: #0057e4; /* Info darker shade — hover/active on info elements */

  --color-success: #4caf50; /* Success base — positive status, healthy metrics */
  --color-success-light: #effff0; /* Success tinted background — success banners, badges */
  --color-success-dark: #388e3c; /* Success darker shade — hover/active on success elements */

  --color-warning: #ffcb00; /* Warning base — caution status, at-risk metrics */
  --color-warning-light: #fffae0; /* Warning tinted background — warning banners, badges */
  --color-warning-dark: #ffb800; /* Warning darker shade — hover/active on warning elements */

  --color-error: #ff2c2c; /* Error base — critical status, failures, blocked access */
  --color-error-light: #ffefef; /* Error tinted background — error banners, badges */
  --color-error-dark: #f10000; /* Error darker shade — hover/active on error elements */

  --color-attention: #ff8a00; /* Attention base — at-risk status, escalating between warning and error */
  --color-attention-light: #fff2e0; /* Attention tinted background — at-risk banners, badges */
  --color-attention-dark: #e67a00; /* Attention darker shade — hover/active on at-risk elements */

  --color-teal: #14a8a0; /* Teal — float / liquidity accent (distinct from success green) */
  --color-teal-light: #e6f7f5; /* Teal tinted background — liquidity chips, swatches */

  /* ── BRAND ALIASES ── */
  --color-brand: var(--color-info); /* Brand color — same as info */
  --color-brand-light: var(
    --color-info-light
  ); /* Brand tinted background — same as info-light */
  --color-brand-dark: var(
    --color-info-dark
  ); /* Brand darker shade — same as info-dark */

  /* ── NEUTRAL GREY SCALE ── */
  --color-grey-50: #fafbfc; /* Lightest — page background */
  --color-grey-100: #f4f6f8; /* Card / surface background */
  --color-grey-200: #e4e8ec; /* Borders, dividers */
  --color-grey-300: #cdd3da; /* Disabled states */
  --color-grey-400: #9aa4b0; /* Placeholder text */
  --color-grey-500: #6b7682; /* Muted text */
  --color-grey-600: #4e5965; /* Secondary text */
  --color-grey-700: #353e48; /* Body text */
  --color-grey-900: #161b21; /* Primary text, near black */

  /* ── WHITES ── */
  --color-white: #fff;

  /* ── AI SURFACE GRADIENT STOPS ── */
  --color-ai-bg-from: #f8fbff; /* AI insight card gradient start */
  --color-ai-bg-mid: #eef6ff; /* AI insight card gradient mid */
  --color-ai-bg-to: #f9fcff; /* AI insight card gradient end */
  --color-brand-navy: #0033a0; /* Deep navy — AI insight hero text */

  /* ── AI BUTTON RAINBOW RING ── */
  --color-ai-ring-amber: #fbbf24;
  --color-ai-ring-pink: #f472b6;
  --color-ai-ring-violet: #a78bfa;
  --color-ai-ring-sky: #38bdf8;
  --color-ai-ring-emerald: #34d399;

  /* ── AI ASSISTANT (FLOATING PANEL + FAB) ── */
  --color-ai-panel-from: #0057e4; /* Glass panel gradient start — brand-dark blue */
  --color-ai-panel-to: #1f8fff; /* Glass panel gradient end — bright brand blue */
  --color-ai-panel-glow: rgba(140, 200, 255, 0.5); /* Light-blue radial glow accent (top-right light source) */
  --color-ai-panel-surface: rgba(255, 255, 255, 0.12); /* Quick-action tile — glass fill */
  --color-ai-panel-surface-hover: rgba(255, 255, 255, 0.2); /* Quick-action tile — hover fill */
  --color-ai-panel-border: rgba(255, 255, 255, 0.22); /* Hairline borders on glass */
  --color-ai-panel-text: #f4f8ff; /* Primary text on panel */
  --color-ai-panel-text-muted: rgba(244, 248, 255, 0.78); /* Muted text on panel */
  --color-ai-panel-input-bg: #f4f1ea; /* Cream input pill at panel bottom */
  --color-ai-fab-from: #0057e4; /* FAB pill gradient start — brand-dark blue */
  --color-ai-fab-to: #1f8fff; /* FAB pill gradient end — bright brand blue */

  /* ── COLOR SEMANTIC ALIASES ── */
  --color-bg: var(--color-grey-50); /* App / page background */
  --color-surface: var(--color-grey-100); /* Cards, panels, raised surfaces */
  --color-border: var(--color-grey-200); /* Default border / divider color */
  --color-text-primary: var(--color-grey-900); /* Headings and primary text */
  --color-text-secondary: var(
    --color-grey-600
  ); /* Secondary / supporting text */
  --color-text-muted: var(--color-grey-400); /* Muted / placeholder text */

  /* ── TYPOGRAPHY: FAMILIES ── */
  --font-sans:
    "Inter", system-ui, -apple-system, sans-serif; /* Default UI font */
  --font-mono:
    "JetBrains Mono", "Courier New", monospace; /* Numbers, code, IDs, masked PII */
  --font-display:
    "Outfit", "Inter", system-ui, sans-serif; /* Display headings, hero numerals */

  /* ── TYPOGRAPHY: SIZE SCALE ── */
  --text-xs: 0.6875rem; /* 11px — captions, labels, table meta */
  --text-sm: 0.8125rem; /* 13px — secondary text, table cells */
  --text-base: 0.9375rem; /* 15px — body text, default size */
  --text-lg: 1.0625rem; /* 17px — emphasized body, card titles */
  --text-xl: 1.25rem; /* 20px — section headings */
  --text-2xl: 1.5rem; /* 24px — page subheadings */
  --text-3xl: 1.875rem; /* 30px — KPI values, page titles */
  --text-4xl: 2.25rem; /* 36px — hero / largest display numbers */
  --text-5xl: 3.25rem; /* 52px — oversized hero numerals (AI insight) */

  /* ── TYPOGRAPHY: WEIGHTS ── */
  --font-regular: 400; /* Body text */
  --font-medium: 500; /* Slightly emphasized text, labels */
  --font-semibold: 600; /* Headings, buttons, KPI labels */
  --font-bold: 700; /* Strong emphasis, KPI values */
  --font-extrabold: 800; /* Display stats, hero numerals (Outfit) */

  /* ── TYPOGRAPHY: LINE HEIGHTS ── */
  --leading-tight: 1.2; /* Headings, large display numbers */
  --leading-snug: 1.35; /* Subheadings, compact UI text */
  --leading-normal: 1.5; /* Body text, comfortable reading */

  /* ── TYPOGRAPHY: LETTER SPACING ── */
  --tracking-tighter: -0.03em; /* KPI hero values, display numbers */
  --tracking-tight: -0.02em; /* Large headings / display numbers */
  --tracking-normal: 0em; /* Default body text */
  --tracking-wide: 0.06em; /* Uppercase labels, badges */
  --tracking-wider: 0.1em; /* Uppercase eyebrows, section tags */

  /* ── SPACING SCALE (base 4px) ── */
  --space-1: 0.25rem; /* 4px — tightest gap, icon padding */
  --space-2: 0.5rem; /* 8px — small gaps between inline elements */
  --space-3: 0.75rem; /* 12px — compact padding, list item gaps */
  --space-4: 1rem; /* 16px — default element padding/margin */
  --space-5: 1.25rem; /* 20px — comfortable padding */
  --space-6: 1.5rem; /* 24px — card padding, grid gaps */
  --space-8: 2rem; /* 32px — section spacing */
  --space-10: 2.5rem; /* 40px — large section spacing */
  --space-12: 3rem; /* 48px — major layout gaps */
  --space-16: 4rem; /* 64px — page section separation */
  --space-20: 5rem; /* 80px — largest layout spacing */
  --space-28: 7rem; /* 112px — hero chart diameter (e.g. outlet-health donut) */
  --space-40: 10rem; /* 160px — playful hero donut diameter */
  --space-2_5: 0.625rem; /* 10px — between space-2 and space-3 */

  /* ── COMPONENT SIZING ── */
  --size-progress-sm: 0.375rem; /* 6px  — thin progress bar height */
  --size-logo: 1.875rem; /* 30px — navbar logo-mark */
  --size-icon-sm: 1.375rem; /* 22px — small action icons */
  --size-icon-md: 1.75rem; /* 28px — medium UI icons */
  --size-icon-lg: 2.625rem; /* 42px — large icon containers */
  --size-orb: 11.25rem; /* 180px — AI decorative glow orb */
  --size-label-max: 12.5rem; /* 200px — expand-on-hover max-width */
  --size-ai-fab: 3.5rem; /* 56px — floating AI button (collapsed icon) */
  --size-fab-icon: 2rem; /* 32px — star icon inside the FAB circle */
  --size-ai-panel-width: 360px; /* Floating AI chat panel width */
  --size-ai-panel-max: calc(100vw - var(--space-8)); /* AI panel max width on small screens */

  /* ── Z-INDEX ── */
  --z-navbar: 200; /* Navbar / dropdown stacking */
  --z-ai: 300; /* Floating AI assistant — above navbar */

  /* ── BORDERS ── */
  --radius-sm: 4px; /* Small radius — badges, inputs, tags */
  --radius-md: 8px; /* Medium radius — buttons, table cells */
  --radius-lg: 12px; /* Large radius — cards, panels */
  --radius-xl: 16px; /* Extra large radius — modals, hero cards */
  --radius-full: 9999px; /* Pill / circle — avatars, status dots, chips */
  --border-width: 1px; /* Default border thickness */
  --border-color: var(--color-border); /* Default border color alias */

  /* ── SHADOWS ── */
  --shadow-sm:
    0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); /* Subtle lift — cards, inputs */
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); /* Medium lift — dropdowns, popovers */
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.1); /* Strong lift — modals, overlays */
  --shadow-brand:
    0 18px 44px -14px rgba(0, 124, 255, 0.4); /* Branded glow — AI / hero surfaces */
  --shadow-navbar: 0 1px 0 var(--color-border), 0 2px 12px rgba(0, 0, 0, 0.05); /* Navbar bottom border + soft ambient shadow */
  --shadow-ai-insight:
    0 18px 38px rgba(0, 87, 228, 0.12),
    0 8px 20px rgba(22, 27, 33, 0.06); /* AI insight card deep lift */
  --shadow-ai-trend: 0 8px 16px rgba(0, 87, 228, 0.12); /* AI trend badge lift */
  --shadow-ai-glow: 0 0 10px 2px rgba(167, 139, 250, 0.45); /* AI button pulse glow */
  --shadow-ai-hover: 0 4px 18px rgba(167, 139, 250, 0.5); /* AI button hover glow */
  --text-shadow-ai-figure: 0 10px 24px rgba(0, 87, 228, 0.18); /* AI insight hero number depth */
  --shadow-ai-panel:
    0 24px 60px -12px rgba(0, 51, 160, 0.55); /* Floating AI chat panel lift */

  /* ── LAYOUT ── */
  --sidebar-width: 240px; /* Fixed left navigation width */
  --topbar-height: 56px; /* Fixed top bar height */
  --content-max-width: 1280px; /* Max content column width */
  --card-padding: var(--space-6); /* Default inner padding for cards */
  --grid-gap: var(--space-6); /* Default gap between grid items */

  /* ── TRANSITIONS ── */
  --transition-fast: 120ms ease; /* Quick feedback — hovers, toggles */
  --transition-base: 200ms ease; /* Default — most state changes */
  --transition-slow: 300ms ease; /* Deliberate — panels, overlays, expand/collapse */

  /* ── MOTION PRIMITIVES ── */
  --ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1); /* Decelerated, expressive — reveals, draw-on */
  --duration-draw: 720ms; /* Donut/arc draw-on sweep */
  --duration-rise: 420ms; /* Fade-and-rise reveal for content */
  --delay-step: 150ms; /* Stagger interval between sequenced reveals */
  --duration-pulse: 2400ms; /* Slow attention loop — pulses a critical/alert element */
  --motion-lift-sm: 0.1875rem; /* 3px — card hover lift distance */
  --motion-rise-sm: 0.625rem; /* 10px — section entrance translateY */
  --motion-rise-md: 0.875rem; /* 14px — KPI card entrance translateY */
}