/* ============================================================
   WFI THEME - CSS Custom Properties
   Extracted from React Tailwind config + index.css
   Light mode only (dark mode excluded per requirements)
   ============================================================ */

:root {
  /* -- Brand Colors -- */
  --wfi-primary: hsl(234, 78%, 49%);
  --wfi-primary-light: hsl(234, 78%, 60%);
  --wfi-primary-dark: hsl(234, 78%, 40%);
  --wfi-primary-foreground: hsl(0, 0%, 100%);

  /* -- Surface Colors -- */
  --wfi-background: hsl(0, 0%, 100%);
  --wfi-foreground: hsl(0, 0%, 9%);
  --wfi-card: hsl(0, 0%, 100%);
  --wfi-card-foreground: hsl(0, 0%, 9%);
  --wfi-card-border: hsl(0, 0%, 94%);
  --wfi-popover: hsl(0, 0%, 100%);
  --wfi-popover-foreground: hsl(0, 0%, 9%);
  --wfi-popover-border: hsl(0, 0%, 89%);

  /* -- Semantic Colors -- */
  --wfi-secondary: hsl(0, 0%, 90%);
  --wfi-secondary-foreground: hsl(0, 0%, 9%);
  --wfi-muted: #f8f8f8;
  --wfi-muted-foreground: hsl(0 0% 26%);
  --wfi-accent: hsl(234, 6%, 93%);
  --wfi-accent-foreground: hsl(0, 0%, 9%);
  --wfi-destructive: hsl(0, 84%, 45%);
  --wfi-destructive-foreground: hsl(0, 0%, 98%);

  /* -- Border & Input -- */
  --wfi-border: hsl(0, 0%, 91%);
  --wfi-input: hsl(0, 0%, 80%);
  --wfi-ring: hsl(234, 78%, 53%);


  --wfi-opaque-button-border-intensity: -8;
  --wfi-primary-border:          hsl(from hsl(234, 78%, 49%) h s calc(l + var(--wfi-opaque-button-border-intensity)) / alpha);
  --wfi-secondary-border:        hsl(from hsl(0, 0%, 90%)    h s calc(l + var(--wfi-opaque-button-border-intensity)) / alpha);
  --wfi-muted-border:            hsl(from hsl(0, 0%, 92%)    h s calc(l + var(--wfi-opaque-button-border-intensity)) / alpha);
  --wfi-accent-border:           hsl(from hsl(234, 6%, 93%)  h s calc(l + var(--wfi-opaque-button-border-intensity)) / alpha);
  --wfi-destructive-border:      hsl(from hsl(0, 84%, 45%)   h s calc(l + var(--wfi-opaque-button-border-intensity)) / alpha);
  --wfi-sidebar-primary-border:  hsl(from hsl(234, 78%, 49%) h s calc(l + var(--wfi-opaque-button-border-intensity)) / alpha);
  --wfi-sidebar-accent-border:   hsl(from hsl(0, 0%, 92%)    h s calc(l + var(--wfi-opaque-button-border-intensity)) / alpha);

  /* -- Sidebar Colors -- */
  --wfi-sidebar: hsl(0, 0%, 96%);
  --wfi-sidebar-foreground: hsl(0, 0%, 9%);
  --wfi-sidebar-border: hsl(0, 0%, 92%);
  --wfi-sidebar-primary: hsl(234, 78%, 49%);
  --wfi-sidebar-primary-foreground: hsl(0, 0%, 98%);
  --wfi-sidebar-accent: hsl(0, 0%, 92%);
  --wfi-sidebar-accent-foreground: hsl(0, 0%, 9%);
  --wfi-sidebar-ring: hsl(234, 78%, 53%);

  /* -- Chart Colors -- */
  --wfi-chart-1: hsl(234, 78%, 35%);
  --wfi-chart-2: hsl(234, 70%, 43%);
  --wfi-chart-3: hsl(234, 60%, 50%);
  --wfi-chart-4: hsl(234, 50%, 58%);
  --wfi-chart-5: hsl(234, 40%, 65%);

  /* -- Status Colors -- */
  --wfi-status-online: rgb(34, 197, 94);
  --wfi-status-away: rgb(245, 158, 11);
  --wfi-status-busy: rgb(239, 68, 68);
  --wfi-status-offline: rgb(156, 163, 175);

  /* -- Elevation / Overlay -- */
  --wfi-elevate-1: rgba(0, 0, 0, 0.03);
  --wfi-elevate-2: rgba(0, 0, 0, 0.08);
  --wfi-button-outline: rgba(0, 0, 0, 0.10);
  --wfi-badge-outline: rgba(0, 0, 0, 0.05);

  /* -- Spacing -- */
  --wfi-spacing: 0.25rem;

  /* -- Border Radius -- */
  --wfi-radius: 0.5rem;
  --wfi-radius-lg: 0.5625rem;
  --wfi-radius-md: 0.375rem;
  --wfi-radius-sm: 0.1875rem;

  /* -- Shadows (8 levels) -- */
  --wfi-shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.04);
  --wfi-shadow-xs:  0px 1px 3px 0px hsl(0 0% 0% / 0.06);
  --wfi-shadow-sm:  0px 2px 4px 0px hsl(0 0% 0% / 0.06), 0px 1px 2px -1px hsl(0 0% 0% / 0.04);
  --wfi-shadow:     0px 2px 6px 0px hsl(0 0% 0% / 0.07), 0px 1px 2px -1px hsl(0 0% 0% / 0.04);
  --wfi-shadow-md:  0px 4px 8px 0px hsl(0 0% 0% / 0.08), 0px 2px 4px -1px hsl(0 0% 0% / 0.05);
  --wfi-shadow-lg:  0px 8px 16px 0px hsl(0 0% 0% / 0.09), 0px 4px 6px -1px hsl(0 0% 0% / 0.05);
  --wfi-shadow-xl:  0px 12px 24px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.06);
  --wfi-shadow-2xl: 0px 20px 40px 0px hsl(0 0% 0% / 0.12);

  /* -- Typography -- */
  --wfi-font-sans: 'Inter', system-ui, sans-serif;
  --wfi-font-display: 'Inter', system-ui, sans-serif;
  --wfi-font-mono: 'JetBrains Mono', monospace;
  --wfi-font-arabic: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
}