@import "tailwindcss";

/* Vue SFCs live under app/ — declare them explicitly so class detection never misses. */
@source "../../**/*.vue";
@source "../../**/*.ts";

/* ════════════════════════════════════════════════════════════════════════════════
   Blut24 design tokens
   Style: "Accessible & Ethical + Minimalism" (WCAG AA, 16px+ body, no neon,
   no motion-heavy effects, no purple/pink gradients).
   Brand: reds #C62828 #B71C1C #EF5350 · blues #1565C0 #0D47A1 #64B5F6 · surface #F8FAFC
   Verified contrast on white: #B71C1C 6.6:1 · #C62828 5.6:1 · #0D47A1 8.6:1 · #1565C0 5.7:1
   ════════════════════════════════════════════════════════════════════════════════ */
@theme {
  --color-blood-50:  #FFF5F5;
  --color-blood-100: #FFE4E4;
  --color-blood-200: #FFC9C9;
  --color-blood-300: #EF5350;
  --color-blood-500: #C62828;
  --color-blood-700: #B71C1C;
  --color-blood-900: #7F1414;

  --color-trust-50:  #EFF6FF;
  --color-trust-100: #DCEAFB;
  --color-trust-300: #64B5F6;
  --color-trust-500: #1565C0;
  --color-trust-700: #0D47A1;

  /* "No cost" green. The only green on the site, reserved for the free-of-charge
     message so it reads as reassurance rather than as another brand accent — red stays
     unique to the primary CTA. Contrast on white: #065F46 9.4:1, #047857 5.3:1 (so white
     text and icons on the -600 fill clear AA). */
  --color-free-50:  #ECFDF5;
  --color-free-200: #A7F3D0;
  --color-free-600: #047857;
  --color-free-800: #065F46;

  --color-surface:     #F8FAFC;
  --color-surface-alt: #F1F5F9;
  --color-ink:         #0F172A;
  --color-ink-soft:    #334155;
  --color-ink-muted:   #475569;
  --color-line:        #E2E8F0;

  /* System stack on purpose: no Google-Fonts CDN request (DSGVO), no FOIT, no extra
     round trip. Mirrors the "Figtree / Noto Sans" recommendation in feel. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;

  --radius-card: 16px;
}

/* ── base ─────────────────────────────────────────────────────────────────────── */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
    -webkit-text-size-adjust: 100%;
  }

  body {
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: 1.0625rem;     /* 17px — above the 16px minimum */
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    color: var(--color-ink);
    line-height: 1.2;
    text-wrap: balance;
    font-weight: 700;
  }

  p { text-wrap: pretty; }

  /* Always-visible, high-contrast focus ring (3px) — never removed. */
  :focus-visible {
    outline: 3px solid var(--color-trust-500);
    outline-offset: 2px;
    border-radius: 4px;
  }

  ::selection {
    background: var(--color-blood-100);
    color: var(--color-blood-900);
  }
}

/* ── components ───────────────────────────────────────────────────────────────── */
@layer components {
  /* Skip link: hidden until it receives keyboard focus. */
  .b24-skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    min-height: 3rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0 0 12px 12px;
    background: var(--color-blood-700);
    color: #fff;
    font-weight: 650;
    text-decoration: none;
    transition: top 160ms ease;
  }
  .b24-skip:focus { top: 0; }

  .b24-container {
    width: 100%;
    max-width: 76rem;
    margin-inline: auto;
    padding-inline: 1.25rem;
  }

  /* All interactive controls keep a ≥44px target. */
  .b24-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 3rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-weight: 650;
    font-size: 1.0625rem;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease,
      box-shadow 180ms ease;
  }

  .b24-btn-primary {
    background: var(--color-blood-700);
    color: #fff;
    box-shadow: 0 1px 2px rgb(15 23 42 / 0.16);
  }
  .b24-btn-primary:hover { background: var(--color-blood-900); }

  .b24-btn-secondary {
    background: #fff;
    color: var(--color-trust-700);
    border: 2px solid var(--color-trust-500);
  }
  .b24-btn-secondary:hover { background: var(--color-trust-50); }

  .b24-btn-ghost {
    background: transparent;
    color: var(--color-ink-soft);
    border: 2px solid var(--color-line);
  }
  .b24-btn-ghost:hover { background: #fff; border-color: var(--color-ink-muted); }

  .b24-card {
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: 1.5rem;
  }

  .b24-label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-ink-soft);
    margin-bottom: 0.35rem;
  }

  .b24-input {
    display: block;
    width: 100%;
    min-height: 3rem;
    padding: 0.7rem 0.9rem;
    font-size: 1.0625rem;
    line-height: 1.4;
    color: var(--color-ink);
    background: #fff;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
  }
  .b24-input::placeholder { color: #94A3B8; }
  .b24-input:hover { border-color: #94A3B8; }
  .b24-input[aria-invalid="true"] { border-color: var(--color-blood-500); }

  .b24-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-blood-700);
  }

  .b24-section-title {
    font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
    letter-spacing: -0.01em;
  }
}

/* ── motion ───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}