/* Prospirio Hub — design tokeny na jednom místě (převzato z design systému Prospirio Hub).
   Změna barev, písma, rozestupů nebo pohybu = úprava jen tohoto souboru.
   Písmo je systémové (SF Pro na Macu a iPhonu) — žádná spojení ven. */
:root {
  color-scheme: dark;

  /* Písmo */
  --font-sans: -apple-system, 'SF Pro Text', BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: -apple-system, 'SF Pro Display', BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-base: 15px; --fs-lg: 17px;
  --fs-h3: 16px; --fs-h2: 20px; --fs-h1: 26px; --fs-hero: 30px;

  /* Značka */
  --primary: hsl(24 100% 65%);
  --primary-light: hsl(24 100% 75%);
  --primary-strong: hsl(24 100% 58%);
  --primary-tint: hsl(24 100% 65% / .12);
  --primary-tint-2: hsl(24 100% 65% / .2);
  --primary-border: hsl(24 100% 65% / .38);
  --primary-glow: hsl(24 100% 65% / .35);
  --on-primary: hsl(220 85% 8%);
  --navy: hsl(220 85% 22%);
  --navy-light: hsl(220 65% 40%);
  --night: #0A0F1C;
  --night-2: #1A2340;
  --night-3: #0f172a;
  --canvas: hsl(220 15% 8%);

  /* Text (bílá s průhledností nad tmavou plochou; --fg-4 a světlejší splňují kontrast 4.5:1) */
  --fg-1: #fafafa;
  --fg-2: rgba(255,255,255,.82);
  --fg-3: rgba(255,255,255,.68);
  --fg-4: rgba(255,255,255,.56);
  --fg-5: rgba(255,255,255,.4);   /* jen dekorace a vypnuté prvky, ne čitelný text */

  /* Plochy a okraje */
  --surface-1: rgba(255,255,255,.03);
  --surface-2: rgba(255,255,255,.05);
  --surface-3: rgba(255,255,255,.08);
  --surface-hover: rgba(255,255,255,.10);
  --surface-sunken: rgba(10,15,28,.5);
  --surface-solid: rgba(14,20,38,.94);
  --border: rgba(255,255,255,.10);
  --border-strong: rgba(255,255,255,.16);
  --border-glass: rgba(255,255,255,.18);

  /* Stavy (barva + čitelný text na tónované ploše) */
  --ok: hsl(142 70% 50%);      --ok-fg: #86efac;     --ok-tint: hsl(142 70% 50% / .12);  --ok-border: hsl(142 70% 50% / .32);
  --warn: hsl(45 90% 60%);     --warn-fg: #fde68a;   --warn-tint: hsl(45 90% 60% / .12); --warn-border: hsl(45 90% 60% / .4);
  --danger: hsl(0 62% 55%);    --danger-fg: #fca5a5; --danger-tint: hsl(0 62% 55% / .12); --danger-border: hsl(0 62% 55% / .38);
  --info: #60a5fa;             --info-fg: #93c5fd;   --info-tint: rgba(96,165,250,.12);   --info-border: rgba(96,165,250,.3);
  --human: #4ade80;            /* zodpovědný člověk */
  --violet: #a78bfa;

  /* Rozestupy a velikosti */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --control-h: 40px; --control-h-sm: 36px; --control-h-lg: 44px;
  --gutter: 32px;
  --top-h: 64px;               /* výška horní lišty — používá ji i kancelář */
  --page-max: 1280px;

  /* Tvary */
  --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 14px; --radius-2xl: 16px; --radius-3xl: 22px; --radius-full: 9999px;

  /* Stíny a sklo */
  --shadow-glass: 0 8px 32px 0 rgba(31,38,135,.15), inset 0 1px 0 rgba(255,255,255,.1);
  --shadow-glass-hover: 0 14px 40px 0 rgba(31,38,135,.28), inset 0 1px 0 rgba(255,255,255,.14);
  --shadow-nav: 0 16px 48px 0 rgba(31,38,135,.3), inset 0 1px 0 rgba(255,255,255,.25), inset 0 0 0 1px rgba(255,255,255,.08);
  --shadow-pop: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  --shadow-elegant: 0 10px 30px -10px hsl(24 100% 65% / .45);
  --blur-card: blur(20px);
  --blur-nav: blur(40px) saturate(1.8);
  --blur-dialog: blur(24px) saturate(180%);
  --gradient-dialog: linear-gradient(135deg, rgba(10,15,28,.96) 0%, rgba(15,23,42,.95) 50%, rgba(20,25,45,.93) 100%);
  --gradient-warm: linear-gradient(135deg, hsl(24 100% 65% / .16), hsl(24 100% 65% / .04) 60%, rgba(255,255,255,.02));
  --gradient-primary: linear-gradient(135deg, hsl(24 100% 65%), hsl(24 100% 72%));

  /* Pohyb */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .15s; --dur: .25s; --dur-slow: .45s;

  /* Obrázky */
  --bg-image: url('assets/bg.webp');
  --logo: url('assets/prospirio-logo-white.png');
}
@media (max-width: 640px) {
  :root { --gutter: 16px; --top-h: 104px; --fs-h1: 22px; --fs-hero: 24px; }
}
@media (pointer: coarse) {
  :root { --control-h-sm: 40px; }
}