/* =========================================================
   Krysti salón — Design tokens
   Farby a typografia presne podľa zadania klientky
   ========================================================= */

:root {
  /* ---------- Farby ---------- */
  --color-bg:            #FFFFFF;     /* pozadie stránky */
  --color-surface:       #f1e0d9;     /* sekcie a karty */
  --color-surface-deep:  #ead2c8;     /* hover/depth surface (odvodené) */
  --color-accent:        #F5D4DC;     /* CTA — jemná blush ružová z palety 04 */
  --color-accent-hover:  #B4A0A4;     /* hover CTA — muted rose z palety 04 */
  --color-icon:          #C9A84C;     /* zlatá pre ikonky */
  --color-icon-soft:     #b89538;     /* tmavšia zlatá pre hover */
  --color-text:          #2A1A22;     /* primárny text */
  --color-text-soft:     #5b4750;     /* sekundárny text */
  --color-text-mute:     #6f5c66;     /* tichý text / metadata — WCAG AA pass na malom texte (6.4:1) */
  --color-line:          rgba(42, 26, 34, 0.12);
  --color-line-soft:     rgba(42, 26, 34, 0.06);

  /* ---------- Typografia ---------- */
  --font-display: "Fraunces", "Didot", Georgia, serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", -apple-system, system-ui, sans-serif;

  --weight-display: 300;
  --weight-body:    300;
  --weight-body-md: 400;
  --weight-body-sb: 500;

  /* Type scale — desktop */
  --fs-eyebrow:     12px;
  --fs-small:       14px;
  --fs-body:        17px;
  --fs-body-lg:     19px;
  --fs-h3:          26px;
  --fs-h2:          44px;
  --fs-h1:          76px;

  /* Type scale — mobile (overridden in @media) */
  /* Set inline below */

  --lh-display:     1.05;
  --lh-heading:     1.15;
  --lh-body:        1.6;

  --ls-eyebrow:     0.22em;
  --ls-display:    -0.01em;
  --ls-body:        0;

  /* ---------- Spacing ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  --container-w: 1240px;
  --container-pad: 32px;

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 36px;
  --radius-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-soft:   0 1px 2px rgba(42,26,34,0.04), 0 12px 32px -16px rgba(42,26,34,0.18);
  --shadow-card:   0 1px 2px rgba(42,26,34,0.04), 0 24px 60px -28px rgba(42,26,34,0.22);
  --shadow-lift:   0 2px 4px rgba(42,26,34,0.06), 0 36px 80px -32px rgba(42,26,34,0.28);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur-fast: 160ms;
  --dur-med:  280ms;
  --dur-slow: 520ms;
}

@media (max-width: 800px) {
  :root {
    --fs-h1:      44px;
    --fs-h2:      30px;
    --fs-h3:      22px;
    --fs-body:    16px;
    --fs-body-lg: 17px;
    --container-pad: 20px;
    --space-9: 64px;
    --space-10: 80px;
  }
}

/* ---------- Reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--weight-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-heading);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p  { margin: 0; text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--weight-body-sb);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Section spacing */
.section { padding: var(--space-10) 0; }
.section--surface { background: var(--color-surface); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: var(--color-accent);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--weight-body-sb);
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-med) var(--ease),
              transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-med) var(--ease);
}
.btn:hover { background: var(--color-accent-hover); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--color-text);
  border-color: var(--color-text);
}
.btn--ghost:hover { background: var(--color-text); color: #fff; }

.btn--small { padding: 12px 22px; font-size: 13px; }

.btn .arrow { transition: transform var(--dur-med) var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* Eyebrow + section heading block */
.section-head {
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: var(--space-8);
  max-width: 720px;
}
.section-head--center { margin-left: auto; margin-right: auto; align-items: center; text-align: center; }

/* Utility */
.gold { color: var(--color-icon); }
.muted { color: var(--color-text-soft); }
.divider {
  width: 48px; height: 1px;
  background: var(--color-icon);
}

/* Selection */
::selection { background: var(--color-accent); color: #fff; }