/* ============================================================
   AgriMap Design System — CSS Custom Properties
   ============================================================
   Source of truth for all visual design tokens.
   Imported by index.html and contact.html.

   Documentation: docs/work-in-progress/GRAPHIC-CHARTER.md
   Version: 1.0.0
   Last updated: 2026-02-17
   ============================================================ */

:root {
  /* ========================================
     COLORS — Primitives
     ======================================== */

  /* White & Black */
  --color-white: #ffffff;
  --color-black: #000000;

  /* Blues */
  --color-blue-50: #f0f7ff;
  --color-blue-100: #e3f2fd;
  --color-blue-200: #bbdefb;
  --color-blue-300: #90caf9;
  --color-blue-400: #5dade2;
  --color-blue-500: #3498db;
  --color-blue-600: #2980b9;
  --color-blue-700: #2471a3;
  --color-blue-800: #1a5276;
  --color-blue-900: #154360;

  /* Grays (Neutral) */
  --color-gray-50: #f8f9fa;
  --color-gray-100: #f0f0f0;
  --color-gray-150: #eeeeee;
  --color-gray-200: #ecf0f1;
  --color-gray-300: #dde1e3;
  --color-gray-400: #bdc3c7;
  --color-gray-500: #95a5a6;
  --color-gray-600: #7f8c8d;
  --color-gray-700: #34495e;
  --color-gray-800: #2c3e50;
  --color-gray-900: #1a252f;

  /* Greens (50-200: Material Design, 400+: Flat UI / Material mix) */
  --color-green-50: #E8F5E9;
  --color-green-100: #C8E6C9;
  --color-green-400: #2ecc71;
  --color-green-500: #27ae60;
  --color-green-600: #2E7D32;
  --color-green-700: #1B5E20;

  /* Reds */
  --color-red-400: #E53935;
  --color-red-500: #e74c3c;
  --color-red-600: #c0392b;

  /* Oranges */
  --color-orange-400: #FF9800;
  --color-orange-500: #f39c12;
  --color-orange-600: #e67e22;
  --color-orange-700: #FF6F00;
  --color-orange-800: #d35400;

  /* Yellows */
  --color-yellow-50: #fff8e1;
  --color-yellow-400: #FFC107;
  --color-yellow-500: #f1c40f;

  /* Purples */
  --color-purple-300: #BA68C8;
  --color-purple-400: #8e44ad;
  --color-purple-500: #667eea;
  --color-purple-600: #764ba2;
  --color-purple-700: #7B1FA2;
  --color-purple-800: #4A148C;
  --color-purple-900: #311B92;

  /* Teals */
  --color-teal-300: #26A69A;
  --color-teal-400: #00897B;
  --color-teal-500: #1abc9c;
  --color-teal-600: #16a085;
  --color-teal-700: #00695C;

  /* Cyans */
  --color-cyan-400: #00BCD4;
  --color-cyan-500: #00ACC1;

  /* Pinks */
  --color-pink-400: #AD1457;
  --color-pink-500: #CE93D8;
  --color-pink-600: #F48FB1;

  /* ========================================
     COLORS — Semantic
     ======================================== */

  /* Backgrounds */
  --color-bg-primary: var(--color-white);
  --color-bg-secondary: var(--color-gray-50);
  --color-bg-tertiary: var(--color-gray-100);
  --color-bg-hover: var(--color-blue-50);
  --color-bg-overlay: rgba(255, 255, 255, 0.9);
  --color-bg-overlay-strong: rgba(255, 255, 255, 0.95);
  --color-bg-tooltip: var(--color-gray-800);

  /* Text */
  --color-text-primary: var(--color-gray-800);     /* #2c3e50 */
  --color-text-secondary: var(--color-gray-700);    /* #34495e */
  --color-text-muted: var(--color-gray-600);        /* #7f8c8d */
  --color-text-disabled: var(--color-gray-500);     /* #95a5a6 */
  --color-text-inverted: var(--color-white);
  --color-text-inverted-strong: rgba(255, 255, 255, 0.9);
  --color-text-inverted-muted: rgba(255, 255, 255, 0.7);
  --color-text-inverted-subtle: rgba(255, 255, 255, 0.5);
  --color-text-inverted-faint: rgba(255, 255, 255, 0.3);
  --color-text-link: var(--color-blue-500);         /* #3498db */

  /* Interactive */
  --color-interactive: var(--color-blue-500);       /* #3498db */
  --color-interactive-hover: var(--color-blue-600); /* #2980b9 */
  --color-interactive-focus: rgba(52, 152, 219, 0.35);
  --color-interactive-disabled: var(--color-gray-400);

  /* Borders */
  --color-border-primary: var(--color-gray-200);    /* #ecf0f1 */
  --color-border-secondary: var(--color-gray-300);  /* #dde1e3 */
  --color-border-subtle: var(--color-gray-400);     /* #bdc3c7 */
  --color-border-inverted: rgba(255, 255, 255, 0.15);

  /* Status */
  --color-success: var(--color-green-500);          /* #27ae60 */
  --color-success-bg: var(--color-green-50);         /* #E8F5E9 */
  --color-warning: var(--color-orange-500);         /* #f39c12 */
  --color-error: var(--color-red-500);              /* #e74c3c */
  --color-info: var(--color-blue-500);              /* #3498db */

  /* Brand */
  --color-brand-primary: var(--color-blue-500);
  --color-brand-secondary: var(--color-purple-500);
  --color-brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

  /* FranceConnect (external brand) */
  --color-fc-primary: #0053b3;
  --color-fc-hover: #003d82;

  /* Confidence (for JS-rendered UI) */
  --color-confidence-high: #43A047;
  --color-confidence-medium: #FB8C00;
  --color-confidence-low: #E53935;

  /* Warning banners (email verification, etc.) */
  --color-warning-banner-bg-start: #fff3cd;
  --color-warning-banner-bg-end: #ffeeba;
  --color-warning-banner-border: #f0c36d;
  --color-warning-banner-text: #856404;

  /* ========================================
     CHART COLORS
     ======================================== */

  /* Sequential palette (RPG crops, generic series) */
  --color-chart-1: #2ecc71;
  --color-chart-2: #3498db;
  --color-chart-3: #e67e22;
  --color-chart-4: #9b59b6;
  --color-chart-5: #1abc9c;
  --color-chart-6: #e74c3c;
  --color-chart-7: #f1c40f;
  --color-chart-8: #34495e;
  --color-chart-9: #95a5a6;
  --color-chart-10: #d35400;

  /* PLU zone colors */
  --color-plu-a: #27ae60;
  --color-plu-n: #2ecc71;
  --color-plu-u: #e74c3c;
  --color-plu-au: #f39c12;
  --color-plu-auc: #e67e22;

  /* Soil composition colors */
  --color-sol-clay: #C8553D;
  --color-sol-silt: #F0C987;
  --color-sol-sand: #FFE8A3;

  /* ========================================
     TYPOGRAPHY
     ======================================== */

  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'Courier New', Courier, monospace;

  /* Type scale */
  --font-size-2xs: 9px;
  --font-size-xs: 10px;
  --font-size-sm: 11px;
  --font-size-base: 12px;
  --font-size-md: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 15px;
  --font-size-2xl: 16px;
  --font-size-3xl: 18px;
  --font-size-4xl: 22px;
  --font-size-5xl: 28px;

  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Line heights */
  --line-height-tight: 1;
  --line-height-snug: 1.3;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.5;

  /* Letter spacing */
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.5px;

  /* ========================================
     SPACING (4px base unit)
     ======================================== */

  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 20px;
  --space-10: 24px;
  --space-12: 32px;
  --space-14: 40px;

  /* ========================================
     BORDERS & RADIUS
     ======================================== */

  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 20px;
  --radius-full: 24px;
  --radius-circle: 50%;

  --border-width-thin: 1px;
  --border-width-medium: 2px;

  /* ========================================
     SHADOWS
     ======================================== */

  --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 2px 12px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 10px 40px rgba(0, 0, 0, 0.2);
  --shadow-focus: 0 4px 20px rgba(52, 152, 219, 0.35);
  --shadow-focus-brand: 0 0 0 3px rgba(102, 126, 234, 0.15);
  --shadow-hover-brand: 0 4px 12px rgba(102, 126, 234, 0.4);
  --shadow-tooltip: 0 3px 10px rgba(0, 0, 0, 0.3);
  --shadow-panel-right: -2px 0 12px rgba(0, 0, 0, 0.15);

  /* ========================================
     MOTION
     ======================================== */

  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.25s;
  --ease-default: ease;
  --ease-in-out: ease-in-out;

  /* ========================================
     Z-INDEX SCALE
     ======================================== */

  --z-base: 1;
  --z-panel: 1;
  --z-overlay: 1000;
  --z-panel-right: 1001;
  --z-onboarding: 2000;

  /* ========================================
     LAYOUT DIMENSIONS
     ======================================== */

  --width-panel-left: 300px;
  --width-panel-right: 360px;
  --width-search-bar: 340px;
  --width-search-bar-focus: 380px;
  --width-legend-collapsed: 100px;
  --width-panel-collapsed: 120px;
  --width-tooltip-min: 280px;
  --width-tooltip-max: 320px;
  --width-popup-max: 300px;
  --width-elevation-min: 220px;
  --height-search-btn: 34px;
  --height-nav-btn: 29px;
  --height-textarea-min: 150px;
}

/* ============================================================
   BASE RESET & DEFAULTS
   ============================================================ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ============================================================
   FOCUS STYLES (Accessibility)
   ============================================================ */

:focus-visible {
  outline: var(--border-width-medium) solid var(--color-interactive);
  outline-offset: var(--space-1);
}

button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}