/* Design tokens. The same design system as the Arrhytnet implant-sheets web (base, layout and
   components are copied from it); only the palette changes, to E2's.

   Brand colours: the lime of the "e2" logo and the dark green of the desktop program's
   «Subir a BC» button. The variables keep the names of the stock web (--navy, --red) so its CSS
   works untouched: here --navy is the dark green of the sidebar and --red is the call to action
   (green, not red: in this web the main action is uploading, not a warning).

   Production gets its own red (--prod), and only production: it is the one place where a click
   writes into E2's real accounting. */

:root {
  color-scheme: light;

  --navy: #17352a;
  --navy-deep: #0f241c;
  --red: #1b7f3b;
  --red-deep: #166b31;
  --lime: #97c11f;

  --prod: #b3261e;
  --prod-soft: #fde9e8;

  --bg: #f3f5f2;
  --surface: #ffffff;
  --surface-muted: #f7f9f6;
  --text: #18201b;
  --muted: #66706a;
  --border: #e2e7e2;
  --border-strong: #cbd4cc;

  --primary: #1f5d3c;
  --primary-hover: #17482e;
  --primary-soft: #e8f2ec;
  --on-primary: #ffffff;

  --warn-bg: #fff6dc;
  --warn-border: #efc04a;
  --warn-text: #7a5300;
  --ok-bg: #e4f6ec;
  --ok-text: #17693a;
  --danger-bg: #fde9e8;
  --danger-text: #a3201b;
  --info-bg: #e7effd;
  --info-text: #1f4f9c;

  /* Confidence of each field read, as in the desktop table: colour only where to look. */
  --conf-media-bg: #fff4cc;
  --conf-baja-bg: #ffe2c2;
  --conf-nula-bg: #ffd9d6;

  --sidebar-bg: linear-gradient(180deg, #1d4434 0%, #0f241c 100%);
  --sidebar-text: #c4d6cb;
  --sidebar-text-strong: #ffffff;
  --sidebar-hover: rgba(255, 255, 255, .08);
  --sidebar-active: rgba(255, 255, 255, .14);

  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(24, 32, 27, .05);
  --shadow: 0 1px 2px rgba(24, 32, 27, .05), 0 4px 14px rgba(24, 32, 27, .06);
  --shadow-lg: 0 18px 44px rgba(24, 32, 27, .18);
  --focus-ring: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --sidebar-width: 268px;
  --topbar-height: 58px;
  --tabbar-height: 64px;
  --page-width: 1240px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0d110f;
  --surface: #161c18;
  --surface-muted: #1b231e;
  --text: #e6ece8;
  --muted: #98a59d;
  --border: #26302a;
  --border-strong: #36433b;

  /* The dark green does not read on a dark background: same hue, with light. */
  --primary: #6fcf97;
  --primary-hover: #8ad9aa;
  --primary-soft: #1d2f24;
  --on-primary: #0d110f;

  --prod-soft: #3a1c1b;

  --warn-bg: #3a2f12;
  --warn-border: #a8822b;
  --warn-text: #f3cd77;
  --ok-bg: #14301f;
  --ok-text: #8fdcab;
  --danger-bg: #3a1c1b;
  --danger-text: #f6a7a3;
  --info-bg: #172540;
  --info-text: #9cc0f5;

  --conf-media-bg: #3a3313;
  --conf-baja-bg: #40280f;
  --conf-nula-bg: #47201d;

  --sidebar-bg: linear-gradient(180deg, #13261d 0%, #0d110f 100%);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .55);
}