/* Kalnech — tokens de diseño. Tema oscuro por defecto; claro con [data-theme="claro"]. */
:root,
[data-theme="oscuro"] {
  color-scheme: dark;
  --bg: #121413;
  --surface: #1B1D1C;
  --field: #121413;
  --border: #2B2E2C;
  --text: #F2F1EC;
  --text-muted: #A1A7A2;
  --placeholder: #6C736E;
  --brand: #34C98F;
  --on-brand: #121413;
  --brand-text: #34C98F;
  --brand-soft: #1E3A2E;
  --negative: #F07A62;
  --segment-on: #F2F1EC;
  --on-segment: #121413;
  --focus: #34C98F;
  --focus-halo: rgba(52, 201, 143, 0.15);
  --data-profit: #1E9E6C;
  --data-vat: #4A82D2;
  --data-fees: #D9573F;
  --data-product: #9077DA;
  --data-shipping: #C4870C;
}

[data-theme="claro"] {
  color-scheme: light;
  --bg: #F7F6F2;
  --surface: #FFFFFF;
  --field: #FFFFFF;
  --border: #E4E1D9;
  --text: #141615;
  --text-muted: #5C615D;
  --placeholder: #8A8F8B;
  --brand: #34C98F;
  --on-brand: #121413;
  --brand-text: #0E7A4E;
  --brand-soft: #DDF5EA;
  --negative: #C2402B;
  --segment-on: #141615;
  --on-segment: #FFFFFF;
  --focus: #14935F;
  --focus-halo: rgba(20, 147, 95, 0.15);
  --data-profit: #14935F;
  --data-vat: #3F78C9;
  --data-fees: #E0533C;
  --data-product: #8257C9;
  --data-shipping: #D9960A;
}

:root {
  --font-display: "Space Grotesk", system-ui, sans-serif;
  --font-sans: Inter, system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  --radius-sm: 7px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --control-h: 48px;
  --target-min: 44px;
  --content-max: 1280px;
}