/* Theme Variables - fe-components backoffice style */
/* Colors sourced from @bfi/theme-provider theme.json */
/* Values are raw HSL (without hsl() wrapper) for Tailwind compatibility */

:root {
  /* Light mode (default) - backoffice.light */
  --background: 210 20% 98%;
  --foreground: 215 13.79% 34.12%;
  --card: 0 0% 100%;
  --card-foreground: 215 13.79% 34.12%;
  --primary: 205 85% 40%;
  --primary-foreground: 0 0% 100%;
  --secondary: 208 64% 21%;
  --secondary-foreground: 0 0% 100%;
  --accent: 197 76% 51%;
  --accent-foreground: 0 0% 100%;
  --muted: 220 13% 91%;
  --muted-foreground: 218 11% 65%;
  --border: 220 13% 91%;
  --input: 220 13% 91%;
  --ring: 215 14% 34%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --success: 120 100% 27%;
  --success-foreground: 0 0% 100%;
  --warning: 36 100% 50%;
  --warning-foreground: 0 0% 100%;
  --menu: 233 27% 94%;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Poppins', var(--font-sans);

  /* Spacing and sizing */
  --radius: 0.5rem;

  /* Form Input Variables - from @bfi/form backoffice theme */
  --form-input: transparent;
  --form-input-height: 56px;
  --form-input-border-radius: 6px;
  --form-input-border: 1px;
  --form-input-border-color: var(--border);
  --form-input-p: 0.5rem 0.75rem;
  --form-input-font-size: 15px;
  --form-input-focus-ring: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) hsl(var(--primary)), var(--tw-shadow, 0 0 #0000);
  --form-input-focus-border-color: var(--border);
  --form-input-focus-border: 1px;
  --form-input-focus-box-shadow-error: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color), var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) hsl(var(--destructive)), var(--tw-shadow, 0 0 #0000);
  --form-input-placeholder-opacity: 1;
  --form-input-placeholder-focus-opacity: 1;

  /* Form Label Variables - from @bfi/form backoffice theme */
  --form-label-background: hsl(var(--background));
  --form-label-font-size: 0.75rem;
  --form-label-font-weight: 500;
  --form-label-line-height: 1rem;
  --form-label-padding-x: 0.25rem;
  --form-label-margin-bottom: -0.5rem;
  --form-label-margin-left: 0.5rem;
  --form-label-foreground: var(--foreground);
}

/* Dark mode - backoffice.dark */
[data-theme="dark"] {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 5.9% 10%;
  --card-foreground: 0 0% 98%;
  --primary: 205 85% 40%;
  --primary-foreground: 0 0% 100%;
  --secondary: 208 64% 21%;
  --secondary-foreground: 0 0% 100%;
  --accent: 197 76% 51%;
  --accent-foreground: 0 0% 100%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --border: 240 3.7% 17%;
  --input: 240 3.7% 17%;
  --ring: 240 4.9% 83.9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;
  --success: 120 100% 27%;
  --success-foreground: 0 0% 100%;
  --warning: 36 100% 50%;
  --warning-foreground: 0 0% 100%;
  --menu: 240 5.9% 10%;
}

/* System preference detection */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 5.9% 10%;
    --card-foreground: 0 0% 98%;
    --primary: 205 85% 40%;
    --primary-foreground: 0 0% 100%;
    --secondary: 208 64% 21%;
    --secondary-foreground: 0 0% 100%;
    --accent: 197 76% 51%;
    --accent-foreground: 0 0% 100%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --border: 240 3.7% 17%;
    --input: 240 3.7% 17%;
    --ring: 240 4.9% 83.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --success: 120 100% 27%;
    --success-foreground: 0 0% 100%;
    --warning: 36 100% 50%;
    --warning-foreground: 0 0% 100%;
    --menu: 240 5.9% 10%;
  }
}