/**
 * @package developercode
 * @since 1.0.0
 */

:root {
  /* Primary - Orange (Call-to-Action) */
  --fc-primary: #F26223;
  --fc-primary-dark: #D94E15;
  --fc-primary-light: #F57D47;
  --fc-primary-rgb: 242, 98, 35;

  /* Secondary - Zwart voor tekst en UI elementen */
  --fc-secondary: #000000;
  --fc-secondary-light: #333333;
  --fc-secondary-rgb: 0, 0, 0;

  /* Accent - Rood ALLEEN voor acties en aanbiedingen */
  --fc-accent: #D21F13;
  --fc-accent-dark: #B01A10;
  --fc-accent-light: #E53935;
  --fc-accent-rgb: 210, 31, 19;

  /* Category-specific colors */
  --fc-laminaat: #8D6E63;        /* Laminaat category highlight */
  --fc-laminaat-rgb: 141, 110, 99;
  --fc-pvc: #607D8B;             /* PVC category */
  --fc-pvc-rgb: 96, 125, 139;
  --fc-tapijt: #7E57C2;          /* Tapijt category */
  --fc-tegels: #78909C;          /* Tegels category */

  /* Neutral colors */
  --fc-dark: #000000;
  --fc-text: #000000;
  --fc-text-light: #333333;
  --fc-text-muted: #9E9E9E;
  --fc-bg: #FAFAFA;
  --fc-bg-alt: #F5F5F5;
  --fc-white: #FFFFFF;
  --fc-border: #E0E0E0;
  --fc-border-light: #EEEEEE;

  /* Status colors */
  --fc-success: #43A047;
  --fc-success-light: #E8F5E9;
  --fc-warning: #FB8C00;
  --fc-warning-light: #FFF3E0;
  --fc-error: #E53935;
  --fc-error-light: #FFEBEE;
  --fc-info: #1E88E5;
  --fc-info-light: #E3F2FD;

  /* Sale/Discount colors - Rood ALLEEN voor aanbiedingen */
  --fc-sale: #D21F13;
  --fc-sale-bg: #FFCDD2;
  --fc-discount: #D21F13;

  /* ============================================
     Typography
     ============================================ */

  /* Font families */
  --fc-font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fc-font-secondary: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fc-font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

  /* Font sizes - Desktop */
  --fc-text-xs: 0.75rem;      /* 12px */
  --fc-text-sm: 0.875rem;     /* 14px */
  --fc-text-base: 1rem;       /* 16px */
  --fc-text-md: 1.125rem;     /* 18px */
  --fc-text-lg: 1.25rem;      /* 20px */
  --fc-text-xl: 1.5rem;       /* 24px */
  --fc-text-2xl: 1.875rem;    /* 30px */
  --fc-text-3xl: 2.25rem;     /* 36px */
  --fc-text-4xl: 3rem;        /* 48px */
  --fc-text-5xl: 3.75rem;     /* 60px */
  --fc-text-6xl: 4.5rem;      /* 72px */

  /* Font weights */
  --fc-font-light: 300;
  --fc-font-normal: 400;
  --fc-font-medium: 500;
  --fc-font-semibold: 600;
  --fc-font-bold: 700;
  --fc-font-extrabold: 800;

  /* Line heights */
  --fc-leading-none: 1;
  --fc-leading-tight: 1.25;
  --fc-leading-snug: 1.375;
  --fc-leading-normal: 1.5;
  --fc-leading-relaxed: 1.625;
  --fc-leading-loose: 2;

  /* Letter spacing */
  --fc-tracking-tighter: -0.05em;
  --fc-tracking-tight: -0.025em;
  --fc-tracking-normal: 0;
  --fc-tracking-wide: 0.025em;
  --fc-tracking-wider: 0.05em;
  --fc-tracking-widest: 0.1em;

  /* ============================================
     Spacing
     ============================================ */

  --fc-space-0: 0;
  --fc-space-1: 0.25rem;      /* 4px */
  --fc-space-2: 0.5rem;       /* 8px */
  --fc-space-3: 0.75rem;      /* 12px */
  --fc-space-4: 1rem;         /* 16px */
  --fc-space-5: 1.25rem;      /* 20px */
  --fc-space-6: 1.5rem;       /* 24px */
  --fc-space-8: 2rem;         /* 32px */
  --fc-space-10: 2.5rem;      /* 40px */
  --fc-space-12: 3rem;        /* 48px */
  --fc-space-16: 4rem;        /* 64px */
  --fc-space-20: 5rem;        /* 80px */
  --fc-space-24: 6rem;        /* 96px */
  --fc-space-32: 8rem;        /* 128px */

  /* Section spacing */
  --fc-section-sm: 3rem;      /* 48px */
  --fc-section-md: 5rem;      /* 80px */
  --fc-section-lg: 7rem;      /* 112px */
  --fc-section-xl: 9rem;      /* 144px */

  /* ============================================
     Shadows
     ============================================ */

  --fc-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --fc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --fc-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
  --fc-shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
  --fc-shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
  --fc-shadow-2xl: 0 25px 80px rgba(0, 0, 0, 0.2);

  /* Colored shadows */
  --fc-shadow-primary: 0 8px 30px rgba(242, 98, 35, 0.25);
  --fc-shadow-accent: 0 8px 30px rgba(210, 31, 19, 0.25);
  --fc-shadow-secondary: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* Card shadows */
  --fc-shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --fc-shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);

  /* ============================================
     Border Radius
     ============================================ */

  --fc-radius-none: 0;
  --fc-radius-sm: 0.25rem;    /* 4px */
  --fc-radius-md: 0.5rem;     /* 8px */
  --fc-radius-lg: 0.75rem;    /* 12px */
  --fc-radius-xl: 1rem;       /* 16px */
  --fc-radius-2xl: 1.5rem;    /* 24px */
  --fc-radius-3xl: 2rem;      /* 32px */
  --fc-radius-full: 9999px;

  /* ============================================
     Transitions
     ============================================ */

  --fc-duration-fast: 150ms;
  --fc-duration-normal: 300ms;
  --fc-duration-slow: 500ms;
  --fc-duration-slower: 700ms;

  --fc-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --fc-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --fc-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --fc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --fc-ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --fc-ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Common transitions */
  --fc-transition-colors: color var(--fc-duration-normal) var(--fc-ease-default),
                          background-color var(--fc-duration-normal) var(--fc-ease-default),
                          border-color var(--fc-duration-normal) var(--fc-ease-default);
  --fc-transition-transform: transform var(--fc-duration-normal) var(--fc-ease-bounce);
  --fc-transition-shadow: box-shadow var(--fc-duration-normal) var(--fc-ease-default);
  --fc-transition-all: all var(--fc-duration-normal) var(--fc-ease-default);

  /* ============================================
     Z-Index Scale
     ============================================ */

  --fc-z-behind: -1;
  --fc-z-base: 0;
  --fc-z-dropdown: 100;
  --fc-z-sticky: 200;
  --fc-z-promo-bar: 250;
  --fc-z-header: 300;
  --fc-z-overlay: 400;
  --fc-z-modal: 500;
  --fc-z-popover: 600;
  --fc-z-tooltip: 700;
  --fc-z-notification: 800;
  --fc-z-top: 999;

  /* ============================================
     Container Widths
     ============================================ */

  --fc-container-sm: 640px;
  --fc-container-md: 768px;
  --fc-container-lg: 1024px;
  --fc-container-xl: 1280px;
  --fc-container-2xl: 1440px;
  --fc-container-max: 1600px;

  /* ============================================
     Breakpoints (for reference in JS)
     ============================================ */

  --fc-breakpoint-sm: 640px;
  --fc-breakpoint-md: 768px;
  --fc-breakpoint-lg: 1024px;
  --fc-breakpoint-xl: 1280px;
  --fc-breakpoint-2xl: 1536px;

  /* ============================================
     Component-specific tokens
     ============================================ */

  /* Buttons */
  --fc-btn-padding-x: 1.5rem;
  --fc-btn-padding-y: 0.875rem;
  --fc-btn-font-size: var(--fc-text-base);
  --fc-btn-font-weight: var(--fc-font-semibold);
  --fc-btn-radius: var(--fc-radius-lg);

  /* Cards */
  --fc-card-padding: 1.5rem;
  --fc-card-radius: var(--fc-radius-xl);
  --fc-card-bg: var(--fc-white);
  --fc-card-border: var(--fc-border-light);

  /* Forms */
  --fc-input-padding-x: 1rem;
  --fc-input-padding-y: 0.75rem;
  --fc-input-radius: var(--fc-radius-md);
  --fc-input-border: var(--fc-border);
  --fc-input-focus-ring: 0 0 0 3px rgba(var(--fc-primary-rgb), 0.15);

  /* Product cards */
  --fc-product-card-radius: var(--fc-radius-xl);
  --fc-product-badge-radius: var(--fc-radius-md);

  /* Navigation */
  --fc-nav-height: 80px;
  --fc-nav-height-mobile: 64px;

  /* Promo bar */
  --fc-promo-bar-height: 44px;
}

/* ============================================
   Reduced Motion Preferences
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --fc-duration-fast: 0ms;
    --fc-duration-normal: 0ms;
    --fc-duration-slow: 0ms;
    --fc-duration-slower: 0ms;
  }
}

/* ============================================
   Dark Mode Tokens (future-ready)
   ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode overrides can be added here */
  }
}