/* ==========================================================================
   Design Tokens — Baiona Natura
   A token-based design system inspired by Base UI's philosophy:
   unstyled primitives + design tokens = easy theming.
   Override any variable in the Customizer or a child theme.
   ========================================================================== */

:root {
  /* -- Color Palette ------------------------------------------------------- */

  /* Greens — primary brand */
  --bn-color-green-50:  #f0fdf4;
  --bn-color-green-100: #dcfce7;
  --bn-color-green-200: #bbf7d0;
  --bn-color-green-300: #86efac;
  --bn-color-green-400: #4ade80;
  --bn-color-green-500: #22c55e;
  --bn-color-green-600: #16a34a;
  --bn-color-green-700: #15803d;
  --bn-color-green-800: #166534;
  --bn-color-green-900: #14532d;
  --bn-color-green-950: #052e16;

  /* Earth tones — warm accent */
  --bn-color-earth-50:  #fefce8;
  --bn-color-earth-100: #fef9c3;
  --bn-color-earth-200: #fef08a;
  --bn-color-earth-300: #fde047;
  --bn-color-earth-400: #d4a373;
  --bn-color-earth-500: #b08050;
  --bn-color-earth-600: #8b6332;
  --bn-color-earth-700: #6b4423;
  --bn-color-earth-800: #4a2c11;

  /* Neutrals */
  --bn-color-neutral-0:   #ffffff;
  --bn-color-neutral-50:  #f9fafb;
  --bn-color-neutral-100: #f3f4f6;
  --bn-color-neutral-200: #e5e7eb;
  --bn-color-neutral-300: #d1d5db;
  --bn-color-neutral-400: #9ca3af;
  --bn-color-neutral-500: #6b7280;
  --bn-color-neutral-600: #4b5563;
  --bn-color-neutral-700: #374151;
  --bn-color-neutral-800: #1f2937;
  --bn-color-neutral-900: #111827;
  --bn-color-neutral-950: #030712;

  /* -- Semantic Colors ----------------------------------------------------- */
  --bn-color-primary:       var(--bn-color-green-700);
  --bn-color-primary-hover: var(--bn-color-green-800);
  --bn-color-primary-light: var(--bn-color-green-50);
  --bn-color-primary-muted: var(--bn-color-green-100);

  --bn-color-accent:       var(--bn-color-earth-400);
  --bn-color-accent-hover: var(--bn-color-earth-500);

  --bn-color-bg:           var(--bn-color-neutral-0);
  --bn-color-bg-alt:       var(--bn-color-neutral-50);
  --bn-color-bg-muted:     var(--bn-color-green-50);

  --bn-color-surface:       var(--bn-color-neutral-0);
  --bn-color-surface-hover: var(--bn-color-neutral-50);

  --bn-color-text:         var(--bn-color-neutral-800);
  --bn-color-text-muted:   var(--bn-color-neutral-500);
  --bn-color-text-inverse: var(--bn-color-neutral-0);
  --bn-color-text-heading: var(--bn-color-neutral-900);

  --bn-color-border:       var(--bn-color-neutral-200);
  --bn-color-border-focus: var(--bn-color-green-500);

  --bn-color-link:         var(--bn-color-green-700);
  --bn-color-link-hover:   var(--bn-color-green-900);

  --bn-color-success: #16a34a;
  --bn-color-warning: #d97706;
  --bn-color-error:   #dc2626;
  --bn-color-info:    #2563eb;

  /* -- Typography ---------------------------------------------------------- */
  --bn-font-sans:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --bn-font-heading: 'Playfair Display', 'Georgia', serif;
  --bn-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --bn-text-xs:   0.75rem;    /* 12px */
  --bn-text-sm:   0.875rem;   /* 14px */
  --bn-text-base: 1rem;       /* 16px */
  --bn-text-lg:   1.125rem;   /* 18px */
  --bn-text-xl:   1.25rem;    /* 20px */
  --bn-text-2xl:  1.5rem;     /* 24px */
  --bn-text-3xl:  1.875rem;   /* 30px */
  --bn-text-4xl:  2.25rem;    /* 36px */
  --bn-text-5xl:  3rem;       /* 48px */

  --bn-leading-tight:  1.25;
  --bn-leading-normal: 1.6;
  --bn-leading-loose:  1.8;

  --bn-tracking-tight:  -0.025em;
  --bn-tracking-normal: 0;
  --bn-tracking-wide:   0.05em;

  --bn-font-weight-normal:   400;
  --bn-font-weight-medium:   500;
  --bn-font-weight-semibold: 600;
  --bn-font-weight-bold:     700;

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

  /* -- Layout -------------------------------------------------------------- */
  --bn-container-sm:  640px;
  --bn-container-md:  768px;
  --bn-container-lg:  1024px;
  --bn-container-xl:  1200px;
  --bn-container-2xl: 1400px;

  --bn-sidebar-width: 300px;

  /* -- Borders & Radius ---------------------------------------------------- */
  --bn-radius-sm:   0.25rem;
  --bn-radius-md:   0.5rem;
  --bn-radius-lg:   0.75rem;
  --bn-radius-xl:   1rem;
  --bn-radius-2xl:  1.5rem;
  --bn-radius-full: 9999px;

  --bn-border-width: 1px;

  /* -- Shadows ------------------------------------------------------------- */
  --bn-shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --bn-shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --bn-shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --bn-shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* -- Transitions --------------------------------------------------------- */
  --bn-transition-fast:   150ms ease;
  --bn-transition-normal: 250ms ease;
  --bn-transition-slow:   400ms ease;

  /* -- Z-index Scale ------------------------------------------------------- */
  --bn-z-dropdown: 100;
  --bn-z-sticky:   200;
  --bn-z-overlay:  300;
  --bn-z-modal:    400;
  --bn-z-toast:    500;
}