/* ============================================================================
   RelaxPRO — designové tokeny
   ----------------------------------------------------------------------------
   Jediné místo, kde se definuje vzhled. Dev tool nepřepisuje komponenty,
   přepisuje výhradně proměnné v tomhle souboru.

   Tři vstupy, které dev tool mění:
     --brand-base   barva klienta (hex)
     --accent-base  doplňková barva klienta (hex)
     --radius-scale, --density, --type-scale   číselné násobiče

   Všechno ostatní se z nich odvozuje přes color-mix a calc, takže přebarvení
   klienta je změna dvou hexů, ne přepis stylů.
   ========================================================================== */

:root {
  /* --- vstupy, které ovládá dev tool ------------------------------------ */
  --brand-base: #0F6E78;
  --accent-base: #E2A73E;

  --radius-scale: 1;
  --density: 1;
  --type-scale: 1;

  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* --- tvar ------------------------------------------------------------- */
  --r-xs: calc(6px * var(--radius-scale));
  --r-sm: calc(10px * var(--radius-scale));
  --r-md: calc(16px * var(--radius-scale));
  --r-lg: calc(22px * var(--radius-scale));
  --r-xl: calc(30px * var(--radius-scale));
  --r-2xl: calc(40px * var(--radius-scale));
  --r-pill: 999px;

  /* Kapka: měkký tvar s jedním ostrým rohem. Používá se na prvcích, které
     mají vystoupit z rytmu — ne plošně, aby to nesklouzlo do ozdoby. */
  --r-drop: var(--r-xl) var(--r-xl) var(--r-xl) var(--r-sm);
  --r-drop-alt: var(--r-sm) var(--r-xl) var(--r-xl) var(--r-xl);

  /* --- rozestupy -------------------------------------------------------- */
  --sp-1: calc(4px * var(--density));
  --sp-2: calc(8px * var(--density));
  --sp-3: calc(12px * var(--density));
  --sp-4: calc(16px * var(--density));
  --sp-5: calc(20px * var(--density));
  --sp-6: calc(24px * var(--density));
  --sp-7: calc(32px * var(--density));
  --sp-8: calc(40px * var(--density));
  --gutter: calc(20px * var(--density));

  /* --- typografie ------------------------------------------------------- */
  --fs-micro: calc(11px * var(--type-scale));
  --fs-tiny: calc(12px * var(--type-scale));
  --fs-small: calc(13px * var(--type-scale));
  --fs-body: calc(14.5px * var(--type-scale));
  --fs-lead: calc(16px * var(--type-scale));
  --fs-h3: calc(18px * var(--type-scale));
  --fs-h2: calc(22px * var(--type-scale));
  --fs-h1: calc(27px * var(--type-scale));
  --fs-display: calc(62px * var(--type-scale));

  /* --- pohyb ------------------------------------------------------------ */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --t-fast: 160ms;
  --t-base: 260ms;
  --t-slow: 420ms;

  --z-nav: 40;
  --z-sheet: 60;
  --z-drawer: 70;
  --z-devtool: 90;
  --z-toast: 100;
}

/* ============================================================================
   SVĚTLÝ REŽIM
   ========================================================================== */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: #F2F7F7;
  --surface: #FFFFFF;
  --surface-2: color-mix(in oklab, var(--brand-base) 5%, #FFFFFF);
  --surface-sunk: color-mix(in oklab, var(--brand-base) 7%, #F2F7F7);

  --line: color-mix(in oklab, var(--brand-base) 13%, #E4EAEA);
  --line-strong: color-mix(in oklab, var(--brand-base) 26%, #D3DDDD);

  --text: #0B2129;
  --text-2: color-mix(in oklab, var(--brand-base) 22%, #5B7178);
  --text-3: color-mix(in oklab, var(--brand-base) 14%, #8A9BA0);
  --text-on-field: #FFFFFF;

  --brand: var(--brand-base);
  --brand-press: color-mix(in oklab, var(--brand-base) 82%, #000000);
  --brand-soft: color-mix(in oklab, var(--brand-base) 12%, #FFFFFF);
  --brand-soft-2: color-mix(in oklab, var(--brand-base) 22%, #FFFFFF);
  --brand-border: color-mix(in oklab, var(--brand-base) 32%, #FFFFFF);

  --accent: var(--accent-base);
  --accent-soft: color-mix(in oklab, var(--accent-base) 16%, #FFFFFF);

  --success: #12855A;
  --success-soft: color-mix(in oklab, #12855A 12%, #FFFFFF);
  --warning: #B4700A;
  --warning-soft: color-mix(in oklab, #B4700A 13%, #FFFFFF);
  --danger: #C4372D;
  --danger-soft: color-mix(in oklab, #C4372D 11%, #FFFFFF);

  /* hloubkové pole — nosný motiv směru A */
  --field-a: color-mix(in oklab, var(--brand-base) 86%, #0A3038);
  --field-b: color-mix(in oklab, var(--brand-base) 34%, #062026);
  --field-glow: color-mix(in oklab, var(--brand-base) 62%, #7FE3E8);

  --scrim: rgba(7, 30, 36, .46);
  --sh-1: 0 1px 2px rgba(10, 46, 54, .06), 0 2px 8px -2px rgba(10, 46, 54, .08);
  --sh-2: 0 4px 10px -4px rgba(10, 46, 54, .14), 0 12px 28px -12px rgba(10, 46, 54, .18);
  --sh-3: 0 8px 18px -8px rgba(10, 46, 54, .22), 0 26px 50px -20px rgba(10, 46, 54, .3);
  --sh-field: 0 14px 34px -14px color-mix(in oklab, var(--brand-base) 60%, transparent);
}

/* ============================================================================
   TMAVÝ REŽIM
   Není to invertovaný světlý. Povrchy se drží modrozelené hloubky, aby tmavý
   režim vypadal jako noční voda, ne jako šedá appka.
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: color-mix(in oklab, var(--brand-base) 9%, #04141A);
  --surface: color-mix(in oklab, var(--brand-base) 12%, #0A2027);
  --surface-2: color-mix(in oklab, var(--brand-base) 17%, #0D272F);
  --surface-sunk: color-mix(in oklab, var(--brand-base) 7%, #031015);

  --line: color-mix(in oklab, var(--brand-base) 24%, #14313A);
  --line-strong: color-mix(in oklab, var(--brand-base) 40%, #1D4450);

  --text: #E3F0F1;
  --text-2: color-mix(in oklab, var(--brand-base) 20%, #93A9AF);
  --text-3: color-mix(in oklab, var(--brand-base) 16%, #6D848A);
  --text-on-field: #FFFFFF;

  --brand: color-mix(in oklab, var(--brand-base) 68%, #BFF3F6);
  --brand-press: color-mix(in oklab, var(--brand-base) 86%, #BFF3F6);
  --brand-soft: color-mix(in oklab, var(--brand-base) 26%, #06202699);
  --brand-soft-2: color-mix(in oklab, var(--brand-base) 40%, #062026);
  --brand-border: color-mix(in oklab, var(--brand-base) 46%, #062026);

  --accent: color-mix(in oklab, var(--accent-base) 78%, #FFE9C0);
  --accent-soft: color-mix(in oklab, var(--accent-base) 26%, #0A2027);

  --success: #4CC78E;
  --success-soft: color-mix(in oklab, #4CC78E 20%, #0A2027);
  --warning: #E7A93C;
  --warning-soft: color-mix(in oklab, #E7A93C 20%, #0A2027);
  --danger: #F07268;
  --danger-soft: color-mix(in oklab, #F07268 20%, #0A2027);

  --field-a: color-mix(in oklab, var(--brand-base) 62%, #051A20);
  --field-b: color-mix(in oklab, var(--brand-base) 20%, #020B0F);
  --field-glow: color-mix(in oklab, var(--brand-base) 48%, #3FC6CE);

  --scrim: rgba(1, 9, 12, .68);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .34), 0 2px 8px -2px rgba(0, 0, 0, .4);
  --sh-2: 0 4px 10px -4px rgba(0, 0, 0, .5), 0 12px 28px -12px rgba(0, 0, 0, .6);
  --sh-3: 0 8px 18px -8px rgba(0, 0, 0, .6), 0 26px 50px -20px rgba(0, 0, 0, .7);
  --sh-field: 0 14px 34px -16px rgba(0, 0, 0, .8);
}