/**
 * Heim Installationen — Design Tokens
 * Source: Figma file VjEDfhN13ALKDcDUh4Pt6f
 *
 * Colors from CD + typography nodes (mobile-first, desktop ≥ 1024px).
 */

:root {
  /* ——— Colors ——— */
  --color-cd: #163d9e;
  --color-cd-dark: #001039;
  --color-cd-light: #7a9cf2;
  --color-gray-light: #f2f2f2;
  --color-black: #101010;
  --color-white: #ffffff;

  /* ——— Fonts ——— */
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-serif: "PT Serif", Georgia, "Times New Roman", serif;

  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* ——— Layout / Grid ——— */
  /* Mobile: 6 cols, 12px gutter, 24px margin */
  --grid-columns: 6;
  --grid-gutter: 12px;
  --page-margin: 24px;
  --container-max: 1860px;
  --bp-desktop: 1024px;

  /* Column track helper: (100% - gutters) / cols */
  --grid-col: calc(
    (100% - (var(--grid-gutter) * (var(--grid-columns) - 1)))
    / var(--grid-columns)
  );

  /* ——— Icons (theme-relative URLs set via WP enqueue if needed) ——— */
  --icon-arrow: url("../icons/arrow.svg");
  --icon-envelope: url("../icons/envelope.svg");
  --icon-phone: url("../icons/phone.svg");

  /* ——— Type scale (mobile) ——— */
  /* H1 Hero: Sans SemiBold + Serif Italic accent */
  --text-h1-hero-size: 40px;
  --text-h1-hero-line: 48px;
  --text-h1-hero-weight: var(--font-weight-semibold);

  /* H1 medium / H1 small / H2 / H3 */
  --text-h1-medium-size: 30px;
  --text-h1-medium-line: 38px;
  --text-h1-medium-weight: var(--font-weight-medium);

  --text-h1-small-size: 30px;
  --text-h1-small-line: 38px;
  --text-h1-small-weight: var(--font-weight-medium);

  --text-h2-size: 30px;
  --text-h2-line: 38px;
  --text-h2-weight: var(--font-weight-medium);

  --text-h2-small-size: 20px;
  --text-h2-small-line: 30px;
  --text-h2-small-weight: var(--font-weight-medium);

  --text-h3-size: 20px;
  --text-h3-line: 30px;
  --text-h3-weight: var(--font-weight-medium);

  /* Body / Fließtext */
  --text-body-size: 16px;
  --text-body-line: 24px;
  --text-body-weight: var(--font-weight-medium);

  --text-body-small-size: 12px;
  --text-body-small-line: 16px;
  --text-body-small-weight: var(--font-weight-medium);
}

@media (min-width: 1024px) {
  :root {
    /* Desktop: 12 cols, 20px gutter, 40px margin */
    --grid-columns: 12;
    --grid-gutter: 20px;
    --page-margin: 40px;

    --text-h1-hero-size: 80px;
    --text-h1-hero-line: 88px;

    --text-h1-medium-size: 50px;
    --text-h1-medium-line: 58px;

    --text-h1-small-size: 40px;
    --text-h1-small-line: 50px;

    --text-h2-size: 50px;
    --text-h2-line: 58px;

    --text-h2-small-size: 20px;
    --text-h2-small-line: 30px;

    --text-h3-size: 30px;
    --text-h3-line: 38px;

    --text-body-size: 16px;
    --text-body-line: 24px;

    --text-body-small-size: 12px;
    --text-body-small-line: 16px;
  }
}

/* ——— Type utilities (match Figma style names) ——— */

.text-h1-hero {
  font-family: var(--font-sans);
  font-size: var(--text-h1-hero-size);
  line-height: var(--text-h1-hero-line);
  font-weight: var(--text-h1-hero-weight);
}

.text-h1-hero .accent,
.text-h1-hero em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

.text-h1-medium {
  font-family: var(--font-sans);
  font-size: var(--text-h1-medium-size);
  line-height: var(--text-h1-medium-line);
  font-weight: var(--text-h1-medium-weight);
}

.text-h1-small {
  font-family: var(--font-sans);
  font-size: var(--text-h1-small-size);
  line-height: var(--text-h1-small-line);
  font-weight: var(--text-h1-small-weight);
}

.text-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2-size);
  line-height: var(--text-h2-line);
  font-weight: var(--text-h2-weight);
}

.text-h2-small {
  font-family: var(--font-sans);
  font-size: var(--text-h2-small-size);
  line-height: var(--text-h2-small-line);
  font-weight: var(--text-h2-small-weight);
}

.text-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3-size);
  line-height: var(--text-h3-line);
  font-weight: var(--text-h3-weight);
}

.text-body {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  line-height: var(--text-body-line);
  font-weight: var(--text-body-weight);
}

.text-body-small {
  font-family: var(--font-sans);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-line);
  font-weight: var(--text-body-small-weight);
}

.font-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* ——— Grid utilities ——— */

.container {
  width: min(
    calc(100% - (var(--page-margin) * 2)),
    var(--container-max)
  );
  margin-inline: auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: var(--grid-gutter);
}

.col-1 { grid-column-end: span 1; }
.col-2 { grid-column-end: span 2; }
.col-3 { grid-column-end: span 3; }
.col-4 { grid-column-end: span 4; }
.col-5 { grid-column-end: span 5; }
.col-6 { grid-column-end: span 6; }

@media (min-width: 1024px) {
  .col-dt-1 { grid-column-end: span 1; }
  .col-dt-2 { grid-column-end: span 2; }
  .col-dt-3 { grid-column-end: span 3; }
  .col-dt-4 { grid-column-end: span 4; }
  .col-dt-5 { grid-column-end: span 5; }
  .col-dt-6 { grid-column-end: span 6; }
  .col-dt-7 { grid-column-end: span 7; }
  .col-dt-8 { grid-column-end: span 8; }
  .col-dt-9 { grid-column-end: span 9; }
  .col-dt-10 { grid-column-end: span 10; }
  .col-dt-11 { grid-column-end: span 11; }
  .col-dt-12 { grid-column-end: span 12; }

  .col-dt-start-1 { grid-column-start: 1; }
  .col-dt-start-2 { grid-column-start: 2; }
  .col-dt-start-3 { grid-column-start: 3; }
  .col-dt-start-4 { grid-column-start: 4; }
  .col-dt-start-5 { grid-column-start: 5; }
  .col-dt-start-6 { grid-column-start: 6; }
  .col-dt-start-7 { grid-column-start: 7; }
  .col-dt-start-8 { grid-column-start: 8; }
  .col-dt-start-9 { grid-column-start: 9; }
  .col-dt-start-10 { grid-column-start: 10; }
  .col-dt-start-11 { grid-column-start: 11; }
  .col-dt-start-12 { grid-column-start: 12; }
}