/* =====================================================================================
   Feinschlag Goldschmiede · Farben, Schrift, Abstände
   Brücke zur Web-App: --bg --surface --text --muted --accent --on-accent --border --radius --schrift
   heißen wie in 00_Projektstart/starter-webapp/styles.css.
   Bautyp Samtlade: Vitrine in Nachtblau und Anthrazit, die Laden liegen auf Samt in Saphir, Rubin und Smaragd.
   Gold ist Akzent (Knauf, Schiene, Linien, Preise), kein Hintergrund. Der Akzent folgt dem gewählten Metall.
   ===================================================================================== */
@font-face {
  font-family: "Gloock";
  src: url("../fonts/gloock-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-var.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

/* animierbare Werte (Glanz am Knauf, Preis-Rand) */
@property --glanz { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --lauf  { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

:root {
  --schrift-kopf: "Gloock", "Iowan Old Style", Georgia, serif;
  --schrift: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;

  /* Vitrine */
  --nacht: #0a1226;         /* tiefes Nachtblau */
  --nacht-2: #111c38;
  --nacht-3: #1a2a52;
  --anthrazit: #171b24;
  --graphit: #232a37;
  --bg: var(--nacht);
  --surface: var(--nacht-2);
  --text: #f4efe3;          /* 15,6 : 1 auf --nacht */
  --muted: #b9c1d1;         /* 9,3 : 1 auf --nacht */
  --border: #2d3c66;
  --radius: 10px;

  /* Metalle */
  --gold: #d9a93f;
  --gold-hell: #f2d78f;     /* Text auf Samt und Nacht, 11 : 1 */
  --gold-tief: #8a6520;
  --rose: #e8a595;
  --weiss: #e3e8f2;
  --metall: var(--gold);    /* folgt dem gewählten Metall im Konfigurator (:has) */
  --metall-hell: var(--gold-hell);
  --accent: var(--gold);
  --on-accent: #1a1204;

  /* Samt */
  --saphir: #123d80;
  --rubin: #7d1229;
  --smaragd: #0b5c47;
  --error: #ff9c8f;

  /* Papier (Reparaturzettel, Formulare) */
  --papier: #f5efe2;
  --papier-2: #e9dfca;
  --tinte: #1b1710;
  --tinte-muted: #5a5142;

  --huelle: min(100% - 2 * var(--rand), 1380px);
  --rand: clamp(16px, 3.2vw, 44px);
  --abstand: clamp(64px, 8vw, 116px);
  --kopf: 76px;
  --unten: 0px;             /* am Handy die Schienenhöhe */
}