/* ============================================================
   PHYSIOPLUS 2A „Modrá klinika" — dizajnové tokeny
   Zdroj: design-reference.html (prototyp 2a-physioplus.html)
   ============================================================ */

@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/sora-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/sora-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/manrope-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/manrope-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/manrope-600.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-400.woff2') format('woff2');
}

:root {
  /* Farby — finálny 2A override */
  --paper:        #FBFDFD;
  --paper-2:      #EDF4F5;
  --ink:          #1D3357;
  --fg-1:         #24344F;
  --fg-2:         #45566B;
  --fg-3:         #64778A;
  --fg-4:         #94A5B5;
  --accent:       #4BA3B3;
  --accent-hover: #418FA0;
  --accent-ink:   #F7FBFC;
  --accent-on-ink:       #6FC3D2;
  --accent-on-ink-hover: #8AD0DD;
  --rule:         #E4E9F0;
  --rule-strong:  #C9D3DF;
  --rule-faint:   #EFF3F7;
  --bg-raised:    #FFFFFF;
  --bg-recessed:  #EDF4F5;
  --brand-hover:  #16283F;
  --positive:       #2E7D6B;
  --positive-faint: #E1F0EC;
  --warning:        #A9802E;
  --warning-faint:  #F4EBD8;
  --border-field: #C9D3DF;
  --n-2: #C5D3E2;
  --n-3: #93A6B8;
  --n-4: #7E92A5;

  /* Typografia */
  --serif-display: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --sans-ui:       'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:          'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Motion */
  --t-fast: 150ms;
  --t-base: 200ms;
  --ease:   cubic-bezier(0.2, 0, 0, 1);

  /* Layout */
  --container-max: 1280px;
  --container-pad: 32px;
  --nav-h: 72px;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--fg-1);
  font-family: var(--sans-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }

input, select, textarea, button { font-family: var(--sans-ui); }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

img { max-width: 100%; height: auto; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }