/* ============================================================
   tokens.css  —  ALLE Design-Entscheidungen an einem Ort.
   Gestaltungsrichtung nach Vorlage naomicampbell.com:
   kuehles Grau, Charcoal, ein einziger Pink-Akzent,
   ultraduenne Versalien-Headlines, randlose Bilder.
   Farbwerte direkt aus den Referenz-Screenshots gemessen.
   ============================================================ */

:root {
  /* ---------- Farben: Light (Default) ---------------------- */
  --c-bg:          #edeff1;   /* kuehles Hellgrau, gemessen #ECEEF0 */
  --c-bg-2:        #d9dce0;   /* Verlaufsende fuer Flaechen         */
  --c-bg-alt:      #ffffff;   /* abgesetzte helle Sektion           */
  --c-bg-deep:     #2e313a;   /* Signatur-Charcoal, gemessen        */
  --c-bg-hero:     #3a3d44;   /* Hero-Grau oben (dunkler als die     
                                 Vorlage: erst damit besteht die      
                                 Pink-Zeile die Kontrastpruefung)     */

  --c-ink:         #1b1e25;   /* Ueberschriften        */
  --c-ink-soft:    #3d424c;   /* Fliesstext            */
  --c-muted:       #6c7280;   /* Meta, Labels          */
  --c-line:        #cdd2d8;   /* Haarlinien            */

  /* Pink: gemessen #ED157D. Kontrast auf Weiss 4,2:1 -> nur fuer
     grosse Schrift und Flaechen zulaessig, nie fuer Fliesstext.
     Auf dunklem Grund wird --c-accent-on-deep benutzt (4,9:1). */
  --c-accent:         #ed157d;   /* Marken-Pink: Flaechen, Linien, grosse Schrift */
  --c-accent-text:    #ce0569;   /* abgedunkelt fuer KLEINE Schrift und gefuellte
                                    Buttons auf hellem Grund: 4,7:1 statt 4,2:1 */
  --c-accent-ink:     #ffffff;
  --c-accent-on-deep: #ff5fb4;
  /* Noch heller, fuer Pink auf Foto- und Verlaufsgruenden: 4,7:1 */
  --c-accent-bright:  #ff7fc2;

  --c-on-deep:     #ffffff;
  --c-on-deep-mut: #bfc4cc;
  --c-focus:       #ed157d;

  /* ---------- Typografie ----------------------------------- */
  /* Jost, lokal gehostet (siehe fonts.css). Geometrischer
     Grotesk in der Linie von Futura - naechste frei lizenzierte
     Entsprechung zur Referenz. Fallbacks sind Systemgeometrische. */
  --f-display: "Jost", "Futura", "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
  --f-body:    "Jost", "Futura", "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
  --f-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Gewichte: Haarlinie NUR gross. Fliesstext bleibt 400,
     sonst ist er auf Handys und fuer aeltere Augen unlesbar. */
  --w-hair:    200;
  --w-light:   300;
  --w-body:    400;
  --w-medium:  500;

  --t-logo:   clamp(2.6rem, 10vw,  8.5rem);
  --t-hero:   clamp(2.4rem, 8.5vw, 7rem);
  --t-h1:     clamp(2.1rem, 6vw,   4.5rem);
  --t-h2:     clamp(1.7rem, 4vw,   3rem);
  --t-h3:     clamp(1.1rem, 1.8vw, 1.35rem);
  --t-lead:   clamp(1.02rem, 1.4vw, 1.2rem);
  --t-body:   1.0625rem;
  --t-small:  0.9rem;
  --t-label:  0.72rem;

  --lh-tight: 0.98;
  --lh-head:  1.1;
  --lh-body:  1.65;

  /* Sperrung: die Referenz lebt von weit laufenden Versalien */
  --ls-logo:  0.1em;
  --ls-head:  0.055em;
  --ls-label: 0.22em;

  /* ---------- Raster & Abstaende --------------------------- */
  --w-page:    1280px;
  --w-wide:    1600px;
  --w-text:    66ch;
  --gutter:    clamp(1.25rem, 4vw, 3rem);

  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;     --s-8: 4rem;
  --s-9: 6rem;
  --s-section: clamp(4rem, 9vw, 8rem);

  /* ---------- Form & Bewegung ------------------------------ */
  /* Durchgehend eckig - die Referenz kennt keine Rundungen,
     nur haarduenne Rahmen. */
  --r-0: 0px;      --r-1: 0px;      --r-2: 0px;      --r-pill: 0px;
  --border-hair: 1px;
  --shadow-1: 0 1px 2px rgba(27,30,37,.05), 0 10px 30px rgba(27,30,37,.07);
  --shadow-2: 0 30px 70px rgba(0,0,0,.45);
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-1: .18s;   --dur-2: .38s;   --dur-3: .7s;

  --header-h: 68px;

  /* ---------- Bild-Seitenverhaeltnisse (siehe BILDER.md) --- */
  --ar-portrait: 3 / 4;     /* Portfolio, Setcard   1200x1600 */
  --ar-wide:     16 / 9;    /* Moderation           1920x1080 */
  --ar-hero:     3 / 2;     /* Hero Desktop         2400x1600 */
  --ar-hero-m:   3 / 4;     /* Hero Mobil           1200x1600 */
  --ar-cover:    0.77 / 1;  /* Magazin-Cover         800x1040 */
  --ar-square:   1 / 1;     /* Instagram-Kachel       800x800 */
}

/* ---------- Farben: Dark ---------------------------------- */
:root[data-theme="dark"] {
  --c-bg:          #1d2027;
  --c-bg-2:        #15171c;
  --c-bg-alt:      #2e313a;
  --c-bg-deep:     #121419;
  --c-bg-hero:     #2e313a;
  --c-ink:         #f2f4f6;
  --c-ink-soft:    #cdd2d9;
  --c-muted:       #8d94a1;
  --c-line:        #3a3f49;
  --c-accent:         #ff5fb4;
  --c-accent-text:    #ff5fb4;
  --c-accent-ink:     #17191e;
  --c-accent-on-deep: #ff5fb4;
  --c-accent-bright:  #ff7fc2;
  --c-on-deep:     #ffffff;
  --c-on-deep-mut: #b6bcc6;
  --c-focus:       #ff5fb4;
  --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
  --shadow-2: 0 30px 70px rgba(0,0,0,.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:          #1d2027;
    --c-bg-2:        #15171c;
    --c-bg-alt:      #2e313a;
    --c-bg-deep:     #121419;
    --c-bg-hero:     #2e313a;
    --c-ink:         #f2f4f6;
    --c-ink-soft:    #cdd2d9;
    --c-muted:       #8d94a1;
    --c-line:        #3a3f49;
    --c-accent:         #ff5fb4;
    --c-accent-text:    #ff5fb4;
    --c-accent-ink:     #17191e;
    --c-accent-on-deep: #ff5fb4;
    --c-accent-bright:  #ff7fc2;
    --c-on-deep:     #ffffff;
    --c-on-deep-mut: #b6bcc6;
    --c-focus:       #ff5fb4;
    --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.45);
    --shadow-2: 0 30px 70px rgba(0,0,0,.7);
  }
}