/* ── Design tokens ──────────────────────────────────────────────────────────
   Semantic CSS custom properties. Change these to retheme the entire site.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  /* Brand */
  --color-brand:          #ea580c; /* orange-600 */
  --color-brand-light:    #f97316; /* orange-500 */
  --color-brand-dark:     #c2410c; /* orange-700 */

  /* Text */
  --color-text-heading:   #0f172a; /* slate-900 */
  --color-text-body:      #475569; /* slate-600 */
  --color-text-muted:     #64748b; /* slate-500 */
  --color-text-faint:     #94a3b8; /* slate-400 */

  /* Surfaces & borders */
  --color-surface:        #ffffff;
  --color-surface-subtle: #f8fafc; /* slate-50  */
  --color-border:         #e2e8f0; /* slate-200 */
  --color-border-input:   #cbd5e1; /* slate-300 */
}

/* ── Components ─────────────────────────────────────────────────────────────
   All new templates should use these instead of raw utility strings.
   ─────────────────────────────────────────────────────────────────────────── */
@layer components {

  /* Uppercase orange eyebrow above section headings */
  .section-label {
    @apply text-sm font-semibold uppercase tracking-widest text-orange-700;
  }

  /* ── Buttons ── */
  .btn-primary {
    @apply inline-flex items-center gap-2 rounded-lg bg-orange-700 px-6 py-3 text-base font-semibold text-white shadow-lg shadow-orange-700/25 transition-all hover:bg-orange-600 hover:shadow-orange-600/30 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-white;
  }

  .btn-secondary {
    @apply inline-flex items-center gap-2 rounded-lg border border-slate-300 px-6 py-3 text-base font-semibold text-slate-700 transition-all hover:border-orange-600/50 hover:text-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-white;
  }

  /* Compact ghost button, e.g. "Alle Artikel →" */
  .btn-ghost {
    @apply inline-flex items-center gap-1 rounded-lg border border-slate-300 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-orange-600/50 hover:text-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 focus:ring-offset-white;
  }

  /* ── Cards ──
     Add p-* and extra layout classes (overflow-hidden, etc.) at the usage site.
  */
  .card {
    @apply rounded-xl border border-slate-200 bg-white transition-all duration-200 hover:border-orange-600/50 hover:shadow-lg hover:shadow-orange-600/5;
  }

  /* ── Badges & tags ── */

  /* Orange pill — category label */
  .badge-category {
    @apply inline-flex items-center gap-2 rounded-full border border-orange-500/30 bg-orange-500/10 px-4 py-1.5 text-sm font-medium text-orange-700;
  }

  /* Neutral grey pill */
  .badge-neutral {
    @apply rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-500;
  }

  /* Rectangular skill/tech tag */
  .tag {
    @apply rounded-md border border-slate-200 bg-slate-100 px-3 py-1 text-sm font-medium text-slate-700;
  }

  /* ── Code block (fake macOS window chrome) ──────────────────────────────
     Usage:
       <div class="code-window my-6 shadow-lg">
         <div class="code-window-bar">
           <span class="code-window-dot bg-red-500/70"></span>
           <span class="code-window-dot bg-yellow-500/70"></span>
           <span class="code-window-dot bg-green-500/70"></span>
           <span class="code-window-label">filename.rs</span>
         </div>
         <pre class="overflow-x-auto p-6 text-sm leading-loose">...</pre>
       </div>
     Add shadow-* and spacing classes at the usage site.
  */
  .code-window {
    @apply overflow-hidden rounded-xl border border-slate-200 bg-slate-50;
  }

  .code-window-bar {
    @apply flex items-center gap-2 border-b border-slate-200 bg-white px-4 py-3;
  }

  /* Combine with a bg-* colour: bg-red-500/70, bg-yellow-500/70, bg-green-500/70 */
  .code-window-dot {
    @apply h-3 w-3 rounded-full;
  }

  .code-window-label {
    @apply ml-2 text-xs text-slate-400;
  }

  /* ── Hero decorative blobs (always aria-hidden + pointer-events-none) ── */
  .hero-blob-primary {
    @apply absolute left-1/2 top-0 h-[600px] w-[600px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-orange-500/10 blur-3xl;
  }

  .hero-blob-secondary {
    @apply absolute right-0 top-1/2 h-64 w-64 rounded-full bg-orange-600/5 blur-2xl;
  }

  /* ── Gradient CTA / callout card ──
     Add p-* at the usage site.
  */
  .cta-card {
    @apply overflow-hidden rounded-2xl border border-orange-500/20 bg-gradient-to-br from-orange-500/10 to-white;
  }

  /* ── Article / blog-post prose ─────────────────────────────────────────
     Use these inside <article> elements for consistent blog typography.
  */
  .prose-h2 {
    @apply mb-4 mt-14 text-2xl font-bold text-slate-900;
  }

  .prose-h3 {
    @apply mb-2 text-lg font-semibold text-slate-900;
  }

  .prose-p {
    @apply mb-4 text-base leading-relaxed text-slate-600;
  }

  /* Inline hyperlink */
  .prose-a {
    @apply text-orange-600 underline underline-offset-2 hover:text-orange-700;
  }

  /* Bold inline hyperlink */
  .prose-a-strong {
    @apply font-semibold text-orange-600 underline underline-offset-2 hover:text-orange-700;
  }

  /* Inline <code> span */
  .prose-code {
    @apply rounded bg-slate-100 px-1.5 py-0.5 text-sm font-mono text-slate-700;
  }

  /* Left-border blockquote */
  .prose-blockquote {
    @apply border-l-2 border-orange-500 pl-4;
  }

  /* <ul> / <ol> wrapper */
  .prose-list {
    @apply mb-6 space-y-3 pl-6 text-base leading-relaxed text-slate-600;
  }

  /* Individual <li> — orange ▸ bullet rendered via ::before below */
  .prose-list-item {
    @apply relative pl-2;
  }
}

/* Outside @layer so the pseudo-element is never purged */
.prose-list-item::before {
  content: '▸';
  @apply absolute -left-4 text-orange-500;
}