Barvy & Pozadí

/* HEX */
color: #F75B9E;       /* 6 znaků */
color: #F75B9E80;     /* 8 znaků = +alpha 50% */
color: #F59;          /* 3 znaky = zkratka */

/* RGB */
color: rgb(247, 91, 158);
color: rgb(247 91 158);         /* nová syntaxe */
color: rgb(247 91 158 / 0.5);   /* + alpha */
color: rgba(247, 91, 158, 0.5); /* starý způsob */

/* HSL (Hue, Saturation, Lightness) */
color: hsl(333, 91%, 66%);
color: hsl(333deg 91% 66%);         /* s deg */
color: hsl(333 91% 66% / 0.5);      /* + alpha */
color: hsla(333, 91%, 66%, 0.5);    /* starý */

/* OKLCH — nejmodernější */
color: oklch(67% 0.22 340deg);
/* lightness%, chroma, hue */

/* Klíčová slova */
color: red;
color: transparent;
color: currentColor; /* zdědí color */

/* Systémové barvy */
color: Canvas;      /* pozadí systému */
color: CanvasText;  /* text systému */

/* currentColor — ideální pro SVG ikony */
.icon svg {
  fill: currentColor; /* barva dle textu */
}
.btn { color: blue; }
/* ikona uvnitř .btn bude automaticky modrá */

/* Základ na body */
body { color: #1a1a2e; }

/* Muted text */
.muted { color: #6b7280; }
.placeholder { color: #9ca3af; }

/* Průhledný text */
.overlay-text {
  color: rgba(255, 255, 255, 0.8);
}

/* Barevný text */
.primary { color: #2563EB; }
.success { color: #16a34a; }
.danger  { color: #dc2626; }
.warning { color: #d97706; }

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body { color: #f3f4f6; }
  .muted { color: #9ca3af; }
}

/* currentColor pro ikony */
.btn {
  color: #2563EB;
}
.btn svg {
  fill: currentColor;
  width: 1em;
  height: 1em;
}

/* Barva */
.box { background: #f3f4f6; }
.box { background-color: #f3f4f6; }

/* Hero obrázek */
.hero {
  background-image: url('hero.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Shorthand */
.hero {
  background: url('hero.jpg')
    center/cover no-repeat;
}

/* Více pozadí */
.multi {
  background:
    url('overlay.png') center/cover,
    url('texture.jpg') repeat,
    #1a1a2e;
}

/* Gradient text efekt */
.gradient-text {
  background: linear-gradient(
    135deg, #667eea, #764ba2
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Parallax */
.parallax {
  background-attachment: fixed;
  background-size: cover;
}

/* CSS pattern (čtverce) */
.pattern {
  background-color: #f5f5f5;
  background-image:
    linear-gradient(45deg, #ddd 25%, transparent 25%),
    linear-gradient(-45deg, #ddd 25%, transparent 25%);
  background-size: 20px 20px;
}

/* Linear gradient */
background: linear-gradient(
  to right, #667eea, #764ba2
);
background: linear-gradient(
  135deg, #f093fb 0%, #f5576c 100%
);

/* Více zastávek */
background: linear-gradient(
  to bottom,
  #667eea 0%,
  #764ba2 50%,
  #f5576c 100%
);

/* ✅ Průhledný bez černého pruhu */
background: linear-gradient(
  to bottom,
  rgba(0, 0, 0, 0.8),
  rgba(0, 0, 0, 0) /* ne: transparent! */
);

/* Radial gradient */
background: radial-gradient(
  circle at center,
  #667eea 0%, #764ba2 100%
);
background: radial-gradient(
  ellipse 80% 60% at 50% 50%,
  #667eea, #764ba2
);

/* Conic gradient */
background: conic-gradient(
  #f75b9e 0%,
  #5bf7a2 33%,
  #5b9ef7 66%,
  #f75b9e 100%
);

/* Koláčový graf (25% / 75%) */
.pie {
  background: conic-gradient(
    #f75b9e 90deg,
    #5b9ef7 90deg
  );
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

/* CSS pattern přes gradient */
.stripe {
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(0,0,0,0.05) 10px,
    rgba(0,0,0,0.05) 20px
  );
}

/* Disabled stav */
.btn:disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* Hover efekt */
.card { opacity: 1; transition: opacity 0.2s; }
.card:hover { opacity: 0.85; }

/* Fade in animace */
.modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.modal.open {
  opacity: 1;
  visibility: visible;
}

/* Overlay */
.overlay {
  background: rgba(0, 0, 0, 0.5);
  /* Ne: opacity: 0.5 na overlay divisi
     → text uvnitř by byl taky průhledný */
}

/* rgba vs opacity */
.box-rgba {
  background: rgba(247, 91, 158, 0.2);
  color: #F75B9E; /* text plně viditelný */
}
.box-opacity {
  background: #F75B9E;
  opacity: 0.2; /* text i pozadí průhledné */
}

/* Hover efekty na obrázky */
.img-card img {
  transition: filter 0.3s;
}
.img-card:hover img {
  filter: brightness(1.1) saturate(1.2);
}

/* Grayscale → color na hover */
.portrait {
  filter: grayscale(100%);
  transition: filter 0.4s;
}
.portrait:hover { filter: grayscale(0%); }

/* Drop-shadow respektuje tvar PNG */
.icon-png {
  filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
  /* Stín sleduje tvar průhledného PNG */
}

/* Blur pozadí stránky při modalu */
.page-content.blurred {
  filter: blur(4px);
  pointer-events: none;
}

/* ✅ Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

/* Dark glass */
.dark-glass {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(8px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.1);
}

/* Loading skeleton blur efekt */
.skeleton {
  filter: blur(4px);
  pointer-events: none;
}

/* Barevný overlay na obrázku */
.img-wrapper { position: relative; }
.img-wrapper img { display: block; }
.img-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(247, 91, 158, 0.5);
  mix-blend-mode: multiply;
}

/* Text prolínající se s pozadím */
.hero-title {
  color: white;
  mix-blend-mode: overlay;
  /* Text se promicha s obrázkem za */
}

/* Efekt duotone */
.duotone {
  position: relative;
}
.duotone img { filter: grayscale(100%); }
.duotone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right, #F75B9E, #5B9EF7
  );
  mix-blend-mode: color;
}

/* isolation: isolate zabrání mix-blend-mode
   prolínat se přes hranice kontejneru */
.card {
  isolation: isolate;
}