@import "tailwindcss";

@theme {
  /* Zelená — DOPLŇKOVÝ akcent (tlačítka, odkazy, eyebrow, zelené bloky) */
  --color-accent-50:  #eef5f0;
  --color-accent-100: #d8e8de;
  --color-accent-200: #a7cab6;   /* světlý highlight na zeleném/tmavém */
  --color-accent-300: #6faa88;
  --color-accent-400: #3f8060;   /* svěží zelená */
  --color-accent-500: #2e6149;   /* primární tlačítko */
  --color-accent-600: #234c3a;
  --color-accent-700: #1b3a2c;   /* hluboká — bloky / footer / hover */

  /* Rosé — sekundární akcent, jen vkusné expresivní detaily (kurzíva, logo) */
  --color-blush-200: #f4c2d0;   /* světlá — na zelených blocích */
  --color-blush-300: #ec93ac;
  --color-blush-400: #e06a8b;   /* hlavní rosé na světlém */
  --color-blush-500: #ce5076;

  /* Zelené plochy (CTA blok, footer) — přes „brand" tokeny */
  --color-brand-50:  #eef5f0;
  --color-brand-100: #d8e8de;
  --color-brand-200: #a7cab6;
  --color-brand-300: #6faa88;
  --color-brand-400: #3f8060;
  --color-brand-500: #2e6149;
  --color-brand-600: #234c3a;
  --color-brand-700: #1f4030;
  --color-brand-800: #18321f;
  --color-brand-900: #112417;

  /* Neutrály — teplé, tmavé na světlém */
  --color-ink-900: #1e211b;                     /* nadpisy */
  --color-ink-700: #44483f;                     /* text */
  --color-ink-500: #7e8276;                     /* tlumený text */
  --color-ink-300: rgba(30, 33, 27, 0.14);      /* hairline */
  --color-ink-200: rgba(30, 33, 27, 0.08);

  /* Papír = světlý teplý off-white (HLAVNÍ) */
  --color-paper:    #f5f2ec;
  --color-paper-2:  #fdfcf8;

  --font-display: "Fraunces", "Inter", ui-serif, Georgia, serif;
  --font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
}

@layer base {
  body {
    @apply text-ink-700 antialiased bg-paper;
    font-family: var(--font-sans);
    font-weight: 400;
  }

  h1, h2, h3, h4 {
    @apply text-ink-900 tracking-tight;
    font-family: var(--font-display);
    font-weight: 400;
  }

  p { @apply leading-relaxed; }

  ::selection { @apply bg-accent-500 text-white; }
}

/* ── Foto-panel (zaoblený, světlý Nordic) ── */
.photo-card {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--color-paper-2);
}
.photo-card .cap {
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  z-index: 1;
  background: rgba(245, 242, 236, 0.92);
  color: var(--color-ink-700);
  padding: 0.4rem 0.7rem;
  border-radius: 0.55rem;
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  backdrop-filter: blur(4px);
}
.photo-card .cap::before { content: "□"; color: var(--color-accent-500); }
.photo-card .idx {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 1;
  background: rgba(245, 242, 236, 0.92);
  color: var(--color-ink-900);
  padding: 0.15rem 0.5rem;
  border-radius: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.8rem;
  line-height: 1.2;
  backdrop-filter: blur(4px);
}

/* ── Tlačítka — zelená ── */
@utility btn {
  @apply inline-flex items-center justify-center gap-2 rounded-full px-7 py-3.5 font-medium transition text-sm;
}
@utility btn-primary {
  @apply inline-flex items-center justify-center gap-2 rounded-full px-7 py-3.5 font-medium transition text-sm bg-accent-500 text-white;
  &:hover { @apply bg-accent-600; }
}
@utility btn-accent {
  @apply inline-flex items-center justify-center gap-2 rounded-full px-7 py-3.5 font-medium transition text-sm bg-accent-500 text-white;
  &:hover { @apply bg-accent-600; }
}
@utility btn-secondary {
  @apply inline-flex items-center justify-center gap-2 rounded-full px-7 py-3.5 font-medium transition text-sm bg-transparent text-ink-900 ring-1 ring-ink-300;
  &:hover { @apply bg-ink-900 text-paper; }
}
@utility btn-outline-light {
  @apply inline-flex items-center justify-center gap-2 rounded-full px-7 py-3.5 font-medium transition text-sm bg-transparent text-white ring-1 ring-white/40;
  &:hover { @apply bg-white text-accent-700; }
}

@utility container-page  { @apply mx-auto max-w-7xl px-6 lg:px-12; }
@utility container-narrow { @apply mx-auto max-w-5xl px-6 lg:px-12; }
@utility section          { @apply py-24 md:py-36; }
@utility section-tight    { @apply py-20 md:py-28; }

@utility eyebrow {
  @apply text-xs font-medium uppercase text-accent-500;
  letter-spacing: 0.22em;
}
@utility eyebrow-light {
  @apply text-xs font-medium uppercase text-accent-200;
  letter-spacing: 0.22em;
}

@utility display-xl {
  @apply text-[2.75rem] leading-[1.05] tracking-tight;
  font-family: var(--font-display);
  font-weight: 400;
}
@utility display-lg {
  @apply text-3xl leading-[1.08] tracking-tight;
  font-family: var(--font-display);
  font-weight: 400;
}

@utility rule       { @apply h-px w-full bg-ink-300; }
@utility rule-light { @apply h-px w-full bg-white/20; }

/* ── Číslovaný hairline seznam ── */
.hair-list { counter-reset: hl; }
.hair-list > li {
  list-style: none;
  position: relative;
  padding: 1.5rem 0 1.5rem 3.2rem;
  border-top: 1px solid var(--color-ink-300);
  color: var(--color-ink-700);
}
.hair-list > li:first-child { border-top: 0; }
.hair-list > li::before {
  counter-increment: hl;
  content: counter(hl, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.6rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-accent-500);
}
.hair-list > li b, .hair-list > li strong { color: var(--color-ink-900); font-weight: 500; }

/* ── Pull-quote ── */
.pull {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.pull em { color: var(--color-blush-400); font-style: italic; }

/* RobotiForms field hooks */
.ra-field { @apply flex flex-col gap-1.5 mb-5; }
.ra-field-label {
  @apply text-xs font-medium text-ink-900 uppercase;
  letter-spacing: 0.12em;
}
.ra-field-input {
  @apply w-full rounded-none border-0 border-b border-ink-300 px-0 py-2.5 text-base text-ink-900 bg-transparent transition;
}
.ra-field-input::placeholder { @apply text-ink-500; }
.ra-field-input:focus { @apply outline-none border-accent-500 ring-0; }
.ra-field--invalid .ra-field-input { @apply border-red-400; }
.ra-field--invalid .ra-field-input:focus { @apply border-red-500; }
.ra-field-error { @apply text-sm text-red-600; }
.ra-btn-primary {
  @apply w-full inline-flex items-center justify-center rounded-full px-7 py-3.5 text-sm font-medium bg-accent-500 text-white transition cursor-pointer;
}
.ra-btn-primary:hover { @apply bg-accent-600; }