/* ============================================================
   Doku — Product Theme
   Identità: calmo, minimale, raffinato, Warm Ivory / Deep Slate,
   scrittura Markdown, cyan sobrio, grande spazio bianco
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700;8..60,800&display=swap');

:root[data-product="doku"] {
  --color-base: #f6f3ee;
  --color-surface: #fdfbf7;
  --color-elevated: #ffffff;
  --color-text: #1a1816;
  --color-text-muted: #6b6560;
  --color-border: #e5e0d8;
  --color-border-subtle: #ede9e2;
  --color-accent: #00a3ee;
  --color-accent-strong: #007eb8;
  --color-accent-soft: rgba(0, 163, 238, .14);
  --color-accent-shadow: rgba(0, 163, 238, .26);
  --color-on-accent: #ffffff;
  --color-band: linear-gradient(135deg, #121214, #00a3ee);
  --color-band-text: #ffffff;
  --font-ui: Inter, system-ui, sans-serif;
}

/* ===== Hero — Warm Ivory, calmo ===== */
[data-product="doku"] .hero {
  background:
    radial-gradient(ellipse at 75% 20%, rgba(0,163,238,.04) 0%, transparent 50%),
    var(--color-base);
}

[data-product="doku"] .hero-title {
  background: linear-gradient(135deg, #1a1816, #007eb8, #00a3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ===== Titoli sezione — serif editoriale sottile ===== */
[data-product="doku"] .section-title {
  font-family: "Source Serif 4", Georgia, serif;
  letter-spacing: -.03em;
}
[data-product="doku"] .slide-title {
  font-family: "Source Serif 4", Georgia, serif;
  color: #1a1816;
  letter-spacing: -.03em;
}

/* ===== Mock window — editor Markdown ===== */
[data-product="doku"] .mock-window {
  background: #fdfbf7;
  border-color: #e5e0d8;
}
[data-product="doku"] .mock-toolbar {
  background: #f6f3ee;
  border-bottom-color: #e5e0d8;
}
[data-product="doku"] .mock-toolbar span:nth-child(1) { background: #ff5f57; }
[data-product="doku"] .mock-toolbar span:nth-child(2) { background: #febc2e; }
[data-product="doku"] .mock-toolbar span:nth-child(3) { background: #28c840; }

[data-product="doku"] .mock-content {
  background: #fdfbf7;
  font-family: "Source Serif 4", Georgia, serif;
}
[data-product="doku"] .mock-content h2 {
  color: #007eb8;
  font-family: "Source Serif 4", Georgia, serif;
}
[data-product="doku"] .mock-content p {
  color: #6b6560;
}
[data-product="doku"] .mock-bars i:nth-child(1) {
  background: rgba(0,163,238,.12);
}
[data-product="doku"] .mock-bars i:nth-child(2) {
  background: rgba(0,163,238,.08);
  width: 48%;
}
[data-product="doku"] .mock-bars i:nth-child(3) {
  background: rgba(0,163,238,.06);
  width: 66%;
}

/* ===== Slides — bordo sottile, calmo ===== */
[data-product="doku"] .slide-card {
  background: #fdfbf7;
  border-color: #ede9e2;
}
[data-product="doku"] .slide-card.is-active {
  border-color: rgba(0,163,238,.18);
}

/* ===== Feature cards ===== */
[data-product="doku"] .feature-card {
  background: #fdfbf7;
  border-color: #ede9e2;
}
[data-product="doku"] .feature-card:hover {
  border-color: rgba(0,163,238,.18);
  box-shadow: 0 12px 38px rgba(0,163,238,.08);
}
[data-product="doku"] .feature-card h3 {
  color: #007eb8;
}

/* ===== Badges — tono neutro/cyan ===== */
[data-product="doku"] .badge {
  border-color: #e5e0d8;
  background: rgba(0,163,238,.06);
  color: #007eb8;
}

/* ===== Open card ===== */
[data-product="doku"] .open-card {
  background: linear-gradient(180deg, #f0f7fc, #fdfbf7);
  border-color: #e5e0d8;
}

/* ===== Problem card ===== */
[data-product="doku"] .problem-card {
  background: linear-gradient(180deg, #f6f3ee, #fdfbf7);
  border-color: #ede9e2;
}

/* ===== Ufficio Zero — Deep Slate → cyan ===== */
[data-product="doku"] .uzero-band {
  background: linear-gradient(135deg, #121214, #00a3ee);
  color: #ffffff;
  border-color: #2a2a30;
}
[data-product="doku"] .uzero-band .hero-kicker {
  background: rgba(255,255,255,.12);
  color: #ffffff;
}
[data-product="doku"] .uzero-band .section-title {
  color: #ffffff;
  font-family: "Source Serif 4", Georgia, serif;
}

/* ===== CTA — cyan sobrio ===== */
[data-product="doku"] .btn-primary {
  background: #00a3ee;
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(0,163,238,.26);
}
[data-product="doku"] .btn-primary:hover {
  background: #007eb8;
  color: #ffffff;
  box-shadow: 0 20px 46px rgba(0,163,238,.32);
}
[data-product="doku"] .btn-secondary {
  border-color: #e5e0d8;
  color: #1a1816;
}
[data-product="doku"] .btn-secondary:hover {
  background: rgba(0,163,238,.08);
  color: #007eb8;
  border-color: #00a3ee;
}

/* ===== Nav CTA ===== */
[data-product="doku"] .nav-cta {
  background: #00a3ee !important;
  color: #ffffff !important;
}
[data-product="doku"] .nav-cta:hover {
  background: #007eb8 !important;
}

/* ===== Header — Warm Ivory ===== */
[data-product="doku"] .site-header {
  background: rgba(253,251,247,.92);
  border-bottom-color: #e5e0d8;
}

/* ===== Slide dots ===== */
[data-product="doku"] .slide-dot {
  background: #e5e0d8;
}
[data-product="doku"] .slide-dot.is-current {
  background: #00a3ee;
}

/* ===== Kicker ===== */
[data-product="doku"] .hero-kicker {
  background: rgba(0,163,238,.1);
  color: #007eb8;
}

/* ===== Footer ===== */
[data-product="doku"] .footer {
  border-top-color: #e5e0d8;
}
[data-product="doku"] .footer a {
  color: #007eb8;
}