/**
 * Central design tokens — change the entire color scheme by editing :root
 * and html[data-theme="light"] only.
 */

:root {
  /* 1. Global page layout & structural elements (inverted vs inputs for preview) */
  --bg-main: #2e3032;
  --bg-surface: var(--input-bg);
  --border-color: #2e3032;

  /* 2. Typography & text hierarchy */
  --text-primary: #e3e3e3;
  --text-secondary: #b4b4b4;
  --text-inverse: #131314;

  /* 3. Global interactive & brand accent */
  --accent-gradient: linear-gradient(90deg, #4285f4, #9b51e0, #e91e63);
  --accent-solid: #4285f4;

  /* 4. Complete button states — primary = accent (forms, universal CTAs) */
  --btn-primary-bg: var(--accent-solid);
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #357ae8;
  --btn-secondary-bg: #2e3032;
  --btn-secondary-text: #e3e3e3;
  --btn-secondary-hover: #3a3c3e;
  --btn-icon-hover: rgba(255, 255, 255, 0.08);

  /* 5. Complete table elements (match form field surface) */
  --table-header-bg: var(--input-bg);
  --table-row-bg: var(--input-bg);
  --table-row-zebra: var(--input-bg);
  --table-row-hover: #252627;

  /* 6. Form inputs & control elements */
  --input-bg: #131314;
  --card-bg: var(--input-bg);
  --input-border: #2e3032;
  --input-focus-border: #4285f4;
  --input-focus-shadow: 0 0 0 3px rgba(66, 133, 244, 0.32), 0 0 14px rgba(66, 133, 244, 0.14);
  --input-error-shadow: 0 0 0 3px rgba(239, 83, 80, 0.32), 0 0 14px rgba(239, 83, 80, 0.14);
  --input-error-shadow-tight: 0 0 0 1px rgba(239, 83, 80, 0.28), 0 2px 10px rgba(239, 83, 80, 0.18);
  --fieldset-error-shadow: 0 2px 10px rgba(239, 83, 80, 0.12);

  /* Shell / legacy aliases */
  --accent: var(--accent-gradient);
  --border-subtle: var(--border-color);
  --header-hover-bg: var(--btn-icon-hover);

  /* Glossary tooltips */
  --tooltip-bg: #1e1f20;
  --tooltip-text: var(--text-primary);
  --tooltip-shadow: var(--dropdown-shadow);

  /* Layout (non-palette) */
  --app-header-height: 56px;
  --fz-progress-height: 3px;
  --fz-progress-z: 10050;
  --fz-progress-track-bg: transparent;
  /* Master layout: padding inside #app-content (main scrollport) */
  --app-content-padding: 24px;
  /* Standard page content column (grain, produce, settings cards) */
  --app-container-max-width: 1200px;
  --app-container-padding-inline-start: max(20px, env(safe-area-inset-left, 0px));
  --app-container-padding-inline-end: max(20px, env(safe-area-inset-right, 0px));
  --app-container-padding-block-end: 20px;
  --dropdown-glide-duration: 0.3s;
  --dropdown-glide-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --sidebar-width: 280px;
  --sidebar-fixed-width: 260px;
  --nav-main-gap: 6.5rem;
  --font-ui: 'Inter', 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Elevation & overlays */
  --dropdown-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  --backdrop-bg: rgba(0, 0, 0, 0.45);
  --shadow-sidebar: 4px 0 24px rgba(0, 0, 0, 0.35);
  --shadow-container: 0 2px 8px rgba(0, 0, 0, 0.22);
  --shadow-soft: var(--shadow-container);
  --shadow-banner: 0 2px 10px rgba(0, 0, 0, 0.25);

  /* Links & focus */
  --link-color: #8ab4f8;
  --link-hover-color: #aecbfa;
  --focus-outline-color: var(--accent-solid);
  --state-selected-border: rgba(66, 133, 244, 0.45);

  /* Farm brand (marketing / orange actions) */
  --brand-farm: #f37121;
  --brand-farm-hover: #e06518;
  --brand-farm-muted-border: rgba(243, 113, 33, 0.35);
  --brand-farm-muted-bg: rgba(243, 113, 33, 0.12);
  --brand-farm-active-bg: rgba(243, 113, 33, 0.18);
  --brand-farm-hover-bg: rgba(243, 113, 33, 0.1);
  --brand-farm-link: #f9a06b;
  --brand-farm-link-hover: #ffc49a;

  --btn-brand-bg: var(--brand-farm);
  --btn-brand-text: #ffffff;
  --btn-brand-text-subtle: color-mix(in srgb, var(--btn-brand-text) 92%, transparent);
  --btn-brand-hover: var(--brand-farm-hover);
  --btn-brand-shadow: 0 2px 12px rgba(243, 113, 33, 0.4);

  /* Third-party brand marks */
  --icon-google: #ea4335;
  --icon-whatsapp: #25d366;
  --btn-whatsapp-bg: #25d366;
  --btn-whatsapp-hover: #1ebe5a;
  --btn-whatsapp-shadow: 0 2px 12px rgba(37, 211, 102, 0.38);

  /* Price & revenue semantics */
  --color-price-positive: #81c784;
  --color-price-negative: #e57373;
  --color-price-neutral: var(--text-secondary);
  --color-revenue: #81c784;
  --color-revenue-strong: #a5d6a7;
  --color-revenue-muted-bg: rgba(26, 92, 46, 0.14);
  --color-revenue-muted-border: rgba(207, 218, 212, 0.35);

  /* Verification banner */
  --banner-verification-bg: linear-gradient(90deg, #0d47a1 0%, #1565c0 100%);
  --banner-verification-text: #ffffff;
  --banner-verification-link-bg: #ffecb3;
  --banner-verification-link-text: #0d47a1;
  --banner-verification-link-hover-text: #0a3a82;

  /* Headline / marketing cards (grain SAFEX strip, etc.) */
  --headline-card-bg: var(--input-bg);
  --headline-card-border: var(--border-color);
  --headline-card-title: var(--text-secondary);
  --headline-card-price: var(--text-primary);

  /* Nav CTA surfaces */
  --nav-cta-bg: var(--bg-surface);
  --nav-cta-border: var(--brand-farm-muted-border);
  --nav-cta-text: var(--text-primary);
  --nav-cta-shadow: var(--shadow-soft);

  /* Forms — errors & warnings */
  --color-error: #ef5350;
  --color-error-bg: rgba(239, 83, 80, 0.12);
  --color-error-border: rgba(239, 83, 80, 0.4);
  --color-error-text: #ffcdd2;
  --color-error-border-strong: #c62828;
  --color-error-muted-text: #ffab91;
  --color-error-divider: rgba(239, 83, 80, 0.35);
  --color-warn: #ff9800;
  --color-warn-border: rgba(255, 152, 0, 0.55);
  --color-warn-glow: rgba(255, 152, 0, 0.18);

  /* Verified / success panels */
  --verified-panel-bg: linear-gradient(135deg, rgba(46, 125, 50, 0.22) 0%, rgba(46, 125, 50, 0.08) 100%);
  --verified-panel-border: rgba(129, 199, 132, 0.45);
  --verified-panel-text: var(--color-revenue-strong);
  --verified-panel-shadow: 0 1px 6px rgba(46, 125, 50, 0.15);
  --verified-section-bg: linear-gradient(180deg, rgba(46, 125, 50, 0.12) 0%, var(--bg-surface) 48%);
  --verified-section-border: rgba(129, 199, 132, 0.45);

  /* HTMX alerts */
  --alert-success-bg: rgba(46, 125, 50, 0.16);
  --alert-success-text: #c8e6c9;
  --alert-success-border: rgba(165, 214, 167, 0.4);
  --alert-error-bg: var(--color-error-bg);
  --alert-error-text: var(--color-error-text);
  --alert-error-border: var(--color-error-border);
  --alert-info-bg: rgba(66, 133, 244, 0.14);
  --alert-info-text: var(--link-color);
  --alert-info-border: rgba(144, 202, 249, 0.35);

  /* JS live hints (app.css) */
  --hint-info-bg: rgba(66, 133, 244, 0.14);
  --hint-info-text: var(--link-color);
  --hint-info-border: rgba(66, 133, 244, 0.35);
  --hint-warn-bg: var(--color-error-bg);
  --hint-warn-text: var(--color-error-muted-text);

  /* Scroll-to-top FAB (farm brand — distinct from form primary buttons) */
  --scroll-btn-bg: var(--btn-brand-bg);
  --scroll-btn-text: var(--btn-brand-text);
  --scroll-btn-border: var(--btn-brand-bg);
  --scroll-btn-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  --scroll-btn-focus-ring: var(--btn-brand-hover);

  /* Theme picker swatches (fixed previews) */
  --swatch-dark-fill: #131314;
  --swatch-dark-ring: #444444;
  --swatch-light-fill: #ffffff;
  --swatch-light-ring: #cccccc;

  /* Fieldset / dividers */
  --fieldset-border: var(--border-color);
  --divider-subtle: var(--border-color);

  /* Fresh produce page */
  --fp-alert-bg: rgba(255, 193, 7, 0.12);
  --fp-alert-border: rgba(255, 213, 79, 0.35);
  --fp-alert-text: #ffe082;
  --fp-loadshedding-band-bg: var(--color-error-bg);
  --fp-loadshedding-band-border: var(--color-error-border);
  --fp-loadshedding-title: var(--color-error-text);
  --fp-loadshedding-sub: var(--color-error-muted-text);
  --fp-chip-bg: var(--input-bg);
  --fp-chip-text: var(--text-primary);
  --fp-chip-hover-bg: var(--brand-farm-hover-bg);
  --fp-market-card-bg: var(--input-bg);
  --fp-market-card-border: var(--brand-farm-muted-border);
  --fp-market-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  --fp-panel-bg: var(--input-bg);
  --fp-panel-border: var(--border-color);
  --fp-panel-summary-bg: var(--table-row-zebra);
  --fp-panel-summary-hover: var(--brand-farm-hover-bg);
  --fp-panel-sticky-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  --fp-table-border: var(--border-color);
  --fp-table-row-hover: var(--table-row-hover);
  --fp-empty-bg: var(--table-row-zebra);
  --fp-empty-border: var(--border-color);
  --fp-tfoot-bg: var(--color-revenue-muted-bg);
  --fp-tfoot-border: var(--color-revenue-muted-border);
  --fp-line-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  --fp-plc-meta-sep: var(--text-secondary);
  --fp-plc-footer-border: var(--border-color);
  --fp-plc-qty-bg: var(--table-row-zebra);
  --fp-plc-qty-border: var(--border-color);
  --fp-mobile-total-bg: var(--fp-tfoot-bg);
  --fp-mobile-total-border: var(--fp-tfoot-border);

  /* Fresh produce quick-nav popover / FAB */
  --fp-qn-fab-border: var(--scroll-btn-border);
  --fp-qn-fab-bg: var(--btn-primary-bg);
  --fp-qn-fab-text: var(--btn-primary-text);
  --fp-qn-fab-shadow: var(--scroll-btn-shadow);
  --fp-qn-fab-focus-ring: var(--scroll-btn-focus-ring);
  --fp-qn-popover-bg: var(--bg-surface);
  --fp-qn-popover-border: var(--border-color);
  --fp-qn-popover-shadow: var(--dropdown-shadow);
  --fp-qn-menu-link: var(--text-primary);
  --fp-qn-menu-hover-bg: var(--fp-chip-hover-bg);
  --fp-qn-menu-hover-text: var(--text-primary);
  --fp-qn-menu-active-bg: var(--brand-farm-muted-bg);
  --fp-qn-menu-active-text: var(--brand-farm);
  --fp-qn-menu-code: var(--text-secondary);

  /* Django admin scrape-run status badges */
  --admin-status-success: var(--color-price-positive);
  --admin-status-warning: var(--color-warn);
  --admin-status-error: var(--color-error);
  --admin-status-neutral: var(--text-secondary);

  /* Account onboarding wizard rail */
  --onboarding-accent: #00aa55;
  --onboarding-accent-soft-bg: rgba(0, 170, 85, 0.12);
  --onboarding-rail-bg: var(--btn-icon-hover);
  --onboarding-rail-border: var(--border-color);
}

html[data-theme='light'] {
  --bg-main: #e8eaed;
  --bg-surface: var(--input-bg);
  --border-color: #dadce0;

  --text-primary: #1f1f1f;
  --text-secondary: #5f6368;
  --text-inverse: #ffffff;

  --accent-gradient: linear-gradient(90deg, #1a73e8, #8ab4f8);
  --accent-solid: #1a73e8;

  --btn-primary-bg: var(--accent-solid);
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #1557b0;
  --btn-secondary-bg: #e8eaed;
  --btn-secondary-text: #1f1f1f;
  --btn-secondary-hover: #dadce0;
  --btn-icon-hover: rgba(0, 0, 0, 0.06);

  --table-header-bg: var(--input-bg);
  --table-row-bg: var(--input-bg);
  --table-row-zebra: var(--input-bg);
  --table-row-hover: var(--btn-icon-hover);

  --input-bg: #ffffff;
  --input-border: #dadce0;
  --input-focus-border: #1a73e8;
  --input-focus-shadow: 0 0 0 3px rgba(26, 115, 232, 0.28), 0 0 14px rgba(26, 115, 232, 0.18);
  --input-error-shadow: 0 0 0 3px rgba(220, 38, 38, 0.32), 0 0 14px rgba(220, 38, 38, 0.14);
  --input-error-shadow-tight: 0 0 0 1px rgba(220, 38, 38, 0.28), 0 2px 10px rgba(220, 38, 38, 0.18);
  --fieldset-error-shadow: 0 2px 10px rgba(220, 38, 38, 0.12);

  --dropdown-shadow: 0 8px 28px rgba(60, 64, 67, 0.18);
  --backdrop-bg: rgba(0, 0, 0, 0.32);
  --shadow-sidebar: 4px 0 24px rgba(0, 0, 0, 0.08);
  --shadow-container: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-soft: var(--shadow-container);
  --shadow-banner: 0 2px 10px rgba(0, 0, 0, 0.12);

  --link-color: #1a73e8;
  --link-hover-color: #1557b0;
  --state-selected-border: rgba(26, 115, 232, 0.45);

  --tooltip-bg: var(--input-bg);
  --tooltip-text: var(--text-primary);
  --tooltip-shadow: var(--dropdown-shadow);

  --color-price-positive: #1b5e20;
  --color-price-negative: #b71c1c;
  --color-revenue: #1a5c2e;
  --color-revenue-strong: #14532d;
  --color-revenue-muted-bg: rgba(26, 92, 46, 0.08);
  --color-revenue-muted-border: #cfdad4;

  --brand-farm-hover-bg: #fff5eb;

  --headline-card-bg: var(--input-bg);
  --headline-card-border: var(--border-color);
  --headline-card-title: var(--text-secondary);
  --headline-card-price: var(--text-primary);

  --nav-cta-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);

  --color-error-bg: #ffebee;
  --color-error-border: #ef9a9a;
  --color-error-text: #b71c1c;
  --color-error-border-strong: #c62828;
  --color-error-muted-text: #6d1b1b;
  --color-error-divider: rgba(183, 28, 28, 0.25);
  --color-warn-border: rgba(230, 81, 0, 0.45);
  --color-warn-glow: rgba(230, 81, 0, 0.12);

  --verified-panel-bg: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
  --verified-panel-border: #81c784;
  --verified-panel-text: #1b5e20;
  --verified-panel-shadow: 0 1px 6px rgba(46, 125, 50, 0.12);
  --verified-section-bg: linear-gradient(180deg, #f1f8f4 0%, var(--input-bg) 48%);
  --verified-section-border: rgba(129, 199, 132, 0.65);

  --alert-success-bg: #e8f5e9;
  --alert-success-text: #1b5e20;
  --alert-success-border: #a5d6a7;
  --alert-error-bg: #ffebee;
  --alert-error-text: #b71c1c;
  --alert-error-border: #ef9a9a;
  --alert-info-bg: #e3f2fd;
  --alert-info-text: var(--link-color);
  --alert-info-border: #90caf9;

  --hint-info-bg: #e8f0fe;
  --hint-info-text: var(--link-color);
  --hint-info-border: rgba(26, 115, 232, 0.35);
  --hint-warn-bg: #ffebee;
  --hint-warn-text: #6d1b1b;

  --scroll-btn-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);

  --brand-farm-link: #c45d12;
  --brand-farm-link-hover: #9a3412;

  --fp-alert-bg: #fff8e6;
  --fp-alert-border: #f0c96a;
  --fp-alert-text: #7a4e00;
  --fp-loadshedding-band-bg: var(--color-error-bg);
  --fp-loadshedding-band-border: var(--color-error-border);
  --fp-loadshedding-title: var(--color-error-text);
  --fp-loadshedding-sub: var(--color-error-muted-text);
  --fp-chip-bg: var(--input-bg);
  --fp-chip-text: var(--text-primary);
  --fp-chip-hover-bg: var(--brand-farm-hover-bg);
  --fp-market-card-bg: var(--input-bg);
  --fp-market-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --fp-panel-bg: var(--input-bg);
  --fp-panel-border: var(--border-color);
  --fp-panel-summary-bg: var(--input-bg);
  --fp-panel-summary-hover: var(--brand-farm-hover-bg);
  --fp-panel-sticky-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
  --fp-table-border: var(--border-color);
  --fp-table-row-hover: var(--brand-farm-hover-bg);
  --fp-empty-bg: var(--input-bg);
  --fp-empty-border: var(--border-color);
  --fp-tfoot-bg: var(--color-revenue-muted-bg);
  --fp-tfoot-border: var(--color-revenue-muted-border);
  --fp-line-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  --fp-plc-meta-sep: var(--text-secondary);
  --fp-plc-footer-border: var(--border-color);
  --fp-plc-qty-bg: var(--btn-icon-hover);
  --fp-plc-qty-border: var(--border-color);
  --fp-mobile-total-bg: var(--fp-tfoot-bg);
  --fp-mobile-total-border: var(--fp-tfoot-border);

  color-scheme: light;
}

html[data-theme='dark'] {
  color-scheme: dark;
}