/* =========================================================================
   Fiagril Design System — Token Layers
   Layer 1: Primitives   (raw values, never used directly in components)
   Layer 2: Semantic     (role-based, responds to theme/direction/density)
   Layer 3: Component    (per-component overrides, inherit from semantic)
   ========================================================================= */

/* ---------- L1: PRIMITIVES ---------- */
:root {
  /* Neutrals (warm-tinted) */
  --p-neutral-0:   oklch(99.2% 0.004 95);
  --p-neutral-50:  oklch(97.5% 0.006 95);
  --p-neutral-100: oklch(94.5% 0.008 95);
  --p-neutral-200: oklch(89.0% 0.010 95);
  --p-neutral-300: oklch(80.0% 0.010 95);
  --p-neutral-400: oklch(66.0% 0.012 95);
  --p-neutral-500: oklch(52.0% 0.012 95);
  --p-neutral-600: oklch(42.0% 0.012 95);
  --p-neutral-700: oklch(32.0% 0.012 95);
  --p-neutral-800: oklch(22.0% 0.010 95);
  --p-neutral-900: oklch(14.5% 0.008 95);
  --p-neutral-950: oklch(9.0%  0.006 95);

  /* Green — brand base (agro) */
  --p-green-50:  oklch(97.0% 0.018 150);
  --p-green-100: oklch(93.0% 0.035 150);
  --p-green-200: oklch(86.0% 0.060 150);
  --p-green-300: oklch(76.0% 0.095 150);
  --p-green-400: oklch(66.0% 0.125 150);
  --p-green-500: oklch(56.0% 0.140 150);
  --p-green-600: oklch(48.0% 0.135 150);
  --p-green-700: oklch(40.0% 0.115 150);
  --p-green-800: oklch(32.0% 0.090 150);
  --p-green-900: oklch(24.0% 0.065 150);
  --p-green-950: oklch(16.0% 0.045 150);

  /* Amber — signal / data */
  --p-amber-50:  oklch(97.5% 0.025 80);
  --p-amber-100: oklch(94.0% 0.050 80);
  --p-amber-200: oklch(88.0% 0.090 80);
  --p-amber-300: oklch(80.0% 0.130 80);
  --p-amber-400: oklch(74.0% 0.155 80);
  --p-amber-500: oklch(68.0% 0.165 80);
  --p-amber-600: oklch(58.0% 0.150 80);
  --p-amber-700: oklch(48.0% 0.125 80);
  --p-amber-800: oklch(38.0% 0.095 80);
  --p-amber-900: oklch(28.0% 0.070 80);

  /* Terracotta — warm accent (Terra) */
  --p-terra-50:  oklch(97.0% 0.015 40);
  --p-terra-100: oklch(93.0% 0.030 40);
  --p-terra-200: oklch(85.0% 0.055 40);
  --p-terra-300: oklch(75.0% 0.085 40);
  --p-terra-400: oklch(65.0% 0.115 40);
  --p-terra-500: oklch(57.0% 0.130 40);
  --p-terra-600: oklch(48.0% 0.120 40);
  --p-terra-700: oklch(40.0% 0.100 40);
  --p-terra-800: oklch(32.0% 0.075 40);
  --p-terra-900: oklch(24.0% 0.055 40);

  /* Indigo — tech accent (Campo) */
  --p-indigo-50:  oklch(97.0% 0.015 265);
  --p-indigo-100: oklch(93.0% 0.035 265);
  --p-indigo-200: oklch(86.0% 0.070 265);
  --p-indigo-300: oklch(76.0% 0.110 265);
  --p-indigo-400: oklch(65.0% 0.150 265);
  --p-indigo-500: oklch(55.0% 0.175 265);
  --p-indigo-600: oklch(47.0% 0.170 265);
  --p-indigo-700: oklch(39.0% 0.145 265);
  --p-indigo-800: oklch(31.0% 0.110 265);
  --p-indigo-900: oklch(24.0% 0.085 265);

  /* Semantic status (stable across directions) */
  --p-red-500:    oklch(58.0% 0.185 25);
  --p-red-600:    oklch(50.0% 0.175 25);
  --p-red-100:    oklch(94.0% 0.035 25);
  --p-yellow-500: oklch(78.0% 0.150 90);
  --p-yellow-100: oklch(95.0% 0.055 90);
  --p-blue-500:   oklch(60.0% 0.145 235);
  --p-blue-100:   oklch(95.0% 0.030 235);

  /* Type scale (px → rem, 16 base) */
  --ds-font-size-11: 0.6875rem;
  --ds-font-size-12: 0.75rem;
  --ds-font-size-13: 0.8125rem;
  --ds-font-size-14: 0.875rem;
  --ds-font-size-15: 0.9375rem;
  --ds-font-size-16: 1rem;
  --ds-font-size-18: 1.125rem;
  --ds-font-size-20: 1.25rem;
  --ds-font-size-24: 1.5rem;
  --ds-font-size-30: 1.875rem;
  --ds-font-size-36: 2.25rem;
  --ds-font-size-48: 3rem;
  --ds-font-size-60: 3.75rem;

  --ds-font-weight-regular: 400;
  --ds-font-weight-medium:  500;
  --ds-font-weight-semibold: 600;
  --ds-font-weight-bold: 700;

  --ds-line-height-tight: 1.2;
  --ds-line-height-snug: 1.35;
  --ds-line-height-normal: 1.5;
  --ds-line-height-relaxed: 1.65;

  --ds-font-family-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ds-font-family-display: 'Poppins', sans-serif;
  --ds-font-family-alt: 'InterDisplay', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --ds-font-family-alt-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ds-font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Spacing scale (4px base) */
  --ds-space-0: 0;
  --ds-space-1: 2px;
  --ds-space-2: 4px;
  --ds-space-3: 8px;
  --ds-space-4: 12px;
  --ds-space-5: 16px;
  --ds-space-6: 20px;
  --ds-space-7: 24px;
  --ds-space-8: 32px;
  --ds-space-9: 40px;
  --ds-space-10: 48px;
  --ds-space-11: 64px;
  --ds-space-12: 80px;

  /* Radius */
  --ds-radius-none: 0;
  --ds-radius-xs: 2px;
  --ds-radius-sm: 4px;
  --ds-radius-md: 6px;
  --ds-radius-lg: 10px;
  --ds-radius-xl: 14px;
  --ds-radius-2xl: 20px;
  --ds-radius-full: 9999px;

  /* Elevation (neutral) */
  --ds-shadow-0: none;
  --ds-shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.04), 0 1px 1px 0 rgb(0 0 0 / 0.03);
  --ds-shadow-2: 0 2px 4px -1px rgb(0 0 0 / 0.06), 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --ds-shadow-3: 0 6px 12px -2px rgb(0 0 0 / 0.08), 0 3px 6px -2px rgb(0 0 0 / 0.05);
  --ds-shadow-4: 0 14px 24px -4px rgb(0 0 0 / 0.10), 0 6px 10px -4px rgb(0 0 0 / 0.05);
  --ds-shadow-focus: 0 0 0 3px var(--ds-color-focus-ring, rgb(16 120 80 / 0.35));

  /* Transition */
  --ds-duration-fast: 120ms;
  --ds-duration-base: 200ms;
  --ds-duration-slow: 320ms;
  --ds-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --ds-easing-emphasize: cubic-bezier(0.2, 0, 0, 1.2);
}

/* =========================================================================
   L2: SEMANTIC TOKENS — Light theme
   Default direction = Campo
   ========================================================================= */
:root,
[data-theme='light'] {
  --ds-color-bg-base: var(--p-neutral-50);
  --ds-color-bg-subtle: var(--p-neutral-100);
  --ds-color-surface: var(--p-neutral-0);
  --ds-color-surface-raised: var(--p-neutral-0);
  --ds-color-surface-sunken: var(--p-neutral-100);
  --ds-color-surface-inverse: var(--p-neutral-900);

  --ds-color-border-subtle: var(--p-neutral-200);
  --ds-color-border-default: var(--p-neutral-300);
  --ds-color-border-strong: var(--p-neutral-400);
  --ds-color-border-inverse: var(--p-neutral-800);

  --ds-color-text-primary: var(--p-neutral-900);
  --ds-color-text-secondary: var(--p-neutral-600);
  --ds-color-text-tertiary: var(--p-neutral-500);
  --ds-color-text-disabled: var(--p-neutral-400);
  --ds-color-text-inverse: var(--p-neutral-0);
  --ds-color-text-link: var(--ds-color-brand);

  --ds-color-brand: var(--p-green-600);
  --ds-color-brand-hover: var(--p-green-700);
  --ds-color-brand-active: var(--p-green-800);
  --ds-color-brand-subtle: var(--p-green-100);
  --ds-color-brand-on: var(--p-neutral-0);

  --ds-color-accent: var(--p-indigo-500);
  --ds-color-accent-subtle: var(--p-indigo-100);
  --ds-color-accent-on: var(--p-neutral-0);

  --ds-color-success: var(--p-green-600);
  --ds-color-success-subtle: var(--p-green-100);
  --ds-color-warning: var(--p-amber-600);
  --ds-color-warning-subtle: var(--p-amber-100);
  --ds-color-danger: var(--p-red-600);
  --ds-color-danger-subtle: var(--p-red-100);
  --ds-color-info: var(--p-blue-500);
  --ds-color-info-subtle: var(--p-blue-100);

  --ds-color-focus-ring: oklch(55% 0.13 150 / 0.42);

  color-scheme: light;
}

/* Dark theme */
[data-theme='dark'] {
  --ds-color-bg-base: var(--p-neutral-950);
  --ds-color-bg-subtle: var(--p-neutral-900);
  --ds-color-surface: var(--p-neutral-900);
  --ds-color-surface-raised: var(--p-neutral-800);
  --ds-color-surface-sunken: var(--p-neutral-950);
  --ds-color-surface-inverse: var(--p-neutral-0);

  --ds-color-border-subtle: var(--p-neutral-800);
  --ds-color-border-default: var(--p-neutral-700);
  --ds-color-border-strong: var(--p-neutral-600);
  --ds-color-border-inverse: var(--p-neutral-200);

  --ds-color-text-primary: var(--p-neutral-50);
  --ds-color-text-secondary: var(--p-neutral-300);
  --ds-color-text-tertiary: var(--p-neutral-400);
  --ds-color-text-disabled: var(--p-neutral-600);
  --ds-color-text-inverse: var(--p-neutral-900);

  --ds-color-brand: var(--p-green-400);
  --ds-color-brand-hover: var(--p-green-300);
  --ds-color-brand-active: var(--p-green-200);
  --ds-color-brand-subtle: oklch(32% 0.09 150 / 0.5);
  --ds-color-brand-on: var(--p-neutral-950);

  --ds-color-accent: var(--p-indigo-400);
  --ds-color-accent-subtle: oklch(31% 0.11 265 / 0.5);

  --ds-color-success: var(--p-green-400);
  --ds-color-success-subtle: oklch(32% 0.09 150 / 0.35);
  --ds-color-warning: var(--p-amber-400);
  --ds-color-warning-subtle: oklch(38% 0.095 80 / 0.35);
  --ds-color-danger: oklch(68% 0.18 25);
  --ds-color-danger-subtle: oklch(35% 0.10 25 / 0.35);
  --ds-color-info: oklch(70% 0.15 235);
  --ds-color-info-subtle: oklch(35% 0.08 235 / 0.35);

  color-scheme: dark;
}

/* =========================================================================
   DIRECTIONS — override a small set of semantic + component tokens
   ========================================================================= */

/* ---- Terra: corporativo clássico ---- */
[data-direction='terra'] {
  --ds-radius-button: var(--ds-radius-sm);
  --ds-radius-card: var(--ds-radius-md);
  --ds-radius-input: var(--ds-radius-sm);
  --ds-font-family-display: 'Inter', sans-serif;
  --ds-direction-density-bias: 0;
}
[data-direction='terra'][data-theme='light'],
[data-direction='terra']:not([data-theme='dark']) {
  --ds-color-brand: var(--p-green-800);
  --ds-color-brand-hover: var(--p-green-900);
  --ds-color-brand-active: oklch(20% 0.055 150);
  --ds-color-brand-subtle: var(--p-green-100);
  --ds-color-accent: var(--p-terra-600);
  --ds-color-accent-subtle: var(--p-terra-100);
  --ds-color-bg-base: oklch(98.0% 0.006 80);
  --ds-color-bg-subtle: oklch(95.5% 0.010 80);
}
[data-direction='terra'][data-theme='dark'] {
  --ds-color-brand: var(--p-green-300);
  --ds-color-accent: var(--p-terra-400);
}

/* ---- Campo: tech moderno (default) ---- */
[data-direction='campo'],
:root:not([data-direction]) {
  --ds-radius-button: var(--ds-radius-md);
  --ds-radius-card: var(--ds-radius-lg);
  --ds-radius-input: var(--ds-radius-md);
  --ds-font-family-display: 'Inter', sans-serif;
}

/* ---- Safra: denso/funcional ---- */
[data-direction='safra'] {
  --ds-radius-button: var(--ds-radius-xs);
  --ds-radius-card: var(--ds-radius-sm);
  --ds-radius-input: var(--ds-radius-xs);
  --ds-font-family-display: 'JetBrains Mono', monospace;
}
[data-direction='safra'][data-theme='light'],
[data-direction='safra']:not([data-theme='dark']) {
  --ds-color-brand: var(--p-green-700);
  --ds-color-accent: var(--p-amber-600);
  --ds-color-accent-subtle: var(--p-amber-100);
  --ds-color-bg-base: var(--p-neutral-50);
}
[data-direction='safra'][data-theme='dark'] {
  --ds-color-bg-base: oklch(10% 0.010 150);
  --ds-color-surface: oklch(13% 0.012 150);
  --ds-color-brand: var(--p-green-300);
  --ds-color-accent: var(--p-amber-400);
}

/* =========================================================================
   DENSITY — adjusts component-scoped sizing tokens
   ========================================================================= */
[data-density='comfy'],
:root:not([data-density]) {
  --ds-control-height-sm: 28px;
  --ds-control-height-md: 36px;
  --ds-control-height-lg: 44px;
  --ds-control-padding-x: 14px;
  --ds-row-height: 44px;
  --ds-card-padding: 20px;
  --ds-section-gap: 24px;
}
[data-density='compact'] {
  --ds-control-height-sm: 22px;
  --ds-control-height-md: 28px;
  --ds-control-height-lg: 36px;
  --ds-control-padding-x: 10px;
  --ds-row-height: 32px;
  --ds-card-padding: 14px;
  --ds-section-gap: 16px;
}
[data-direction='safra'] {
  --ds-control-height-md: 26px;
  --ds-row-height: 30px;
  --ds-card-padding: 12px;
}

/* ==========================================================================
   MAP TOKENS
   Tokens semânticos para componentes sobre mapas (overlays, toolbars, popups,
   legendas, marcadores). Respondem ao tema (light/dark) e direction.
   ========================================================================== */
:root {
  /* Overlay panels (zoom, action bar, legend, toolbar, popup) */
  --ds-map-overlay-bg:       var(--ds-color-surface);
  --ds-map-overlay-border:   var(--ds-color-border-default);
  --ds-map-overlay-shadow:   var(--ds-shadow-3);
  --ds-map-overlay-radius:   var(--ds-radius-lg);

  /* Popup específico */
  --ds-map-popup-shadow:     var(--ds-shadow-4);
  --ds-map-popup-radius:     var(--ds-radius-card);
  --ds-map-popup-width:      252px;

  /* Toolbar */
  --ds-map-toolbar-width:    220px;
  --ds-map-toolbar-handle-bg: var(--ds-color-bg-subtle);

  /* Action buttons */
  --ds-map-btn-height:       34px;
  --ds-map-btn-radius:       var(--ds-radius-lg);
  --ds-map-btn-font-size:    var(--ds-font-size-12);

  /* Toolbar inputs */
  --ds-map-input-height:     27px;
  --ds-map-input-radius:     var(--ds-radius-md);
  --ds-map-input-bg:         var(--ds-color-bg-subtle);
  --ds-map-input-font-size:  var(--ds-font-size-11);

  /* Zoom control */
  --ds-map-zoom-btn-size:    36px;

  /* Marker */
  --ds-map-marker-sm:        22px;
  --ds-map-marker-md:        28px;
  --ds-map-marker-lg:        36px;
  --ds-map-marker-brand:     var(--ds-color-brand);
  --ds-map-marker-warning:   var(--ds-color-warning);
  --ds-map-marker-danger:    var(--ds-color-danger);
  --ds-map-marker-accent:    var(--ds-color-accent);

  /* Heatmap / polygon scale (verde → âmbar → vermelho) */
  --ds-map-heat-high:    oklch(56% 0.140 150);   /* verde — alta produtividade */
  --ds-map-heat-mid:     oklch(68% 0.165 80);    /* âmbar — média */
  --ds-map-heat-low:     oklch(58% 0.185 25);    /* vermelho — baixa */
  --ds-map-heat-none:    var(--ds-color-border-strong);  /* sem dados */
  --ds-map-heat-fill-opacity: 0.42;

  /* Legend */
  --ds-map-legend-swatch-size: 10px;
  --ds-map-legend-font-size:   var(--ds-font-size-11);
}

/* Dark theme adjustments */
[data-theme='dark'] {
  --ds-map-heat-high:   oklch(66% 0.130 150);
  --ds-map-heat-mid:    oklch(74% 0.155 80);
  --ds-map-heat-low:    oklch(65% 0.175 25);
}

/* Direction overrides for map overlays */
[data-direction='terra'] {
  --ds-map-btn-radius:     var(--ds-radius-sm);
  --ds-map-overlay-radius: var(--ds-radius-sm);
  --ds-map-popup-radius:   var(--ds-radius-md);
  --ds-map-input-radius:   var(--ds-radius-xs);
}
[data-direction='safra'] {
  --ds-map-btn-radius:     var(--ds-radius-xs);
  --ds-map-overlay-radius: var(--ds-radius-xs);
  --ds-map-popup-radius:   var(--ds-radius-sm);
  --ds-map-input-radius:   var(--ds-radius-xs);
  --ds-map-btn-font-size:  var(--ds-font-size-11);
}

/* ==========================================================================
   MAP COMPONENT TOKENS — v1.1 (Maio 2026)
   Tokens para os 12 novos componentes de mapa
   ========================================================================== */
:root {
  /* MeasureTool */
  --ds-map-measure-stroke:       var(--ds-color-brand);
  --ds-map-measure-result-bg:    var(--ds-color-surface-inverse);
  --ds-map-measure-result-color: var(--ds-color-text-inverse);

  /* DrawTool */
  --ds-map-draw-preview-stroke:   var(--ds-color-brand);
  --ds-map-draw-vertex-fill:      var(--ds-color-brand);
  --ds-map-draw-delete-stroke:    var(--ds-color-danger);
  --ds-map-draw-delete-fill:      var(--ds-color-danger-subtle);

  /* LayerPanel */
  --ds-map-panel-width:          240px;
  --ds-map-panel-bg:             var(--ds-color-surface);
  --ds-map-panel-shadow:         var(--ds-shadow-4);
  --ds-map-panel-slide-duration: var(--ds-duration-slow);

  /* Timeline */
  --ds-map-timeline-height:      52px;
  --ds-map-timeline-track-h:     4px;
  --ds-map-timeline-thumb-size:  14px;
  --ds-map-timeline-bg:          var(--ds-color-surface);
  --ds-map-timeline-filled:      var(--ds-color-brand);
  --ds-map-timeline-tick-color:  var(--ds-color-border-strong);

  /* SearchBar */
  --ds-map-search-width:           280px;
  --ds-map-search-collapsed-size:  34px;
  --ds-map-search-expand-duration: var(--ds-duration-base);
}

/* ==========================================================================
   CHART TOKENS
   Paleta semântica para séries de dados, grid e eixos.
   Responde automaticamente ao tema (light/dark) via tokens semânticos.
   ========================================================================== */
:root {
  --ds-chart-series-1: var(--ds-color-brand);
  --ds-chart-series-2: var(--ds-color-info);
  --ds-chart-series-3: var(--ds-color-warning);
  --ds-chart-series-4: var(--ds-color-danger);
  --ds-chart-series-5: oklch(55% 0.16 300);   /* purple */
  --ds-chart-series-6: oklch(65% 0.14 180);   /* teal   */
  --ds-chart-series-7: oklch(68% 0.14 40);    /* orange */
  --ds-chart-series-8: oklch(55% 0.13 230);   /* indigo */
  --ds-chart-grid:     var(--ds-color-border-subtle);
  --ds-chart-axis:     var(--ds-color-text-tertiary);
  --ds-chart-bg:       var(--ds-color-surface);
}

/* Chart series adapt to dark theme automatically via semantic token refs.
   Override here only if a specific hue needs adjustment in dark mode. */
[data-theme='dark'] {
  --ds-chart-series-5: oklch(65% 0.16 300);
  --ds-chart-series-6: oklch(72% 0.14 180);
  --ds-chart-series-7: oklch(75% 0.14 40);
  --ds-chart-series-8: oklch(65% 0.13 230);
}