/* CSS Variables - Centralized theme configuration */
/* Palette aligned with Ceres Fruit Processors (CFP) - https://www.cfp.co.za/ */

:root {
  /* Brand Colors - CFP (orchard green + fruit/sunshine accent) */
  --CFP-primary-blue: #1B4D3E; /* Forest green - Ceres orchard / growth */
  --CFP-primary-blue-dark: #163A2E; /* Darker green - headings, hover */
  --CFP-primary-blue-navy: #1B4D3E; /* Forest green - primary brand */
  --CFP-primary-blue-navy-10: rgba(27, 77, 62, 0.1);
  --CFP-primary-blue-navy-20: rgba(27, 77, 62, 0.2);
  --CFP-accent-amber: #E07C3C; /* Warm amber - fruit / Ceres sunshine (CFP warmth) */
  --CFP-accent-amber-10: rgba(224, 124, 60, 0.1);
  --CFP-accent-amber-15: rgba(224, 124, 60, 0.15);
  --CFP-accent-amber-20: rgba(224, 124, 60, 0.2);
  --CFP-accent-orange: #D35400; /* Rich orange - links, secondary accent */
  /* Primary CTA orange - buttons (Search, Save). Tune to match CFP site. */
  --CFP-cta-orange: #E07C3C;
  --CFP-accent-red: #e8a0a0; /* Soft coral */
  /* Semantic - harmonized with CFG greens and warm accents */
  --CFP-success: #2D7A5E; /* Muted green - success states */
  --CFP-error: #c75c5c; /* Muted red */
  --CFP-warning: #c49050; /* Warm amber */
  --CFP-info: #4a7c9e; /* Muted blue */
  /* Neutral Colors */
  --CFP-white: #ffffff;
  --CFP-gray-border: #d1d5d4;
  --CFP-gray-text: #5c6462;
  --CFP-gray-bg: #f4f6f5;
  --CFP-gray-dim: dimgrey;
  --CFP-gray-muted: #e5e8e7;
  --CFP-gray-muted-30: rgba(229, 232, 231, 0.3);
  /* Typography */
  --CFP-font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --CFP-font-size-base: 16px;
  --CFP-font-size-sm: 0.875rem; /* 14px */
  --CFP-font-size-lg: 1.125rem; /* 18px */
  --CFP-font-weight-normal: 400;
  --CFP-font-weight-medium: 500;
  --CFP-font-weight-bold: 700;
  /* Spacing */
  --CFP-spacing-xs: 4px;
  --CFP-spacing-sm: 8px;
  --CFP-spacing-md: 16px;
  --CFP-spacing-lg: 24px;
  --CFP-spacing-xl: 32px;
  /* Additional spacing values */
  --CFP-spacing-025: 0.25rem; /* 4px */
  --CFP-spacing-05: 0.5rem; /* 8px */
  --CFP-spacing-075: 0.75rem; /* 12px */
  --CFP-spacing-1: 1rem; /* 16px */
  /* Border Radius */
  --CFP-border-radius-sm: 6px;
  --CFP-border-radius-md: 6px;
  /* Shadows */
  --CFP-shadow-sm: 0 1px 6px -1px rgba(33, 37, 41, 0.71), 0 2px 4px -2px rgba(33, 37, 41, 0.72);
  --CFP-shadow-md: 0 0px 6px -1px #fff, 0 0px 10px -1px rgba(33, 37, 41, 0.72);
  --CFP-shadow-lg: 0 0px 6px -1px #fff, 0 2px 15px -2px rgba(33, 37, 41, 0.72);
  --CFP-shadow-focus: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--CFP-info);
  --CFP-shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  /* Additional Colors */
  --CFP-black: #000000;
  --CFP-orange: #D35400; /* CFP accent orange */
  --CFP-red: #b84a4a;
  --CFP-gray-light: #eef0ef;
  --CFP-gray-medium: #5c6462;
  /* Layout Dimensions */
  --CFP-sidebar-width: 250px;
  --CFP-sidebar-width-collapsed: 80px;
  /* Grid Button Heights */
  --CFP-grid-btn-height: 25px;
  /* Layout Colors - green to orange (orchard to sunshine) */
  --CFP-topbar-bg: var(--CFP-white);
  --CFP-bottombar-gradient-start: rgb(22, 58, 46);
  --CFP-bottombar-gradient-end: rgb(224, 124, 60);
  /* Menu Specific Variables */
  --CFP-menu-item-height: 3rem; /* 48px */
  --CFP-menu-item-padding: 0.75rem 1rem; /* 12px 16px */
  --CFP-menu-item-gap: 0.25rem; /* 4px - spacing between items */
  --CFP-menu-item-font-size: 1rem;
  --CFP-menu-item-font-weight: var(--CFP-font-weight-medium);
  --CFP-menu-submenu-padding: var(--CFP-spacing-sm); /* 8px */
  --CFP-menu-submenu-item-padding: var(--CFP-spacing-05) var(--CFP-spacing-075); /* 8px 12px */
  --CFP-menu-indicator-width: 3px;
}