/*
 * Téma Záhady vody: podmořský svět, svítící tyrkysové nadpisy, skleněné panely (vzhled převzatý z prezentace).
 * Jen hodnoty proměnných a dekorace – tvary a chování určuje /core/css/base.css. Seznam proměnných: docs/temata.md.
 */

:root {
  color-scheme: dark;

  /* Pozadí stránky */
  --bg: #021a2e;
  --bg-image: linear-gradient(180deg, rgba(2, 26, 46, 0) 0, rgba(2, 26, 46, 0) 14vw, #021a2e 30.5vw), url('/img/bg.jpg');
  --bg-size: 100% auto;
  --bg-repeat: no-repeat;
  --bar-bg: #06304f;

  /* Plochy */
  --surface: rgba(8, 48, 82, 0.62);
  --surface-strong: rgba(10, 60, 100, 0.8);
  --surface-effect: inset 0 0 28px rgba(110, 220, 255, 0.16), 0 10px 34px rgba(0, 0, 0, 0.35);
  --surface-blur: blur(6px);
  --card-bg: rgba(8, 48, 82, 0.55);
  --modal-bg: rgba(6, 40, 70, 0.96);
  --overlay: rgba(0, 10, 20, 0.7);
  --field-bg: rgba(2, 26, 46, 0.7);
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a6cde0'/%3E%3C/svg%3E");
  --edge: rgba(150, 228, 255, 0.42);
  --divider: rgba(150, 228, 255, 0.18);

  /* Text a zvýraznění */
  --text: #eaf8ff;
  --muted: #a6cde0;
  --placeholder: rgba(166, 205, 224, 0.6);
  --heading: #c8f6ff;
  --accent: #7fe9ff;
  --highlight: #f5c04a;
  --on-highlight: #021a2e;
  --ok: #6ee7a8;
  --late: #ffb357;
  --bad: #ff8080;
  --error-bg: rgba(120, 30, 30, 0.45);
  --toast-bg: #5a1d1d;
  --notice-bg: rgba(245, 192, 74, 0.16);
  --flash-bg: rgba(245, 192, 74, 0.28);

  /* Nadpisy */
  --headline-color: #0b2b46;
  --headline-effect: 0 0 4px #e4fbff, 0 0 12px #8eefff, 0 0 26px #39cfff, 0 0 44px rgba(57, 207, 255, 0.6);
  --headline-warn-color: #3a1606;
  --headline-warn-effect: 0 0 4px #fff2d6, 0 0 12px #ffc46b, 0 0 26px #ff9a2e;
  --heading-effect: 0 0 10px rgba(127, 233, 255, 0.55);

  /* Tlačítka */
  --btn-bg: rgba(20, 80, 120, 0.55);
  --btn-hover-effect: 0 0 16px rgba(127, 233, 255, 0.45);
  --btn-primary-bg: linear-gradient(180deg, #4fd9ff 0%, #1696cf 55%, #0b6aa0 100%);
  --btn-primary-border: #bff5ff;
  --btn-primary-text: #fff;
  --btn-primary-text-shadow: 0 1px 3px rgba(0, 40, 70, 0.7);
  --btn-primary-effect: inset 0 2px 4px rgba(255, 255, 255, 0.5), 0 0 18px rgba(79, 217, 255, 0.45);
  --action-bg: #1679ad;
  --action-text: #fff;
  --danger-bg: #8a2626;
  --danger-border: #e07070;

  /* Tvar panelů */
  --radius: 20px;
}