/* ==========================================================================
   Francisco Palomo – Design Tokens
   Einzige Quelle für Farben, Typografie, Abstände, Layout und Bewegung.
   Regel: In Komponenten niemals Rohwerte (Hex, px) verwenden – nur Tokens.
   ========================================================================== */

/* ---------- Schriften (lokal gehostet, DSGVO-konform) ---------- */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-latin-wght-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Light (Standard) ---------- */
:root {
  color-scheme: light;

  /* Farben – bewusst fast farblos. Farbe kommt aus den Fotos. */
  --color-bg: #f7f6f3;          /* Papierweiß, leicht warm */
  --color-surface: #efede8;     /* Flächen: Kacheln, Hover, Infobox */
  --color-text: #1b1a18;        /* Haupttext  (16.5:1 auf bg) */
  --color-text-muted: #5f5c56;  /* Metadaten, Bildunterschriften (6.2:1) */
  --color-border: #dcd9d2;      /* Haarlinien */
  --color-accent: #8a5a2b;      /* Nur Link-Hover, Fokus, aktiver Filter (5.4:1) */
  --color-photo-placeholder: #e4e1db; /* Hintergrund, während Bilder laden */

  /* Die Lightbox ist IMMER dunkel – unabhängig vom Modus */
  --color-lightbox-bg: #0b0b0a;
  --color-lightbox-text: #e9e8e4;
  --color-lightbox-muted: #9b9891;

  /* Typografie */
  --font-serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-xs: 0.75rem;                                        /* 12px  Meta, Labels */
  --text-sm: 0.875rem;                                       /* 14px  UI, Captions */
  --text-base: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);   /* 17–19px Fließtext */
  --text-lg: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);         /* Lead, H3 */
  --text-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);             /* H2 */
  --text-2xl: clamp(2rem, 1.5rem + 2vw, 3rem);               /* H1 Unterseiten */
  --text-3xl: clamp(2.5rem, 1.75rem + 3.5vw, 4.5rem);        /* H1 Startseite */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.65;
  --tracking-label: 0.08em;     /* Versal-Labels in Sans */
  --tracking-display: -0.015em; /* Große Serif-Headlines */

  /* Abstände – 4px-Raster */
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.5rem;    /* 24 */
  --space-6: 2rem;      /* 32 */
  --space-7: 3rem;      /* 48 */
  --space-8: 4.5rem;    /* 72 */
  --space-9: 6rem;      /* 96 */
  --space-10: 9rem;     /* 144 */
  --section-gap: clamp(var(--space-8), 8vw, var(--space-10));
  --photo-gap: clamp(0.5rem, 1.2vw, 1rem);   /* Abstand zwischen Fotos */

  /* Layout */
  --gutter: clamp(1rem, 4vw, 3rem);   /* Seitenrand */
  --width-text: 40rem;                /* Lesebreite ~ 65–70 Zeichen */
  --width-wide: 64rem;                /* Breite Bilder im Text */
  --width-page: 90rem;                /* Maximale Seitenbreite */
  --header-height: 4.5rem;

  /* Form */
  --radius: 2px;        /* Nur UI-Elemente. Fotos haben NIE Radius. */
  --border-width: 1px;

  /* Bewegung */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 150ms;
  --duration: 300ms;
  --duration-slow: 600ms;
}

/* ---------- Dark: System-Einstellung, sofern nicht manuell hell gewählt ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-bg: #131312;
    --color-surface: #1c1c1a;
    --color-text: #ecebe7;
    --color-text-muted: #a3a09a;
    --color-border: #2e2d2a;
    --color-accent: #d6a878;
    --color-photo-placeholder: #1f1f1d;
  }
}

/* ---------- Dark: manuell gewählt ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #131312;
  --color-surface: #1c1c1a;
  --color-text: #ecebe7;
  --color-text-muted: #a3a09a;
  --color-border: #2e2d2a;
  --color-accent: #d6a878;
  --color-photo-placeholder: #1f1f1d;
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}