/* ============================================================
   MAYA DESIGN TOKENS  —  die eine Quelle der Wahrheit
   ------------------------------------------------------------
   Marke: MAYA Hauswelten & Invest (Kraichgau / Karlsruhe).
   Charakter: warm, erdig, ruhig, hochwertig. Ein Akzent
   (gebranntes Orange), viel Weißraum, dezente Glas-/Ambient-
   Effekte. Kein generisches KI-Grau.

   Diese Datei wird von ALLEN Flächen eingebunden
   (Tool, Kundenportal, Exposé, Login, später Website).
   Farbe/Schrift/Abstand ändern = HIER ändern, überall gilt es.

   Migration (Stand 07/2026): Die Flächen tragen aktuell noch
   ihre historischen :root-Blöcke inline. Diese werden beim
   Redesign je Fläche (Phase 2) entfernt, sodass sie allein aus
   dieser Datei leben. Bis dahin ist diese Datei die kanonische
   Referenz + Grundlage für neue Bausteine.
   Voller Kontext & Regeln: DESIGN_SYSTEM.md
   ============================================================ */

/* ── Schrift: Open Sans, selbst gehostet (kein Google-CDN → DSGVO) ── */
@font-face{
  font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/assets/fonts/opensans-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:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('/assets/fonts/opensans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,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;
}

/* ============================================================
   HELL (Standard)
   ============================================================ */
:root{
  /* Schrift */
  --font:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Open Sans',system-ui,-apple-system,'Segoe UI',sans-serif; /* Zahlen laufen in Open Sans, tabular-nums */

  /* Neutrale Grau-Skala + Weiß (Basis-Grau #f7f7f7) */
  --ink:#2a2826;          /* Überschriften / primärer Text */
  --ink-soft:#555555;     /* Fließtext */
  --bg:#f7f7f7;           /* App-Hintergrund (unser Hellgrau) */
  --surface:#eeeeee;      /* dezente Flächen */
  --card:#ffffff;
  --line:#e6e6e6;
  --line-strong:#d2d2d2;
  --muted:#737373;        /* sekundär – AA-konform */
  --muted-light:#a6a6a6;

  /* Marke: Orange als EINZIGER Akzent */
  --accent:#b3541b;
  --accent-hover:#9c4815;
  --accent-soft:#f7e7da;  /* helle Orange-Fläche */
  --accent-tint:#fbf2ec;  /* sehr helle Orange-Tönung */

  /* Funktionale Töne – bewusst entsättigt, nie knallig */
  --gold:#b3823c;
  --green:#5f7e57;        /* positiv / Gewinn */
  --green-deep:#3f6540;
  --green-soft:#e8efe6;
  --blue:#6b7b86;
  --red:#b3401b;          /* negativ / Warnung (warm, kein Signalrot) */

  /* Flächen-Rollen */
  --header:#ffffff;
  --side-bg:#fbfaf8;      /* Seitenleisten leicht wärmer als Card */

  /* Farbverläufe (Marke) */
  --grad-accent:linear-gradient(135deg,#c8622a 0%,#b3541b 100%);
  --grad-soft:linear-gradient(180deg,#fdf3ec 0%,rgba(253,243,236,0) 100%);
  --grad-warm:linear-gradient(180deg,var(--accent-tint),var(--card) 78%);
  --grad-wash:linear-gradient(135deg,rgba(179,84,27,.06) 0%,rgba(179,84,27,0) 55%);
  --grad-green:linear-gradient(135deg,#578552,var(--green-deep));

  /* Weicher Ambient-Schein – oben links verankert, fließend (ohne Kante) */
  --ambient:radial-gradient(95% 95% at 0% 0%,rgba(179,84,27,.07) 0%,rgba(179,84,27,0) 58%);

  /* Glas (iOS-Stil, dezent) */
  --glass-bg:rgba(255,255,255,.72);
  --glass-blur:saturate(1.5) blur(16px);

  /* Radien */
  --r-xs:8px;
  --r:12px;
  --r-lg:16px;
  --r-xl:26px;
  --r-pill:999px;

  /* Schatten (weich, mehrschichtig) */
  --sh:0 1px 2px rgba(20,20,20,.04),0 2px 8px rgba(20,20,20,.05);
  --sh-md:0 2px 8px rgba(20,20,20,.06),0 8px 24px rgba(20,20,20,.07);
  --sh-lg:0 6px 24px rgba(20,20,20,.10),0 18px 50px rgba(20,20,20,.10);
  --light-overlay:rgba(255,255,255,.6);
  --light-overlay-soft:rgba(255,255,255,.55);

  /* Abstands-Skala (4er-Raster) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:36px; --s7:56px;

  /* Typo-Skala (responsiv, clamp) */
  --t-hero:clamp(27px,4.6vw,40px);
  --t-h1:clamp(22px,3.4vw,28px);
  --t-h2:clamp(18px,2.4vw,21px);
  --t-num-xl:clamp(30px,5vw,44px);
  --t-num:clamp(19px,2.6vw,24px);
  --t-body:15px;
  --t-small:12.5px;

  /* Motion */
  --ease:cubic-bezier(.2,.7,.3,1);       /* Standard: ruhig, natürlich */
  --spring:cubic-bezier(.34,1.56,.64,1); /* leichtes Überschwingen für Bestätigungen */

  /* Layout-Maße */
  --nav-h:62px;
}

/* ============================================================
   DUNKEL  (nur bei explizitem data-theme="dark")
   Auto-Dark per prefers-color-scheme bleibt bewusst Sache der
   jeweiligen Fläche (z. B. Portal), damit das Tool nur auf
   ausdrückliche Wahl umschaltet.
   ============================================================ */
:root[data-theme="dark"]{
  --ink:#f0ece6;
  --ink-soft:#c7bfb5;
  --bg:#17150f;
  --surface:#211d18;
  --card:#26221c;
  --line:#37322b;
  --line-strong:#4d463d;
  --muted:#a79f93;
  --muted-light:#736c61;

  --accent:#d2702f;
  --accent-hover:#e07f3d;
  --accent-soft:#3d2a1c;
  --accent-tint:#2a2017;

  --gold:#cf9e52;
  --green:#7fa379;
  --green-deep:#8fba82;
  --green-soft:#26312290;
  --blue:#8696a3;
  --red:#d9663e;

  --header:#1d1a14;
  --side-bg:#1e1b18;

  --grad-accent:linear-gradient(135deg,#d2702f 0%,#b3541b 100%);
  --grad-soft:linear-gradient(180deg,rgba(210,112,47,.10) 0%,rgba(210,112,47,0) 100%);
  --grad-warm:linear-gradient(180deg,var(--accent-tint),var(--card) 78%);
  --grad-wash:linear-gradient(135deg,rgba(210,112,47,.10) 0%,rgba(210,112,47,0) 55%);

  --ambient:radial-gradient(95% 95% at 0% 0%,rgba(210,112,47,.12) 0%,rgba(210,112,47,0) 58%);

  --glass-bg:rgba(33,29,24,.66);
  --glass-blur:saturate(1.4) blur(16px);

  --sh:0 1px 3px rgba(0,0,0,.4),0 4px 12px rgba(0,0,0,.35);
  --sh-md:0 2px 8px rgba(0,0,0,.45),0 8px 24px rgba(0,0,0,.4);
  --sh-lg:0 6px 24px rgba(0,0,0,.55),0 18px 50px rgba(0,0,0,.45);
  --light-overlay:rgba(255,255,255,.025);
  --light-overlay-soft:rgba(255,255,255,.02);
}