/* Konsumentenretter – Static export design tokens & custom utilities */

:root {
  --radius: 1rem;
  --background: oklch(0.985 0.005 240);
  --foreground: oklch(0.18 0.04 255);
  --surface: oklch(0.955 0.01 245);
  --ink: oklch(0.16 0.04 255);
  --brand: oklch(0.58 0.22 255);
  --brand-deep: oklch(0.28 0.12 260);
  --gold: oklch(0.62 0.22 255);
  --card: oklch(1 0 0);
  --popover: oklch(1 0 0);
  --primary: var(--brand);
  --primary-foreground: oklch(0.99 0.005 240);
  --secondary: oklch(0.94 0.012 245);
  --muted: oklch(0.95 0.008 240);
  --muted-foreground: oklch(0.48 0.03 255);
  --accent: oklch(0.93 0.04 250);
  --accent-foreground: var(--brand-deep);
  --border: oklch(0.9 0.012 245);
  --input: oklch(0.9 0.012 245);
  --ring: var(--brand);
}

html {
  scroll-behavior: smooth;
  font-size: 17.5px;
}
body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
.font-serif { font-family: "Instrument Serif", ui-serif, Georgia, serif; font-feature-settings: "liga"; }

* { border-color: var(--border); }

.text-balance { text-wrap: balance; }
.bg-grain {
  background-image: radial-gradient(circle at 1px 1px, oklch(0.18 0.04 255 / 0.04) 1px, transparent 0);
  background-size: 24px 24px;
}
.ring-soft { box-shadow: 0 1px 0 oklch(0.18 0.04 255 / 0.04), 0 8px 24px -12px oklch(0.18 0.04 255 / 0.12); }

/* Pulse animation */
@keyframes pulse-soft { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
.animate-pulse { animation: pulse-soft 2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* Details summary marker hide */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] > summary .chev-rot { transform: rotate(180deg); }
details[open] > summary .arrow-rot { transform: rotate(90deg); }

/* Radio cards with :has selector fallback */
.radio-card { display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:.75rem; border:1px solid var(--border); background:var(--background); padding:.75rem 1rem; font-size:.875rem; color:var(--ink); transition:all .15s; text-align:center; }
.radio-card:has(input:checked) { border-color:var(--brand); background:color-mix(in oklch, var(--brand) 10%, transparent); }
.radio-card input { position:absolute; width:1px; height:1px; opacity:0; }

/* Lucide icons inherit currentColor */
[data-lucide] { width: 1em; height: 1em; stroke-width: 2; }

/* Open state rounded for documents block */
details.doc-pill { border-radius: 9999px; }
details.doc-pill[open] { border-radius: 1rem; }

/* Whatsapp button color */
.bg-whatsapp { background-color: #25D366; }