/* ==========================================================================
   Southline. — Design-Tokens
   --------------------------------------------------------------------------
   Alle Farben, Schriften, Größen und Abstände an EINER Stelle.
   Wenn du etwas am Look ändern willst, fang hier an.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften (lokal gehostet, siehe /fonts — keine Verbindung zu Google)
   -------------------------------------------------------------------------- */

/* Oswald — Headlines, Logo (Variable Font, Gewicht 200–700) */
@font-face {
  font-family: "Oswald";
  src: url("../fonts/oswald-variable.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

/* Inter — Fließtext (Platzhalter, Variable Font 100–900) */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* IBM Plex Sans — Kandidat für den Fließtext (nur geladen, wenn benutzt) */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

/* IBM Plex Mono — kleine Labels, Ort, Nummern („Film-Klappe“) */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------------
     2. Markenfarben (Rohwerte — nicht direkt in Komponenten verwenden)
     ------------------------------------------------------------------------ */
  --color-black: #141414;      /* Fast-Schwarz — Hintergrund            */
  --color-offwhite: #F2EFE9;   /* Off-White — Text, Titel, Logo         */
  --color-sand: #B8B0A3;       /* Warmes Grau/Sand — Linien, Sekundärtext */
  --color-rust: #B5532F;       /* Gedecktes Rostorange — Akzent         */
  --color-pure-black: #000000; /* Schwarz — aktuelles Grund-Theme        */
  --color-white: #FFFFFF;      /* Weiß — aktuelles Grund-Theme          */

  /* Platzhalter-Fläche, solange keine echten Medien da sind */
  --color-placeholder: #111111;

  /* ------------------------------------------------------------------------
     3. AKZENTFARBE — färbt nur den Punkt im Logo „Southline.“
     Aktuell AUS (Schwarz-Weiß-Phase). Zum Aktivieren:  --accent: var(--color-rust);
     ------------------------------------------------------------------------ */
  --accent: currentColor;

  /* ------------------------------------------------------------------------
     4. Semantische Farben — aktuell reines SCHWARZ / WEISS
        Zurück zum warmen Theme:
          --bg: var(--color-black);   --fg: var(--color-offwhite);
          --fg-muted: var(--color-sand);   --line: rgb(184 176 163 / 0.28);
     ------------------------------------------------------------------------ */
  --bg: var(--color-pure-black);
  --fg: var(--color-white);
  --fg-muted: rgb(255 255 255 / 0.62);  /* Sekundärtext, ~7:1 auf Schwarz */
  --line: rgb(255 255 255 / 0.22);      /* Linien                          */
  --hover: var(--fg-muted);             /* Hover-Farbe von Links            */

  /* ------------------------------------------------------------------------
     5. Grain-Overlay
        An/aus: Klasse „grain“ am <html>-Tag entfernen ODER Deckkraft auf 0.
     ------------------------------------------------------------------------ */
  --grain-opacity: 0.07;

  /* ------------------------------------------------------------------------
     6. Schriften — hier tauschst du die Fließtext-Schrift an EINER Stelle.
        Kandidat:  --font-body: "IBM Plex Sans", system-ui, sans-serif;
     ------------------------------------------------------------------------ */
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Schriftgrößen (fluid: wachsen mit der Bildschirmbreite) */
  --text-label: 0.8125rem;                          /* 13px Mono-Labels   */
  --text-small: 0.9375rem;                          /* 15px               */
  --text-body: 1.0625rem;                           /* 17px Fließtext     */
  --text-lead: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-h3: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --text-h2: clamp(3rem, 1.8rem + 6vw, 7.5rem);
  --text-email: clamp(1.75rem, 0.5rem + 6.5vw, 6rem);

  --leading-body: 1.65;     /* großzügig — heller Text auf Dunkel braucht Luft */
  --leading-tight: 0.92;    /* Headlines in Oswald                             */
  --tracking-label: 0.12em; /* Buchstabenabstand Mono-Labels                   */
  /* Buchstabenabstand Oswald — negativ = enger */
  --tracking-display: -0.025em;     /* große Headlines, Wortmarke, E-Mail  */
  --tracking-display-sm: 0;         /* kleine Oswald-Texte (Nav, Buttons, Work-Titel) */

  /* ------------------------------------------------------------------------
     7. Abstände (4/8er-Raster)
     ------------------------------------------------------------------------ */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.5rem;   /* 24px */
  --space-6: 2rem;     /* 32px */
  --space-7: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-9: 6rem;     /* 96px */

  --gutter: clamp(1rem, 0.4rem + 3vw, 3rem);          /* Seitenrand        */
  --section-y: clamp(5rem, 3rem + 9vw, 11rem);        /* Sektionsabstand   */
  --content-max: none;   /* volle Bildschirmbreite (z. B. 90rem = max. 1440px, zentriert) */
  --text-max: 38rem;                                  /* Zeilenlänge Text  */
  --header-h: 4rem;

  /* Work-Raster: Zielhöhe einer Reihe + Abstand zwischen Kacheln */
  --work-row-h: 18rem;
  --work-gap: 4px;

  /* ------------------------------------------------------------------------
     8. Bewegung
     ------------------------------------------------------------------------ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 180ms;
  --dur-reveal: 900ms;
}

@media (min-width: 768px) {
  :root {
    --work-row-h: 17rem;
    --header-h: 4.5rem;
  }
}

/* Ab 1200px wächst die Reihenhöhe mit der Fensterbreite →
   das Raster sieht auf 1440px, 2000px und 3000px gleich aufgebaut aus. */
@media (min-width: 1200px) {
  :root {
    --work-row-h: 24vw;
  }
}