/*
 * EAA Broker - look.css
 *
 * Das GANZE Aussehen steht in dieser Datei. site.css benutzt nur die
 * Variablen von hier, nie eine feste Farbe oder Schrift.
 *
 * Farbschemata (Looks): guilloche | banknote | passport | stamp | hashid
 *   - Standard: data-look am <html> in index.html
 *   - Besucher koennen im Fuss umschalten (Farbpunkte), die Wahl wird gemerkt
 *   - Neuer Look = neuer [data-look="..."]-Block mit den Farb-Variablen
 *     plus ein Farbpunkt im Fuss (index.html) plus Name in js/site.js
 * Die Look-Bloecke stehen bewusst OHNE :root davor: so zeigt jeder Farbpunkt
 * im Fuss lokal seine eigenen Farben, ohne doppelte Hex-Werte.
 *
 * Nur helle Looks: die Marke ist hell. Kein automatischer Dunkelmodus.
 */

/* Recursive (OFL), lokal: keine Google-Fonts-Abfrage, keine IP an Dritte.
   Schlank geschnitten (132 statt 305 KB): nur Latein, Gewicht 400-860,
   CASL 0-0.35, MONO 0-1, ohne Schraeg-Achse (Schraeges macht der Browser).
   Wer mehr Achse braucht (z. B. Look "senf" mit CASL 1): Originaldatei von
   github.com/arrowtype/recursive nehmen. */
@font-face {
  font-family: "Recursive";
  src: url("../fonts/recursive-eaab.woff2") format("woff2-variations"),
       url("../fonts/recursive-eaab.woff2") format("woff2");
  font-weight: 400 860;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Guilloche: feine Linien wie auf Ausweisen, nur auf Nachweisen
     (.ticket-body). "none" schaltet das Muster ab. */
  --pattern:
    repeating-radial-gradient(circle at 100% 0%, transparent 0 11px, color-mix(in srgb, var(--c-ink) 8%, transparent) 11px 12px),
    repeating-radial-gradient(circle at 0% 100%, transparent 0 11px, color-mix(in srgb, var(--c-ink) 6%, transparent) 11px 12px);

  /* ---------- Schrift ---------- */
  /* Eine Familie, drei Gesichter ueber Variations-Achsen:
     CASL 0..1 = sachlich bis Pinselschrift, MONO 1 = Daten (nur echte Werte). */
  --f-family:  "Recursive", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  --f-mono:    "Recursive", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fv-display: "CASL" 0.35, "MONO" 0, "CRSV" 0.5;
  --fv-body:    "CASL" 0, "MONO" 0;
  --fv-data:    "CASL" 0, "MONO" 1;
  --w-display: 800;
  --w-head:    740;
  --w-body:    420;
  --w-strong:  680;

  --t-hero:  clamp(2.5rem, 1.4rem + 4.6vw, 4.6rem);
  --t-h2:    clamp(1.75rem, 1.2rem + 2.2vw, 2.7rem);
  --t-h3:    1.3rem;
  --t-body:  1.0625rem;
  --t-small: 0.9rem;
  --t-data:  0.84rem;
  --lh-body: 1.6;

  /* ---------- Form ---------- */
  --stroke:   2px;                  /* Linienstaerke ueberall */
  --r-card:   18px;
  --r-small:  10px;
  --r-btn:    999px;
  --lift:     4px;                  /* harter Versatz-Schatten, kein Weichzeichner */
  --notch:    11px;                 /* Ticket-Kerbe (Radius), das Markenzeichen */

  /* ---------- Raum ---------- */
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2.5rem;
  --s-5: 4rem;
  --s-6: 6.5rem;
  --max:     74rem;                 /* Seitenbreite */
  --measure: 38rem;                 /* Textbreite */
}

/* ---------- Look "guilloche" (Standard): Sicherheitspapier ----------
   Pass- und Banknoten-Toene, Tinten-Indigo, Minze als Sicherheitsfaden. */
:root, [data-look="guilloche"] {
  --c-ground:     #E9E9FF;  /* Seitengrund */
  --c-sheet:      #FBFBFF;  /* Flaechen: Tabelle, Band */
  --c-ink:        #25215E;  /* Text, Linien, Schatten */
  --c-ink-soft:   #4D4A82;  /* Nebentext */
  --c-accent:     #3CD9B0;  /* Knopf, Wortmarke, Aufruf-Band */
  --c-accent-ink: #25215E;  /* Text auf accent */
  --c-tint-1:     #FFD9E6;  /* Beispiel-Nachweis */
  --c-tint-2:     #D4F4EA;  /* Schritt 2 */
  --c-tint-3:     #DCE9FF;  /* Schritt 3 */
  --c-focus:      #25215E;
}

/* ---------- Look "banknote": Mintpapier, Tiefsee-Tinte, 50-Euro-Orange ---------- */
[data-look="banknote"] {
  --c-ground:     #E1F3EA;
  --c-sheet:      #F8FDFA;
  --c-ink:        #0E3B3A;
  --c-ink-soft:   #3B5F5C;
  --c-accent:     #FF9A62;
  --c-accent-ink: #0E3B3A;
  --c-tint-1:     #FFE0CC;
  --c-tint-2:     #CFE9FF;
  --c-tint-3:     #E8E0FF;
  --c-focus:      #0E3B3A;
}

/* ---------- Look "passport": rosa Seiten, Bordeaux-Einband, Goldpraegung ---------- */
[data-look="passport"] {
  --c-ground:     #FAE8EE;
  --c-sheet:      #FFF8FA;
  --c-ink:        #5A1530;
  --c-ink-soft:   #7A4256;
  --c-accent:     #F2C14E;
  --c-accent-ink: #5A1530;
  --c-tint-1:     #DCE6FF;
  --c-tint-2:     #E0F1DC;
  --c-tint-3:     #FFF0C4;
  --c-focus:      #5A1530;
}

/* ---------- Look "stamp": Amtspapier, Dokumenten-Navy, Stempelrot ---------- */
[data-look="stamp"] {
  --c-ground:     #ECEFF5;
  --c-sheet:      #FCFCFE;
  --c-ink:        #1C2B45;
  --c-ink-soft:   #475672;
  --c-accent:     #FF7466;
  --c-accent-ink: #1C2B45;
  --c-tint-1:     #FFDDD8;
  --c-tint-2:     #DAE8FF;
  --c-tint-3:     #E2F3E3;
  --c-focus:      #1C2B45;
}

/* ---------- Look "hashid": das Original-hashID-Purple (#6E67C8) als Akzent ----------
   Dunkles Akzent: Text darauf weiss (4.7:1). Knopf-Text auf Tinte darum eigene
   Farbe (--c-on-ink), die anderen Looks nehmen dort einfach das Akzent. */
[data-look="hashid"] {
  --c-ground:     #F1F0FB;
  --c-sheet:      #FDFDFF;
  --c-ink:        #1F1A45;
  --c-ink-soft:   #4F4A78;
  --c-accent:     #6E67C8;  /* hashIDPurple */
  --c-accent-ink: #FFFFFF;
  --c-on-ink:     #DCD9FB;
  --c-tint-1:     #FFF0B3;  /* hIDnote-Gelb, hell */
  --c-tint-2:     #E3E0F8;
  --c-tint-3:     #DDF2DE;  /* hIDdo-Gruen, hell */
  --c-focus:      #1F1A45;
}

/* ---------- Look "senf": der Bratwurst-Look, nicht im Umschalter ----------
   Mit der schlanken Schrift nur angenaehert (CASL endet bei 0.35). */
[data-look="senf"] {
  --c-ground:     #E6F1D8;
  --c-sheet:      #FAFDF4;
  --c-ink:        #183A2B;
  --c-ink-soft:   #3E5A47;
  --c-accent:     #FFC93C;
  --c-accent-ink: #183A2B;
  --c-tint-1:     #D9CCFF;
  --c-tint-2:     #C7E3FF;
  --c-tint-3:     #FFD4BF;
  --c-focus:      #183A2B;
  --pattern:      none;
  --fv-display:   "CASL" 1, "MONO" 0, "CRSV" 1;
  --fv-body:      "CASL" 0.25, "MONO" 0;
  --w-display:    860;
  --w-head:       780;
}