/* =========================================================================
   leilaspoems — spoločný značkový systém
   Fonty: Bricolage Grotesque (display) + Atkinson Hyperlegible (text/UI)
   Paleta odvodená z hero.webp / brand ilustrácie
   ========================================================================= */

/* ---- FONTY (self-hosted, latin + latin-ext pre slovenčinu/češtinu) ---- */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/atkinson-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/atkinson-400-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/atkinson-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/atkinson-700-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/bricolage-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('fonts/bricolage-latinext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- ZNAČKOVÉ TOKENY ---- */
:root {
  /* Značkové spektrum (hero.webp): indigo -> violet -> magenta -> koral -> zlatá */
  --brand-indigo: #221a52;
  --brand-violet: #5b3fb0;
  --brand-magenta: #d1268d;
  --brand-coral:  #f2622e;
  --brand-gold:   #f6a723;

  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --body: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --maxw: 1080px;

  /* SVETLÁ TÉMA (default) — teplo-chladný neutrál, nie čistá šeď */
  --ground: #f5f3f7;
  --surface: #ffffff;
  --surface-2: #edeaf3;
  --border: #d9d5e4;
  --border-strong: #b9b2ce;
  --ink: #17131f;        /* hlavný text  — ~15:1 na ground */
  --ink-soft: #443c57;   /* sekundárny   — ~7:1 na ground */
  --muted: #5c5470;      /* popisky      — ~5:1 na ground */
  --link: #6a2b8f;       /* interaktívne — AA na svetlej ploche */
  --on-brand: #ffffff;   /* text na sýtej ploche */

  /* Kurzové akcenty (výseky značkového spektra). *-ink = AA text na svetlej ploche */
  --mastering: #0e7f96;        --mastering-ink: #0b6377;   /* chladný — cyan/tyrkys */
  --songwriting: #c02f7f;      --songwriting-ink: #a01f66; /* teplý — magenta */
  --report: #6b46c1;           --report-ink: #5a34b0;      /* most — violet */

  --shadow-sm: 0 2px 10px rgba(34, 26, 82, 0.07);
  --shadow-md: 0 14px 40px rgba(34, 26, 82, 0.12);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #100d1c;
    --surface: #1a1630;
    --surface-2: #221d3c;
    --border: #322b4e;
    --border-strong: #48406a;
    --ink: #ece9f5;
    --ink-soft: #c3bcd8;
    --muted: #a49bc0;
    --link: #d9a7ff;
    --on-brand: #ffffff;
    --mastering: #3cc7db;   --mastering-ink: #6fd8e8;
    --songwriting: #f26bad; --songwriting-ink: #ff8cc2;
    --report: #b39dff;      --report-ink: #c7b6ff;
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 16px 44px rgba(0, 0, 0, 0.5);
  }
}
/* Explicitné prepnutie témy (toggle na root elemente má prednosť pred media query) */
:root[data-theme="light"] {
  --ground: #f5f3f7; --surface: #ffffff; --surface-2: #edeaf3; --border: #d9d5e4; --border-strong: #b9b2ce;
  --ink: #17131f; --ink-soft: #443c57; --muted: #5c5470; --link: #6a2b8f;
  --mastering: #0e7f96; --mastering-ink: #0b6377; --songwriting: #c02f7f; --songwriting-ink: #a01f66; --report: #6b46c1; --report-ink: #5a34b0;
  --shadow-sm: 0 2px 10px rgba(34, 26, 82, 0.07); --shadow-md: 0 14px 40px rgba(34, 26, 82, 0.12);
}
:root[data-theme="dark"] {
  --ground: #100d1c; --surface: #1a1630; --surface-2: #221d3c; --border: #322b4e; --border-strong: #48406a;
  --ink: #ece9f5; --ink-soft: #c3bcd8; --muted: #a49bc0; --link: #d9a7ff;
  --mastering: #3cc7db; --mastering-ink: #6fd8e8; --songwriting: #f26bad; --songwriting-ink: #ff8cc2; --report: #b39dff; --report-ink: #c7b6ff;
  --shadow-sm: 0 2px 12px rgba(0,0,0,0.4); --shadow-md: 0 16px 44px rgba(0,0,0,0.5);
}

/* ---- ZÁKLAD + PRÍSTUPNOSŤ ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-family: var(--display); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
a { color: var(--link); }

/* Viditeľný focus pre klávesnicu (WCAG 2.4.7) */
:focus-visible { outline: 3px solid var(--brand-magenta); outline-offset: 3px; border-radius: 4px; }

/* Skip-link na obsah */
.skip-link {
  position: absolute; left: 12px; top: -50px; z-index: 200;
  background: var(--surface); color: var(--ink); border: 2px solid var(--brand-magenta);
  padding: 10px 16px; border-radius: var(--radius-sm); font-family: var(--body); font-weight: 700;
  transition: top 0.15s;
}
.skip-link:focus { top: 12px; }