/* ==========================================================================
   Jetzt-Online — Colors & Type
   A Mintlify-inspired documentation-grade design system.
   --------------------------------------------------------------------------
   Two-font system:
     - Inter for all human-readable content
     - Geist Mono exclusively for code / technical labels
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ------------------------------------------------------------------
     COLOR — BRAND
  ------------------------------------------------------------------ */
  --jz-brand:          #18E299;  /* signature green */
  --jz-brand-light:    #d4fae8;  /* tinted green surface */
  --jz-brand-deep:     #0fa76e;  /* text on light-green badges, hover */

  /* ------------------------------------------------------------------
     COLOR — NEUTRAL SCALE
  ------------------------------------------------------------------ */
  --jz-black:          #0d0d0d;  /* near-black, primary text */
  --jz-white:          #ffffff;  /* pure white, page background */

  --jz-gray-900:       #0d0d0d;
  --jz-gray-700:       #333333;
  --jz-gray-500:       #666666;
  --jz-gray-400:       #888888;
  --jz-gray-200:       #e5e5e5;
  --jz-gray-100:       #f5f5f5;
  --jz-gray-50:        #fafafa;

  /* ------------------------------------------------------------------
     COLOR — SEMANTIC
  ------------------------------------------------------------------ */
  --jz-warn:           #c37d0d;
  --jz-warn-bg:        #fef4e0;
  --jz-info:           #3772cf;
  --jz-info-bg:        #e4edfa;
  --jz-error:          #d45656;
  --jz-error-bg:       #fbe5e5;
  --jz-success:        var(--jz-brand-deep);
  --jz-success-bg:     var(--jz-brand-light);

  /* ------------------------------------------------------------------
     COLOR — FOREGROUND / BACKGROUND ROLES
  ------------------------------------------------------------------ */
  --jz-fg1:            var(--jz-gray-900);  /* headings, primary text */
  --jz-fg2:            var(--jz-gray-700);  /* body, secondary */
  --jz-fg3:            var(--jz-gray-500);  /* tertiary, muted */
  --jz-fg4:            var(--jz-gray-400);  /* placeholder, disabled */

  --jz-bg1:            var(--jz-white);     /* page */
  --jz-bg2:            var(--jz-gray-50);   /* near-white surface tint */
  --jz-bg3:            var(--jz-gray-100);  /* subtle hover surface */

  /* ------------------------------------------------------------------
     BORDERS — depth through opacity, not weight
  ------------------------------------------------------------------ */
  --jz-border-subtle:  rgba(0,0,0,0.05);    /* primary separator */
  --jz-border-medium:  rgba(0,0,0,0.08);    /* interactive / input */
  --jz-border-strong:  rgba(0,0,0,0.12);    /* hover on interactive */

  --jz-focus-ring:     var(--jz-brand);

  /* ------------------------------------------------------------------
     SHADOWS — atmospheric whispers, not depth-stacks
  ------------------------------------------------------------------ */
  --jz-shadow-card:    0 2px 4px rgba(0,0,0,0.03);
  --jz-shadow-button:  0 1px 2px rgba(0,0,0,0.06);
  --jz-shadow-lift:    0 8px 24px rgba(0,0,0,0.06);

  /* ------------------------------------------------------------------
     RADII — full-pill is the signature shape
  ------------------------------------------------------------------ */
  --jz-radius-xs:      4px;      /* inline code, tiny tags */
  --jz-radius-sm:      8px;      /* nav buttons, small containers */
  --jz-radius-md:      16px;     /* standard cards, containers */
  --jz-radius-lg:      24px;     /* featured cards, hero panels */
  --jz-radius-pill:    9999px;   /* buttons, inputs, badges */

  /* ------------------------------------------------------------------
     SPACING — 8px base, occasional half-steps
  ------------------------------------------------------------------ */
  --jz-space-0:        0;
  --jz-space-1:        2px;
  --jz-space-2:        4px;
  --jz-space-3:        8px;
  --jz-space-4:        12px;
  --jz-space-5:        16px;
  --jz-space-6:        24px;
  --jz-space-7:        32px;
  --jz-space-8:        48px;
  --jz-space-9:        64px;
  --jz-space-10:       96px;

  /* ------------------------------------------------------------------
     TYPE — FAMILIES
  ------------------------------------------------------------------ */
  --jz-font-sans: "Inter", "Inter Fallback", system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --jz-font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace,
                  SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ------------------------------------------------------------------
     TYPE — SCALE TOKENS
     (raw building blocks — use semantic classes below for normal work)
  ------------------------------------------------------------------ */
  --jz-fs-display:     64px;
  --jz-fs-h1:          40px;
  --jz-fs-h2:          24px;
  --jz-fs-h3:          20px;
  --jz-fs-lg:          18px;
  --jz-fs-body:        16px;
  --jz-fs-button:      15px;
  --jz-fs-sm:          14px;
  --jz-fs-xs:          13px;
  --jz-fs-mono:        12px;
  --jz-fs-micro:       10px;

  --jz-weight-regular: 400;
  --jz-weight-medium:  500;
  --jz-weight-semi:    600;

  --jz-lh-tight:       1.15;
  --jz-lh-snug:        1.30;
  --jz-lh-normal:      1.50;
}

/* ==========================================================================
   DARK MODE
   Brand green works on both backgrounds, so only surfaces invert.
   ========================================================================== */
.jz-dark, [data-theme="dark"] {
  --jz-bg1:            #0d0d0d;
  --jz-bg2:            #141414;
  --jz-bg3:            #1c1c1c;

  --jz-fg1:            #ededed;
  --jz-fg2:            #a0a0a0;
  --jz-fg3:            #888888;
  --jz-fg4:            #666666;

  --jz-border-subtle:  rgba(255,255,255,0.06);
  --jz-border-medium:  rgba(255,255,255,0.08);
  --jz-border-strong:  rgba(255,255,255,0.14);

  --jz-shadow-card:    0 2px 4px rgba(0,0,0,0.4);
  --jz-shadow-button:  0 1px 2px rgba(0,0,0,0.5);
  --jz-shadow-lift:    0 8px 24px rgba(0,0,0,0.5);
}

/* ==========================================================================
   SEMANTIC TYPE CLASSES
   Use these in components; the raw tokens above are escape hatches.
   ========================================================================== */

.jz-display {
  font-family: var(--jz-font-sans);
  font-size: var(--jz-fs-display);
  font-weight: var(--jz-weight-semi);
  line-height: var(--jz-lh-tight);
  letter-spacing: -1.28px;
  color: var(--jz-fg1);
}

.jz-h1 {
  font-family: var(--jz-font-sans);
  font-size: var(--jz-fs-h1);
  font-weight: var(--jz-weight-semi);
  line-height: 1.10;
  letter-spacing: -0.8px;
  color: var(--jz-fg1);
}

.jz-h2 {
  font-family: var(--jz-font-sans);
  font-size: var(--jz-fs-h2);
  font-weight: var(--jz-weight-medium);
  line-height: var(--jz-lh-snug);
  letter-spacing: -0.24px;
  color: var(--jz-fg1);
}

.jz-h3 {
  font-family: var(--jz-font-sans);
  font-size: var(--jz-fs-h3);
  font-weight: var(--jz-weight-semi);
  line-height: var(--jz-lh-snug);
  letter-spacing: -0.2px;
  color: var(--jz-fg1);
}

.jz-h3-light {
  font-family: var(--jz-font-sans);
  font-size: var(--jz-fs-h3);
  font-weight: var(--jz-weight-medium);
  line-height: var(--jz-lh-snug);
  letter-spacing: -0.2px;
  color: var(--jz-fg1);
}

.jz-lead {
  font-family: var(--jz-font-sans);
  font-size: var(--jz-fs-lg);
  font-weight: var(--jz-weight-regular);
  line-height: var(--jz-lh-normal);
  color: var(--jz-fg3);
}

.jz-body {
  font-family: var(--jz-font-sans);
  font-size: var(--jz-fs-body);
  font-weight: var(--jz-weight-regular);
  line-height: var(--jz-lh-normal);
  color: var(--jz-fg2);
}

.jz-body-medium {
  font-family: var(--jz-font-sans);
  font-size: var(--jz-fs-body);
  font-weight: var(--jz-weight-medium);
  line-height: var(--jz-lh-normal);
  color: var(--jz-fg1);
}

.jz-button-text {
  font-family: var(--jz-font-sans);
  font-size: var(--jz-fs-button);
  font-weight: var(--jz-weight-medium);
  line-height: var(--jz-lh-normal);
}

.jz-link {
  font-family: var(--jz-font-sans);
  font-size: var(--jz-fs-sm);
  font-weight: var(--jz-weight-medium);
  line-height: var(--jz-lh-normal);
  color: var(--jz-fg1);
  text-decoration: none;
  transition: color 160ms ease;
}
.jz-link:hover { color: var(--jz-brand-deep); }

.jz-caption {
  font-family: var(--jz-font-sans);
  font-size: var(--jz-fs-sm);
  font-weight: var(--jz-weight-regular);
  line-height: var(--jz-lh-normal);
  color: var(--jz-fg3);
}

.jz-label {
  font-family: var(--jz-font-sans);
  font-size: var(--jz-fs-xs);
  font-weight: var(--jz-weight-medium);
  line-height: var(--jz-lh-normal);
  letter-spacing: 0.65px;
  text-transform: uppercase;
  color: var(--jz-fg3);
}

.jz-small {
  font-family: var(--jz-font-sans);
  font-size: var(--jz-fs-xs);
  font-weight: var(--jz-weight-regular);
  line-height: var(--jz-lh-normal);
  letter-spacing: -0.26px;
  color: var(--jz-fg2);
}

.jz-mono {
  font-family: var(--jz-font-mono);
  font-size: var(--jz-fs-mono);
  font-weight: var(--jz-weight-medium);
  line-height: var(--jz-lh-normal);
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--jz-fg2);
}

.jz-mono-badge {
  font-family: var(--jz-font-mono);
  font-size: var(--jz-fs-mono);
  font-weight: var(--jz-weight-semi);
  line-height: var(--jz-lh-normal);
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.jz-mono-micro {
  font-family: var(--jz-font-mono);
  font-size: var(--jz-fs-micro);
  font-weight: var(--jz-weight-medium);
  line-height: var(--jz-lh-normal);
  text-transform: uppercase;
  color: var(--jz-fg3);
}

/* ==========================================================================
   BASE ELEMENT STYLES (optional — opt-in via .jz-prose)
   ========================================================================== */
.jz-prose h1 { @extend .jz-h1; }
.jz-prose h2 { @extend .jz-h2; }
.jz-prose p  { @extend .jz-body; }

/* ==========================================================================
   ATMOSPHERIC HERO GRADIENT
   The signature cloud-like green-white wash.
   ========================================================================== */
.jz-hero-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 50% 10%,
      rgba(24, 226, 153, 0.22) 0%,
      rgba(24, 226, 153, 0.08) 35%,
      rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 60% 50% at 20% 30%,
      rgba(24, 226, 153, 0.12) 0%,
      rgba(255, 255, 255, 0) 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%,
      rgba(24, 226, 153, 0.10) 0%,
      rgba(255, 255, 255, 0) 60%),
    #ffffff;
}

/* Dark-mode variant: deeper, tinted green atmospheric wash */
.jz-dark .jz-hero-gradient,
[data-theme="dark"] .jz-hero-gradient {
  background:
    radial-gradient(ellipse 80% 60% at 50% 10%,
      rgba(24, 226, 153, 0.18) 0%,
      rgba(24, 226, 153, 0.06) 35%,
      rgba(13, 13, 13, 0) 70%),
    #0d0d0d;
}