/* ============================================================
   /projects — DARK  ·  16) AKCENTY SEKCÍ  (každá sekce jiná barva)
   ------------------------------------------------------------
   Jedna proměnná --sec / --sec-2 / --sec-rgb na blok, zbytek
   (eyebrow, okraje karet, tlačítka, štítky, hover) ji přebírá.
   Načítá se poslední → přebíjí 05/06/09.
     faces  – teal      · tiles – blue
     wp     – coral     · web   – violet
   ============================================================ */

body.psx-dark .psx-block--faces { --sec: #5ad0dd; --sec-2: #1fabbc; --sec-rgb: 90,208,221; }
body.psx-dark .psx-block--tiles { --sec: #5b96ff; --sec-2: #3f74e6; --sec-rgb: 91,150,255; }
body.psx-dark .psx-block--wp    { --sec: #ff8f83; --sec-2: #fc6a5e; --sec-rgb: 255,143,131; }
body.psx-dark .psx-block--web   { --sec: #b47bff; --sec-2: #9257f0; --sec-rgb: 180,123,255; }

/* ---------- eyebrow ---------- */
body.psx-dark .psx-block .psx-eyebrow {
  color: var(--sec);
  background: rgba(var(--sec-rgb), 0.14);
  border-color: rgba(var(--sec-rgb), 0.40);
}

/* ---------- okraje karet / dlaždic ---------- */
body.psx-dark .psx-block .psx-card,
body.psx-dark .psx-block .psx-tile {
  border-color: rgba(var(--sec-rgb), 0.30);
}
body.psx-dark .psx-block .psx-card:hover,
body.psx-dark .psx-block .psx-tile:hover {
  border-color: rgba(var(--sec-rgb), 0.65);
}

/* ---------- štítky ---------- */
body.psx-dark .psx-block .psx-card__tags li {
  color: var(--sec);
  background: rgba(var(--sec-rgb), 0.12);
  border-color: rgba(var(--sec-rgb), 0.32);
}

/* ---------- tlačítka ---------- */
body.psx-dark .psx-block .psx-btn--solid {
  color: #06121c;
  background: linear-gradient(180deg, var(--sec), var(--sec-2));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    0 12px 28px rgba(var(--sec-rgb), 0.28);
}
body.psx-dark .psx-block .psx-btn--solid:hover {
  filter: brightness(1.08);
  background: linear-gradient(180deg, var(--sec), var(--sec-2));
}
body.psx-dark .psx-block .psx-btn--ghost:hover {
  border-color: var(--sec);
  color: #fff;
}

/* ---------- dlaždice: hover „state layer" + ikona ---------- */
body.psx-dark .psx-block .psx-tile:hover {
  box-shadow: var(--psx-hi), 0 22px 48px rgba(0,0,0,0.5);
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(var(--sec-rgb), 0.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03));
}

body.psx-dark .psx-block .psx-tile__icon {
  position: relative;
  background: rgba(var(--sec-rgb), 0.12);
  border-color: rgba(var(--sec-rgb), 0.30);
  background-image: none;   /* glyf přesunut do ::after kvůli přebarvení */
}
body.psx-dark .psx-block .psx-tile__icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--sec);
  -webkit-mask: no-repeat center / 24px 24px;
          mask: no-repeat center / 24px 24px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M10 3v3a2 2 0 1 0 4 0V3h4a1 1 0 0 1 1 1v4h-3a2 2 0 1 0 0 4h3v4a1 1 0 0 1-1 1h-4v-3a2 2 0 1 0-4 0v3H6a1 1 0 0 1-1-1v-4H3a2 2 0 1 1 0-4h2V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M10 3v3a2 2 0 1 0 4 0V3h4a1 1 0 0 1 1 1v4h-3a2 2 0 1 0 0 4h3v4a1 1 0 0 1-1 1h-4v-3a2 2 0 1 0-4 0v3H6a1 1 0 0 1-1-1v-4H3a2 2 0 1 1 0-4h2V4a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
body.psx-dark .psx-block .psx-tile--design .psx-tile__icon::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1 0 1.5-.8 1.5-1.6 0-.5-.2-.9-.5-1.2-.3-.3-.5-.7-.5-1.2 0-.9.7-1.6 1.6-1.6H16a5 5 0 0 0 5-5c0-4.4-4-8-9-8z'/%3E%3Ccircle cx='7.5' cy='10.5' r='1'/%3E%3Ccircle cx='12' cy='7.5' r='1'/%3E%3Ccircle cx='16.5' cy='10.5' r='1'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 0 18c1 0 1.5-.8 1.5-1.6 0-.5-.2-.9-.5-1.2-.3-.3-.5-.7-.5-1.2 0-.9.7-1.6 1.6-1.6H16a5 5 0 0 0 5-5c0-4.4-4-8-9-8z'/%3E%3Ccircle cx='7.5' cy='10.5' r='1'/%3E%3Ccircle cx='12' cy='7.5' r='1'/%3E%3Ccircle cx='16.5' cy='10.5' r='1'/%3E%3C/svg%3E");
}

/* ---------- intro chipy → barva cílové sekce ---------- */
body.psx-dark .psx-chip[href="#watchfaces"] span { color: #5ad0dd; }
body.psx-dark .psx-chip[href="#tiles"] span      { color: #5b96ff; }
body.psx-dark .psx-chip[href="#wordpress"] span  { color: #ff8f83; }
body.psx-dark .psx-chip[href="#webdesign"] span  { color: #b47bff; }

body.psx-dark .psx-chip[href="#watchfaces"]:hover { border-color: rgba(90,208,221,0.55); background: rgba(90,208,221,0.10); }
body.psx-dark .psx-chip[href="#tiles"]:hover      { border-color: rgba(91,150,255,0.55); background: rgba(91,150,255,0.12); }
body.psx-dark .psx-chip[href="#wordpress"]:hover  { border-color: rgba(255,143,131,0.55); background: rgba(255,143,131,0.10); }
body.psx-dark .psx-chip[href="#webdesign"]:hover  { border-color: rgba(180,123,255,0.55); background: rgba(180,123,255,0.12); }

/* ---------- klik-flip outline v barvě sekce ---------- */
body.psx-dark .psx-block .psx-card__media--dual:focus-visible {
  outline-color: var(--sec);
}