/* CSS Custom Properties (Variables) */
:root {
  /* Bels Organic Brand Colors - updated */
  --bels-primary: #009E00; /* main brand green */
  --bels-primary-rgb: 0, 158, 0;
  --bels-accent: #FC0000;  /* action / danger accent */
  --bels-secondary: var(--bels-olive);
  --bels-olive: #516001;   /* secondary / accent */
  --bels-dark: #000106;    /* almost-black background */

  /* Semantic Colors (derived or mapped to brand) */
  --bels-success: var(--bels-primary);
  --bels-info: #17a2b8; /* keep bootstrap info */
  --bels-warning: #ffc107; /* keep bootstrap warning */
  --bels-danger: var(--bels-accent);
  --bels-danger-rgb: 252, 0, 0;
  /* RGB helper variables are declared below in derived helpers */

  /* Dark Mode Variables */
  --dark-bg: var(--bels-dark);
  --dark-surface: #1d1f1f;
  --dark-surface-hover: #262727;
  --dark-border: #2d2d2d;
  --dark-text: #e6edf3;
  --dark-text-muted: #9aa0a6;
  --dark-text-rgb: 230, 237, 243;

  /* Spacing */
    /* Utility colors */
    --bels-border: #dee2e6;
    --bels-muted: #6c757d;
    --bels-light-bg: #f8f9fa;
    --bels-white: #ffffff;
    --bels-text: #0f1723;

    /* Derived rgba helpers */
    --bels-primary-rgba: 0, 158, 0;
    --bels-accent-rgba: 252, 0, 0;
    --bels-success-rgb: var(--bels-primary-rgb);
    --bels-info-rgb: 23, 162, 184;
    --bels-warning-rgb: 255, 193, 7;
    /* Bootstrap primary color helpers (kept for 3rd-party components that use blue) */
    --bs-primary: #0d6efd;
    --bs-primary-rgb: 13, 110, 253;
    /* Generic white / shadow color helpers */
    --bels-white-rgb: 255, 255, 255;
    --bels-shadow-rgb: 33, 40, 50;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(var(--bels-shadow-rgb), 0.1);
  --shadow-md: 0 4px 8px rgba(var(--bels-shadow-rgb), 0.12);
  --shadow-lg: 0 8px 25px rgba(var(--bels-shadow-rgb), 0.15);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Focus / UI interactions. Opaque brand-green shade (darker than
     --bels-primary, which is only ~2.9:1 on white) so the ring is visible
     and keeps the brand palette instead of a foreign blue. */
  --bels-focus-color: #006600;
  --bels-focus-outline: rgba(var(--bels-primary-rgba), 0.25);
  /* Dark-mode alert colors (brand-consistent) */
  --dark-alert-success-bg: #1e4d3a;
  --dark-alert-success-border: #2d6e4e;
  --dark-alert-success-color: #a3cfbb;
  --dark-alert-info-bg: #1c4966;
  --dark-alert-info-border: #2970a3;
  --dark-alert-info-color: #9ec5fe;
  --dark-alert-warning-bg: #664d03;
  --dark-alert-warning-border: #997404;
  --dark-alert-warning-color: #ffda6a;
}