/* Salon by Flowbit — design tokeny (kap. 4 zadání).
   Světlá paleta je definovaná na holém :root, tmavá dvakrát:
   v prefers-color-scheme pod :root:not([data-theme="light"]) a v :root[data-theme="dark"]. */

:root{
  /* plochy */
  --bg:#FAF8F5;
  --surface:#FFFFFF;
  --surface-sunken:#F5F2ED;

  /* text */
  --ink:#26221E;
  --ink-2:#57504A;
  --muted:#8B827A;

  /* linky */
  --line:#E7E1D8;
  --line-strong:#D6CEC2;

  /* akcent — koňak z Flowbitu */
  --accent:#8C6248;
  --accent-hover:#74503A;
  --accent-soft:#F5EDE6;
  --accent-ink:#FFFFFF;

  /* stavy */
  --ok:#2E6B4F;      --ok-bg:#E6F0EA;
  --wait:#9A6B12;    --wait-bg:#FBF0DC;
  --danger:#A33A2E;  --danger-bg:#F8E8E5;  --danger-ink:#FFFFFF;
  --info:#3A5C86;    --info-bg:#E8EEF6;

  /* barvy služeb v kalendáři — třetí, oddělená sada */
  --svc-1:#E8E2F0; --svc-2:#DEE9F2; --svc-3:#DEEDE4; --svc-4:#F3EAD9;
  --svc-5:#F2E2DE; --svc-6:#E5EDE9; --svc-7:#EDE7DC; --svc-8:#E4E4EA;
  --svc-ink:#26221E;

  /* brand salonu — přebírá ho veřejná část a e-maily */
  --brand:#8C6248;
  --brand-ink:#FFFFFF;
  --brand-hover:color-mix(in srgb, var(--brand) 84%, #000000);
  --brand-soft:color-mix(in srgb, var(--brand) 9%, var(--surface));
  --brand-line:color-mix(in srgb, var(--brand) 26%, var(--line));

  /* typografie */
  --font:'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:ui-monospace, 'JetBrains Mono', Menlo, monospace;
  --fs-h1:22px; --fs-h2:16px; --fs-body:14px; --fs-cap:13px; --fs-label:11px; --fs-table:13.5px;

  /* rozměry */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px;
  --r-field:6px; --r-card:8px; --r-modal:12px; --r-badge:4px;
  --shadow-card:0 1px 2px rgba(38,34,30,.06), 0 1px 1px rgba(38,34,30,.04);
  --shadow-float:0 12px 32px rgba(38,34,30,.16), 0 2px 6px rgba(38,34,30,.08);
  --row-h:40px; --touch:44px; --nav-w:240px; --nav-w-min:64px;
  --scrim:rgba(38,34,30,.42);
  --skeleton:#EFEAE3;
}

@media (prefers-color-scheme: dark){
  :root[data-theme="auto"]{
    --bg:#191614; --surface:#211D1A; --surface-sunken:#2A2521;
    --ink:#F0EAE2; --ink-2:#BEB4A8; --muted:#8E857A;
    --line:#35302B; --line-strong:#4A433C;
    --accent:#C79A72; --accent-hover:#D8AE86; --accent-soft:#33291F; --accent-ink:#1B1815;
    --ok:#6FBF93; --ok-bg:#17301F;
    --wait:#E0B15C; --wait-bg:#33280F;
    --danger:#E08878; --danger-bg:#35201C; --danger-ink:#1B1815;
    --info:#8FB2DC; --info-bg:#1B2735;
    --svc-1:color-mix(in srgb, #E8E2F0 22%, var(--surface)); --svc-2:color-mix(in srgb, #DEE9F2 22%, var(--surface));
    --svc-3:color-mix(in srgb, #DEEDE4 22%, var(--surface)); --svc-4:color-mix(in srgb, #F3EAD9 22%, var(--surface));
    --svc-5:color-mix(in srgb, #F2E2DE 22%, var(--surface)); --svc-6:color-mix(in srgb, #E5EDE9 22%, var(--surface));
    --svc-7:color-mix(in srgb, #EDE7DC 22%, var(--surface)); --svc-8:color-mix(in srgb, #E4E4EA 22%, var(--surface));
    --svc-ink:#F0EAE2;
    --brand-hover:color-mix(in srgb, var(--brand) 78%, #FFFFFF);
    --brand-soft:color-mix(in srgb, var(--brand) 16%, var(--surface));
    --scrim:rgba(0,0,0,.62);
    --scrim:rgba(0,0,0,.62);
  --shadow-card:0 1px 2px rgba(0,0,0,.35);
    --shadow-float:0 14px 34px rgba(0,0,0,.55);
    --skeleton:#2D2823;
  }
}

:root[data-theme="dark"]{
  --bg:#191614; --surface:#211D1A; --surface-sunken:#2A2521;
  --ink:#F0EAE2; --ink-2:#BEB4A8; --muted:#8E857A;
  --line:#35302B; --line-strong:#4A433C;
  --accent:#C79A72; --accent-hover:#D8AE86; --accent-soft:#33291F; --accent-ink:#1B1815;
  --ok:#6FBF93; --ok-bg:#17301F;
  --wait:#E0B15C; --wait-bg:#33280F;
  --danger:#E08878; --danger-bg:#35201C; --danger-ink:#1B1815;
  --info:#8FB2DC; --info-bg:#1B2735;
  --svc-1:color-mix(in srgb, #E8E2F0 22%, var(--surface)); --svc-2:color-mix(in srgb, #DEE9F2 22%, var(--surface));
  --svc-3:color-mix(in srgb, #DEEDE4 22%, var(--surface)); --svc-4:color-mix(in srgb, #F3EAD9 22%, var(--surface));
  --svc-5:color-mix(in srgb, #F2E2DE 22%, var(--surface)); --svc-6:color-mix(in srgb, #E5EDE9 22%, var(--surface));
  --svc-7:color-mix(in srgb, #EDE7DC 22%, var(--surface)); --svc-8:color-mix(in srgb, #E4E4EA 22%, var(--surface));
  --svc-ink:#F0EAE2;
  --brand-hover:color-mix(in srgb, var(--brand) 78%, #FFFFFF);
  --brand-soft:color-mix(in srgb, var(--brand) 16%, var(--surface));
  --scrim:rgba(0,0,0,.62);
  --shadow-card:0 1px 2px rgba(0,0,0,.35);
  --shadow-float:0 14px 34px rgba(0,0,0,.55);
  --skeleton:#2D2823;
}

/* základní reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline}
button{font:inherit;color:inherit;font-variant-numeric:tabular-nums}
input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent-soft);color:var(--ink)}
symbol{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
symbol circle,symbol rect,symbol path,symbol line{fill:none}
@keyframes fb-pulse{0%,100%{opacity:1}50%{opacity:.45}}
@keyframes fb-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;transition-duration:.001ms !important}}