/* ═══════════════════════════════════════════════════════════════════════
   casino.de — Design System v1.0
   Typography · Components · Section Spacing
   ═══════════════════════════════════════════════════════════════════════

   Usage: <link rel="stylesheet" href="css/design-system.css">
   Place BEFORE any page-specific styles.

   Fonts: Segoe UI system stack — no external font loading required.
     OS provides: Segoe UI (Windows), San Francisco (macOS via -apple-system),
     Roboto (Android), system-ui fallback elsewhere.

   ═══════════════════════════════════════════════════════════════════════ */


/* ── 1. DESIGN TOKENS ───────────────────────────────────────────────── */

:root {

  /* Colors */
  --color-heading : #ffffff;
  --color-body    : rgba(209, 215, 224, 0.85);

  /* Layout — Höhe der fixierten Top-Disclosure-Leiste (Werbe- & Affiliate-Hinweis).
     Single source of truth: Navigation + Sticky-Sub-Navs rechnen mit calc(... + var(--td-h)). */
  --td-h : 32px;

  /* Fonts — Segoe UI system stack (single family, semantic slots preserved) */
  --font-system  : 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display : var(--font-system);
  --font-body    : var(--font-system);
  --font-mono    : var(--font-system);

  /* ── Heading scale — DESKTOP ── */
  --h1-size : 70px;   --h1-lh : 80px;   --h1-mb : 32px;   --h1-fw : 900;
  --h2-size : 56px;   --h2-lh : 64px;   --h2-mb : 28px;   --h2-fw : 700;
  --h3-size : 44px;   --h3-lh : 56px;   --h3-mb : 24px;   --h3-fw : 700;
  --h4-size : 32px;   --h4-lh : 44px;   --h4-mb : 20px;   --h4-fw : 600;
  --h5-size : 24px;   --h5-lh : 34px;   --h5-mb : 16px;   --h5-fw : 600;
  --h6-size : 20px;   --h6-lh : 30px;   --h6-mb : 12px;   --h6-fw : 600;
  --body-size: 18px;  --body-lh: 28px;  --body-mb: 16px;  --body-fw: 400;

  /* ── Component scale — DESKTOP ── */
  --card-title-size : 24px;  --card-title-lh : 34px;  --card-title-fw : 700;
  --card-body-size  : 18px;  --card-body-lh  : 28px;  --card-body-fw  : 400;
  --card-meta-size  : 14px;  --card-meta-lh  : 20px;  --card-meta-fw  : 500;
  --table-head-size : 14px;  --table-head-lh : 20px;  --table-head-fw : 700;
  --table-cell-size : 16px;  --table-cell-lh : 24px;  --table-cell-fw : 400;
  --btn-size        : 16px;  --btn-lh        : 24px;  --btn-fw        : 600;
  --input-size      : 16px;  --input-lh      : 24px;  --input-fw      : 400;
  --label-size      : 14px;  --label-lh      : 20px;  --label-fw      : 600;
  --helper-size     : 14px;  --helper-lh     : 20px;  --helper-fw     : 400;
  --badge-size      : 13px;  --badge-lh      : 18px;  --badge-fw      : 600;
  --nav-size        : 16px;  --nav-lh        : 24px;  --nav-fw        : 600;
  --caption-size    : 13px;  --caption-lh    : 18px;  --caption-fw    : 400;

  /* ── Section spacing — DESKTOP ── */
  --space-sm   : 48px;    /* small / tight sections            */
  --space-md   : 64px;    /* default / same-level sections     */
  --space-lg   : 96px;    /* major topic break                 */
  --space-hero : 128px;   /* after hero → first content section */
}


/* ── 2. MOBILE OVERRIDES ─────────────────────────────────────────────── */

@media (max-width: 767px) {
  :root {
    /* Heading scale — MOBILE */
    --h1-size : 36px;  --h1-lh : 41px;  --h1-mb : 24px;
    --h2-size : 30px;  --h2-lh : 34px;  --h2-mb : 20px;
    --h3-size : 24px;  --h3-lh : 30px;  --h3-mb : 16px;
    --h4-size : 20px;  --h4-lh : 28px;  --h4-mb : 14px;
    --h5-size : 18px;  --h5-lh : 26px;  --h5-mb : 12px;
    --h6-size : 16px;  --h6-lh : 24px;  --h6-mb : 10px;
    --body-size: 16px; --body-lh: 25px; --body-mb: 12px;

    /* Component scale — MOBILE */
    --card-title-size : 20px;  --card-title-lh : 28px;
    --card-body-size  : 16px;  --card-body-lh  : 24px;
    --card-meta-size  : 13px;  --card-meta-lh  : 18px;
    --table-head-size : 13px;  --table-head-lh : 18px;
    --table-cell-size : 14px;  --table-cell-lh : 20px;
    --label-size      : 13px;  --label-lh      : 18px;
    --helper-size     : 13px;  --helper-lh     : 18px;
    --badge-size      : 12px;  --badge-lh      : 16px;
    --caption-size    : 12px;  --caption-lh    : 16px;
    /* btn / input / nav: same on mobile as desktop (per spec) */

    /* Section spacing — MOBILE */
    --space-sm   : 32px;
    --space-md   : 40px;
    --space-lg   : 56px;
    --space-hero : 64px;
  }
}


/* ── 3. BASE TYPOGRAPHY ──────────────────────────────────────────────── */

body {
  font-family   : var(--font-body);
  font-size     : var(--body-size);
  line-height   : var(--body-lh);
  font-weight   : var(--body-fw);
  color         : var(--color-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family   : var(--font-display);
  color         : var(--color-heading);
  margin-top    : 0;
}

h1 {
  font-size   : var(--h1-size);
  line-height : var(--h1-lh);
  font-weight : var(--h1-fw);
  margin-bottom: var(--h1-mb);
}

h2 {
  font-size   : var(--h2-size);
  line-height : var(--h2-lh);
  font-weight : var(--h2-fw);
  margin-bottom: var(--h2-mb);
}

h3 {
  font-size   : var(--h3-size);
  line-height : var(--h3-lh);
  font-weight : var(--h3-fw);
  margin-bottom: var(--h3-mb);
}

h4 {
  font-size   : var(--h4-size);
  line-height : var(--h4-lh);
  font-weight : var(--h4-fw);
  margin-bottom: var(--h4-mb);
}

h5 {
  font-size   : var(--h5-size);
  line-height : var(--h5-lh);
  font-weight : var(--h5-fw);
  margin-bottom: var(--h5-mb);
}

h6 {
  font-size   : var(--h6-size);
  line-height : var(--h6-lh);
  font-weight : var(--h6-fw);
  margin-bottom: var(--h6-mb);
}

p {
  font-size   : var(--body-size);
  line-height : var(--body-lh);
  font-weight : var(--body-fw);
  color       : var(--color-body);
  margin-top  : 0;
  margin-bottom: var(--body-mb);
}

p:last-child { margin-bottom: 0; }


/* ── 4. COMPONENT TYPOGRAPHY CLASSES ────────────────────────────────── */

/* Cards */
.ds-card-title {
  font-family : var(--font-display);
  font-size   : var(--card-title-size);
  line-height : var(--card-title-lh);
  font-weight : var(--card-title-fw);
  color       : var(--color-heading);
}

.ds-card-body {
  font-family : var(--font-body);
  font-size   : var(--card-body-size);
  line-height : var(--card-body-lh);
  font-weight : var(--card-body-fw);
  color       : var(--color-body);
}

.ds-card-meta {
  font-family : var(--font-mono);
  font-size   : var(--card-meta-size);
  line-height : var(--card-meta-lh);
  font-weight : var(--card-meta-fw);
  color       : var(--color-body);
  opacity     : 0.65;
}

/* Tables */
.ds-table-head,
th {
  font-family : var(--font-body);
  font-size   : var(--table-head-size);
  line-height : var(--table-head-lh);
  font-weight : var(--table-head-fw);
  color       : var(--color-heading);
}

.ds-table-cell,
td {
  font-family : var(--font-body);
  font-size   : var(--table-cell-size);
  line-height : var(--table-cell-lh);
  font-weight : var(--table-cell-fw);
  color       : var(--color-body);
}

/* Buttons */
.ds-btn,
button,
[role="button"] {
  font-family : var(--font-body);
  font-size   : var(--btn-size);
  line-height : var(--btn-lh);
  font-weight : var(--btn-fw);
}

/* Inputs */
input,
textarea,
select,
.ds-input {
  font-family : var(--font-body);
  font-size   : var(--input-size);
  line-height : var(--input-lh);
  font-weight : var(--input-fw);
}

label,
.ds-label {
  font-family : var(--font-body);
  font-size   : var(--label-size);
  line-height : var(--label-lh);
  font-weight : var(--label-fw);
  color       : var(--color-heading);
}

.ds-helper {
  font-family : var(--font-body);
  font-size   : var(--helper-size);
  line-height : var(--helper-lh);
  font-weight : var(--helper-fw);
  color       : var(--color-body);
  opacity     : 0.65;
}

/* Badges & Tags */
.ds-badge,
.ds-tag {
  font-family : var(--font-mono);
  font-size   : var(--badge-size);
  line-height : var(--badge-lh);
  font-weight : var(--badge-fw);
  color       : var(--color-heading);
  letter-spacing: 0.02em;
}

/* Navigation */
.ds-nav-item,
.nav-link {
  font-family : var(--font-body);
  font-size   : var(--nav-size);
  line-height : var(--nav-lh);
  font-weight : var(--nav-fw);
}

/* Captions */
.ds-caption,
figcaption,
caption {
  font-family : var(--font-mono);
  font-size   : var(--caption-size);
  line-height : var(--caption-lh);
  font-weight : var(--caption-fw);
  color       : var(--color-body);
  opacity     : 0.55;
}


/* ── 5. SECTION SPACING UTILITIES ────────────────────────────────────── */

/* Padding utilities (top + bottom) */
.section-sm   { padding-top: var(--space-sm);   padding-bottom: var(--space-sm);   }
.section-md   { padding-top: var(--space-md);   padding-bottom: var(--space-md);   }
.section-lg   { padding-top: var(--space-lg);   padding-bottom: var(--space-lg);   }
.section-hero { padding-top: var(--space-hero); padding-bottom: var(--space-hero); }

/* Gap after (margin-bottom only) — for stacking sections */
.section-gap-sm   { margin-bottom: var(--space-sm);   }
.section-gap-md   { margin-bottom: var(--space-md);   }
.section-gap-lg   { margin-bottom: var(--space-lg);   }
.section-gap-hero { margin-bottom: var(--space-hero); }

/* Semantic section rules:
   - Same topic / same level  → use .section-md  (64px desktop / 40px mobile)
   - New topic / major break  → use .section-lg  (96px desktop / 56px mobile)
   - Hero → first content     → use .section-hero (128px desktop / 64px mobile)
   - Tight / compact blocks   → use .section-sm  (48px desktop / 32px mobile) */


/* ── 6. PROSE / ARTICLE CONTENT ──────────────────────────────────────── */

/* Opt-in wrapper for long-form content (blog posts, reviews, standard pages).
   Applies the full type scale to raw semantic HTML inside .prose. */

.prose h1 { font-size: var(--h1-size); line-height: var(--h1-lh); font-weight: var(--h1-fw); margin-bottom: var(--h1-mb); }
.prose h2 { font-size: var(--h2-size); line-height: var(--h2-lh); font-weight: var(--h2-fw); margin-bottom: var(--h2-mb); }
.prose h3 { font-size: var(--h3-size); line-height: var(--h3-lh); font-weight: var(--h3-fw); margin-bottom: var(--h3-mb); }
.prose h4 { font-size: var(--h4-size); line-height: var(--h4-lh); font-weight: var(--h4-fw); margin-bottom: var(--h4-mb); }
.prose h5 { font-size: var(--h5-size); line-height: var(--h5-lh); font-weight: var(--h5-fw); margin-bottom: var(--h5-mb); }
.prose h6 { font-size: var(--h6-size); line-height: var(--h6-lh); font-weight: var(--h6-fw); margin-bottom: var(--h6-mb); }
.prose p  { font-size: var(--body-size); line-height: var(--body-lh); margin-bottom: var(--body-mb); }

.prose h1, .prose h2, .prose h3,
.prose h4, .prose h5, .prose h6 {
  font-family : var(--font-display);
  color       : var(--color-heading);
  margin-top  : 0;
}

.prose p,
.prose li {
  font-family : var(--font-body);
  color       : var(--color-body);
}

.prose ul,
.prose ol {
  font-size   : var(--body-size);
  line-height : var(--body-lh);
  color       : var(--color-body);
  padding-left: 1.5em;
  margin-bottom: var(--body-mb);
}

.prose blockquote {
  font-size   : var(--h5-size);
  line-height : var(--h5-lh);
  font-weight : 400;
  color       : var(--color-heading);
  border-left : 3px solid currentColor;
  padding-left: 1.25em;
  margin       : 0 0 var(--h5-mb);
  opacity     : 0.85;
}

.prose figure { margin: 0 0 var(--body-mb); }
.prose figcaption {
  font-size   : var(--caption-size);
  line-height : var(--caption-lh);
  font-weight : var(--caption-fw);
  color       : var(--color-body);
  opacity     : 0.55;
  margin-top  : 8px;
}

.prose table  { width: 100%; border-collapse: separate; border-spacing: 0; margin-bottom: var(--body-mb); }
.prose th     { font-size: var(--table-head-size); line-height: var(--table-head-lh); font-weight: var(--table-head-fw); color: var(--color-heading); text-align: left; }
.prose td     { font-size: var(--table-cell-size); line-height: var(--table-cell-lh); font-weight: var(--table-cell-fw); color: var(--color-body); }
.prose th, .prose td { padding: 10px 12px; }

/* ── Base: responsive images (frontend-dev standard) ── */
img { max-width: 100%; height: auto; }

/* ── Base: focus-visible (a11y, site-wide) ──
   Sichtbarer Keyboard-Fokus auf interaktiven Elementen. Gold-Outline-Konvention
   zentral übernommen aus review.css / spielbank.css (dort page-scoped). */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid #F5A623;
  outline-offset: 2px;
  border-radius: 4px;
}