/* ==================================================================
   Moroccan Glow - Design-Tokens (CI v1.0, Briefing Abschnitt 4 + 5)
   Verbindlich. Es werden keine weiteren Farben eingefuehrt.
   ================================================================== */

/* ---------- Schriften, lokal ausgeliefert. Keine Google-Fonts-Verbindung. ---------- */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/Fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/InstrumentSans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/InstrumentSans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Flaechen ---------- */
  --mg-sable: #ede2d6;      /* Hausfarbe, Standardhintergrund statt Weiss */
  --mg-lait:  #faf5ee;      /* Karten, Formulare, Textflaechen */

  /* ---------- Schrift und Linien ---------- */
  --mg-nuit:    #241c15;    /* warmes Schwarz, alle Fliesstexte */
  --mg-nuit-60: #6a6058;    /* Sekundaertext */
  --mg-nuit-40: #948b82;    /* Labels, Hilfstext */
  --mg-linie:   #cfccc4;

  /* ---------- Akzente ---------- */
  --mg-argan:     #c1852f;  /* Flaechen, Rahmen, Etikettenring. NIE Fliesstext auf Hell */
  --mg-majorelle: #3d4eaf;  /* Klickfarbe. Genau ein Element je Bildschirmansicht */
  --mg-feuille:   #6f7a56;  /* nur Nachweise und Herkunftsangaben */

  /* ---------- Zustaende ---------- */
  --mg-erfolg: #6f7a56;
  --mg-fehler: #8e2f1e;

  /* Abgeleitet: Hover = 8 % dunkler als Majorelle */
  --mg-majorelle-hover: #38489f;

  /* ---------- Schrift ---------- */
  --mg-serif: 'Fraunces', Georgia, serif;
  --mg-sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

  /* ---------- Raster ---------- */
  --mg-max: 78rem;          /* Inhaltsbreite */
  --mg-gutter: clamp(1.25rem, 4vw, 3rem);
  --mg-section: clamp(4.5rem, 10vw, 8rem);

  /* Formsprache. Das Briefing schrieb durchgehend 2 px vor; mit Freigabe
     vom 06.09.2026 gestaffelt, damit Flaechen und Bedienelemente sich
     unterscheiden. Nichts davon ist rund - die Marke bleibt kantig. */
  --mg-radius: 3px;         /* Bedienelemente */
  --mg-radius-l: 10px;      /* Bildflaechen, Karten */
  --mg-pill: 999px;         /* nur Marker und Filter */

  color-scheme: light;
}

/* ---------- Oberflaechen, die der Browser sonst selbst faerbt ---------- */

::selection { background: var(--mg-nuit); color: var(--mg-lait); }

:root {
  scrollbar-color: var(--mg-nuit-40) var(--mg-sable);
  scrollbar-width: thin;
  accent-color: var(--mg-majorelle);
  caret-color: var(--mg-nuit);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--mg-sable); }
::-webkit-scrollbar-thumb {
  background: var(--mg-nuit-40);
  border: 2px solid var(--mg-sable);
  border-radius: var(--mg-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--mg-nuit-60); }
