/*
 * Design tokens. Values inspired by a warm, calm palette; checked for WCAG AA:
 * - ink on canvas 17.9:1, ink-muted on canvas 6.4:1
 * - accent (#B5552F) with white text 4.9:1; dark accent (#D97757) on dark canvas 4.9:1
 */
:root {
  --canvas: #faf9f5;
  --surface: #ffffff;
  --surface-muted: #f3f1ea;
  --line: #e8e6dc;
  --line-strong: #d6d3c7;
  --ink: #141413;
  --ink-muted: #5e5d59;
  --accent: #b5552f;
  --accent-hover: #9e4827;
  --accent-soft: #c96442;
  --accent-tint: #f6e7df;
  /* Accent text on the tinted background: 5.1:1. */
  --accent-ink: #983f1e;
  --on-accent: #ffffff;
  --danger: #b42318;
  --danger-tint: #fdecea;
  --success: #3f6b4b;
  --success-tint: #e7f0e9;
  --observation: #c8102e;
  --focus-ring: #c96442;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --font-sans: 'Inter Variable', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Source Serif 4 Variable', 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}


:root[data-theme='dark'] {
  --canvas: #262624;
  --surface: #30302e;
  --surface-muted: #2b2b29;
  --line: #3e3e3a;
  --line-strong: #52524d;
  --ink: #f5f4ee;
  --ink-muted: #b7b5a9;
  --accent: #d97757;
  --accent-hover: #e38b6e;
  --accent-soft: #d97757;
  --accent-tint: #3d2e27;
  --accent-ink: #f0b8a0;
  --on-accent: #1a1a18;
  --danger: #f08a7e;
  --danger-tint: #3f2724;
  --success: #8fbf9a;
  --success-tint: #26352a;
  --observation: #ff6b6b;
  --focus-ring: #d97757;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --canvas: #262624;
    --surface: #30302e;
    --surface-muted: #2b2b29;
    --line: #3e3e3a;
    --line-strong: #52524d;
    --ink: #f5f4ee;
    --ink-muted: #b7b5a9;
    --accent: #d97757;
    --accent-hover: #e38b6e;
    --accent-soft: #d97757;
    --accent-tint: #3d2e27;
  --accent-ink: #f0b8a0;
    --on-accent: #1a1a18;
    --danger: #f08a7e;
    --danger-tint: #3f2724;
    --success: #8fbf9a;
    --success-tint: #26352a;
    --observation: #ff6b6b;
    --focus-ring: #d97757;
    color-scheme: dark;
  }
}

/* Status / badge tones: soft backgrounds, text ≥ 4.5:1 on its background in both themes. */
:root {
  --tone-neutral-bg: #efede6;
  --tone-neutral-fg: #4a4944;
  --tone-accent-bg: #f6e7df;
  --tone-accent-fg: #8f3f20;
  --tone-sand-bg: #f1eadb;
  --tone-sand-fg: #6b5a36;
  --tone-ochre-bg: #f3e6c8;
  --tone-ochre-fg: #6f5310;
  --tone-amber-bg: #f6e2c7;
  --tone-amber-fg: #7a4a0e;
  --tone-terracotta-bg: #f4ddd3;
  --tone-terracotta-fg: #8a3a1d;
  --tone-plum-bg: #ece0ea;
  --tone-plum-fg: #6a3b61;
  --tone-slate-bg: #e1e7ee;
  --tone-slate-fg: #3b5068;
  --tone-sage-bg: #e2ebdf;
  --tone-sage-fg: #3d5a37;
  --tone-olive-bg: #e8e8d3;
  --tone-olive-fg: #555522;
  --tone-gray-bg: #e8e7e3;
  --tone-gray-fg: #54534e;

  /* Grid ("hoja de pedidos") in the application look. */
  --grid-header-bg: #efece2;
  --grid-line: #ddd8ca;
  --grid-block-line: #b9b3a2;
  --grid-no-bg: #f3f1ea;
  --grid-active: #c96442;
  --grid-selection-bg: #f6e7df;
  --tabbar-height: 0px;
}

:root[data-theme='dark'] {
  --tone-neutral-bg: #3a3a37;
  --tone-neutral-fg: #dedcd2;
  --tone-accent-bg: #4a3128;
  --tone-accent-fg: #f0b8a0;
  --tone-sand-bg: #413a2c;
  --tone-sand-fg: #e6d6b0;
  --tone-ochre-bg: #443a22;
  --tone-ochre-fg: #ecd18f;
  --tone-amber-bg: #45351f;
  --tone-amber-fg: #f0c48c;
  --tone-terracotta-bg: #4a3027;
  --tone-terracotta-fg: #f1b59c;
  --tone-plum-bg: #40303e;
  --tone-plum-fg: #e5bfdd;
  --tone-slate-bg: #2f3945;
  --tone-slate-fg: #bdd0e6;
  --tone-sage-bg: #2f3b2d;
  --tone-sage-fg: #c1dcb9;
  --tone-olive-bg: #393a26;
  --tone-olive-fg: #dcdca6;
  --tone-gray-bg: #3a3a38;
  --tone-gray-fg: #d6d4cc;
  --grid-header-bg: #34342f;
  --grid-line: #45443f;
  --grid-block-line: #67655d;
  --grid-no-bg: #2d2d2b;
  --grid-active: #d97757;
  --grid-selection-bg: #3d2e27;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --tone-neutral-bg: #3a3a37;
    --tone-neutral-fg: #dedcd2;
    --tone-accent-bg: #4a3128;
    --tone-accent-fg: #f0b8a0;
    --tone-sand-bg: #413a2c;
    --tone-sand-fg: #e6d6b0;
    --tone-ochre-bg: #443a22;
    --tone-ochre-fg: #ecd18f;
    --tone-amber-bg: #45351f;
    --tone-amber-fg: #f0c48c;
    --tone-terracotta-bg: #4a3027;
    --tone-terracotta-fg: #f1b59c;
    --tone-plum-bg: #40303e;
    --tone-plum-fg: #e5bfdd;
    --tone-slate-bg: #2f3945;
    --tone-slate-fg: #bdd0e6;
    --tone-sage-bg: #2f3b2d;
    --tone-sage-fg: #c1dcb9;
    --tone-olive-bg: #393a26;
    --tone-olive-fg: #dcdca6;
    --tone-gray-bg: #3a3a38;
    --tone-gray-fg: #d6d4cc;
    --grid-header-bg: #34342f;
    --grid-line: #45443f;
    --grid-block-line: #67655d;
    --grid-no-bg: #2d2d2b;
    --grid-active: #d97757;
    --grid-selection-bg: #3d2e27;
  }
}