/* =====================================================================
   HEUREKA STIL · Design-Tokens (Hell + Dunkel)            Version 1.0
   ---------------------------------------------------------------------
   EINE Quelle für Farben, Schrift, Abstände, Radien, Schatten.
   Gilt für Landingpage, Ankommen-Seite und Heureka OS.

   Einbinden (ganz oben, vor allen anderen Stylesheets):
     <link rel="stylesheet" href="/public/assets/heureka-stil/heureka-tokens.css">

   Dunkelmodus: <html data-theme="dark">   Hellmodus: <html data-theme="light">
   Ohne Attribut folgt die Seite der Systemeinstellung des Geräts.

   Regel: Im übrigen CSS NIE feste Farben (#…, rgb…) schreiben,
          immer nur var(--hk-…).
   ===================================================================== */

/* ---------- Schrift: Inter (SIL Open Font License), selbst gehostet ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-400.woff") format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-600.woff") format("woff")}
@font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url("fonts/inter-800.woff") format("woff")}

/* ---------- Gemeinsame Werte (in beiden Modi gleich) ---------- */
:root{
  /* Schrift */
  --hk-font:"Inter","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --hk-font-hand:"Segoe Script","Bradley Hand","Brush Script MT",cursive; /* nur für Penelopes Handschrift-Momente */
  --hk-font-mono:ui-monospace,"Cascadia Code",Consolas,monospace;

  /* Schriftgrößen – feste Stufen, keine Zwischenwerte */
  --hk-fs-xs:.75rem;    /* 12px  Kleingedrucktes, Eyebrow */
  --hk-fs-sm:.875rem;   /* 14px  Hilfetext, Chips, kleine Knöpfe */
  --hk-fs-md:1rem;      /* 16px  Fließtext, Eingaben, Knöpfe */
  --hk-fs-lg:1.125rem;  /* 18px  Einleitungstext */
  --hk-fs-xl:1.375rem;  /* 22px  Zwischenüberschrift h3 */
  --hk-fs-2xl:1.75rem;  /* 28px  Überschrift h2 */
  --hk-fs-3xl:clamp(2rem,4vw,2.75rem);  /* 32–44px  Seitentitel h1 */
  --hk-fs-hero:clamp(2.4rem,5vw,3.6rem);/* 38–58px  nur Landing/Ankommen */

  --hk-fw-normal:400; --hk-fw-semi:600; --hk-fw-bold:800;
  --hk-lh-text:1.6; --hk-lh-title:1.15;
  --hk-ls-eyebrow:.16em;

  /* Abstände – 4er-Raster */
  --hk-sp-1:4px;  --hk-sp-2:8px;  --hk-sp-3:12px; --hk-sp-4:16px;
  --hk-sp-5:24px; --hk-sp-6:32px; --hk-sp-7:48px; --hk-sp-8:64px;

  /* Radien */
  --hk-r-sm:8px;    /* Chips in Tabellen, kleine Felder */
  --hk-r-md:12px;   /* Eingabefelder, Listenzeilen */
  --hk-r-lg:18px;   /* Karten, Fenster */
  --hk-r-xl:28px;   /* große Flächen, Penelope-Bild */
  --hk-r-pill:999px;/* Knöpfe, Chips, Suchleiste */

  /* Bewegung */
  --hk-ease:cubic-bezier(.22,1,.36,1);
  --hk-dur-fast:.15s; --hk-dur:.25s; --hk-dur-slow:.45s;

  /* Breiten */
  --hk-max:1180px; --hk-max-text:680px;

  /* Ebenen */
  --hk-z-kopf:50; --hk-z-fenster:1000; --hk-z-toast:1100;
}

/* ---------- HELL (Standard) ---------- */
:root,
:root[data-theme="light"]{
  color-scheme:light;
  /* Flächen */
  --hk-bg:#f7f3ee;          /* Seitenhintergrund – Creme */
  --hk-bg-alt:#efe6d8;      /* abgesetzte Abschnitte – Sand */
  --hk-surface:#fffdfa;     /* Karten, Fenster, Eingaben */
  --hk-surface-2:#f3ece2;   /* Karte in der Karte, Hover */
  --hk-dunkel:#2a1c14;      /* „Bühne“: Hero, Fuß, Penelope-Fläche */
  --hk-dunkel-2:#1c130d;
  /* Text */
  --hk-ink:#14233c;         /* Haupttext – Navy */
  --hk-ink-2:#4a5a73;       /* Nebentext */
  --hk-ink-3:#5c6676;       /* Hinweise, Platzhalter */
  --hk-ink-invers:#fff8ef;  /* Text auf --hk-dunkel */
  /* Linien */
  --hk-line:rgba(20,35,60,.12);
  --hk-line-strong:rgba(20,35,60,.22);
  /* Marke: Gold = Hauptaktion */
  --hk-gold:#f5a524;        /* Füllfarbe Hauptknopf */
  --hk-gold-hell:#ffc94a;   /* Verlauf oben */
  --hk-gold-ink:#1d1406;    /* Text AUF Gold */
  --hk-gold-text:#8a5c12;   /* Gold als Schrift (Eyebrow, Zahlen) */
  --hk-gold-soft:#fbecd0;
  /* Marke: Blau = Zweitaktion, Links */
  --hk-blau:#1f5fbf;
  --hk-blau-ink:#ffffff;
  --hk-link:#1f5fbf;
  --hk-blau-soft:#e5efff;
  /* Penelope (Kupfer – nur für Penelope-Elemente) */
  --hk-penelope:#9e4622;
  --hk-penelope-soft:#f8e3d6;
  /* Status */
  --hk-ok:#286a3b;      --hk-ok-soft:#e3f2e7;
  --hk-warn:#855400;    --hk-warn-soft:#fbefd6;
  --hk-fehler:#b3362f;  --hk-fehler-soft:#fbe5e3;
  --hk-info:#1f5fbf;    --hk-info-soft:#e5efff;
  /* Schatten, Fokus */
  --hk-shadow-sm:0 2px 8px rgba(20,35,60,.06);
  --hk-shadow:0 10px 30px rgba(20,35,60,.08);
  --hk-shadow-lg:0 24px 60px rgba(20,35,60,.16);
  --hk-focus:0 0 0 3px rgba(245,165,36,.55);
  --hk-overlay:rgba(20,14,10,.55);
}

/* ---------- DUNKEL ---------- */
:root[data-theme="dark"]{
  color-scheme:dark;
  --hk-bg:#17100b;          /* warmes Dunkelbraun – wie der Landing-Hero */
  --hk-bg-alt:#1f1610;
  --hk-surface:#271b13;
  --hk-surface-2:#33251b;
  --hk-dunkel:#0f0a07;
  --hk-dunkel-2:#0a0604;
  --hk-ink:#f7efe4;
  --hk-ink-2:#d9c9b3;
  --hk-ink-3:#a8957d;
  --hk-ink-invers:#fff8ef;
  --hk-line:rgba(255,236,210,.12);
  --hk-line-strong:rgba(255,236,210,.24);
  --hk-gold:#f5b73d;
  --hk-gold-hell:#ffd06a;
  --hk-gold-ink:#1d1406;
  --hk-gold-text:#f5c463;
  --hk-gold-soft:#3a2a12;
  --hk-blau:#2f6fd6;
  --hk-blau-ink:#ffffff;
  --hk-link:#8dbbff;
  --hk-blau-soft:#1b2740;
  --hk-penelope:#f08a5d;
  --hk-penelope-soft:#3b2116;
  --hk-ok:#6fd08c;      --hk-ok-soft:#173222;
  --hk-warn:#f5c463;    --hk-warn-soft:#3a2a12;
  --hk-fehler:#ff8a7a;  --hk-fehler-soft:#3d1a16;
  --hk-info:#8dbbff;    --hk-info-soft:#1b2740;
  --hk-shadow-sm:0 2px 8px rgba(0,0,0,.3);
  --hk-shadow:0 10px 30px rgba(0,0,0,.35);
  --hk-shadow-lg:0 24px 60px rgba(0,0,0,.5);
  --hk-focus:0 0 0 3px rgba(245,183,61,.6);
  --hk-overlay:rgba(0,0,0,.65);
}
/* Systemeinstellung, wenn kein data-theme gesetzt ist */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    color-scheme:dark;
    --hk-bg:#17100b; --hk-bg-alt:#1f1610; --hk-surface:#271b13; --hk-surface-2:#33251b;
    --hk-dunkel:#0f0a07; --hk-dunkel-2:#0a0604;
    --hk-ink:#f7efe4; --hk-ink-2:#d9c9b3; --hk-ink-3:#a8957d; --hk-ink-invers:#fff8ef;
    --hk-line:rgba(255,236,210,.12); --hk-line-strong:rgba(255,236,210,.24);
    --hk-gold:#f5b73d; --hk-gold-hell:#ffd06a; --hk-gold-ink:#1d1406; --hk-gold-text:#f5c463; --hk-gold-soft:#3a2a12;
    --hk-blau:#2f6fd6; --hk-blau-ink:#fff; --hk-link:#8dbbff; --hk-blau-soft:#1b2740;
    --hk-penelope:#f08a5d; --hk-penelope-soft:#3b2116;
    --hk-ok:#6fd08c; --hk-ok-soft:#173222; --hk-warn:#f5c463; --hk-warn-soft:#3a2a12;
    --hk-fehler:#ff8a7a; --hk-fehler-soft:#3d1a16; --hk-info:#8dbbff; --hk-info-soft:#1b2740;
    --hk-shadow-sm:0 2px 8px rgba(0,0,0,.3); --hk-shadow:0 10px 30px rgba(0,0,0,.35); --hk-shadow-lg:0 24px 60px rgba(0,0,0,.5);
    --hk-focus:0 0 0 3px rgba(245,183,61,.6); --hk-overlay:rgba(0,0,0,.65);
  }
}

/* =====================================================================
   BRÜCKE zu bestehenden Variablennamen
   Damit vorhandenes CSS sofort die neuen Farben bekommt, ohne dass jede
   Datei umgeschrieben werden muss. Neue Arbeit nutzt NUR --hk-…
   (Hinweis: --copper war bisher violett, --petrol türkis. Beides wird
    jetzt auf die Markenfarben gelenkt.)
   ===================================================================== */
:root,:root[data-theme]{
  /* Heureka OS (alt) */
  --bg:var(--hk-bg); --bg2:var(--hk-bg-alt); --paper:var(--hk-surface); --surface:var(--hk-surface);
  --soft:var(--hk-surface-2); --ink:var(--hk-ink); --muted:var(--hk-ink-2); --line:var(--hk-line);
  --night:var(--hk-dunkel); --night-deep:var(--hk-dunkel-2); --navy:var(--hk-ink);
  --petrol:var(--hk-blau); --petrol-soft:var(--hk-blau-soft);
  --copper:var(--hk-gold-text); --copper-soft:var(--hk-gold-soft);
  --cyan:var(--hk-blau); --violet:var(--hk-penelope); --mint:var(--hk-ok); --amber:var(--hk-warn); --coral:var(--hk-fehler);
  --green:var(--hk-ok); --success:var(--hk-ok); --yellow:var(--hk-warn); --red:var(--hk-fehler); --danger:var(--hk-fehler);
  --shadow:var(--hk-shadow); --ease:var(--hk-ease); --accent-ink:var(--hk-gold-ink);
  --glass:color-mix(in srgb,var(--hk-surface) 70%,transparent);
  --glass-brd:var(--hk-line); --glass-strong:color-mix(in srgb,var(--hk-surface) 88%,transparent);
  --font-head:var(--hk-font); --font-body:var(--hk-font);
  --hk-accent:var(--hk-gold); --hk-warm:var(--hk-penelope); --hk-glass:var(--glass); --hk-glass-brd:var(--hk-line);
  --hk-bg2:var(--hk-bg-alt);
  /* Websitebauer / Landingpage */
  --hbw-bg:var(--hk-bg); --hbw-text:var(--hk-ink); --hbw-primary:var(--hk-blau); --hbw-accent:var(--hk-gold);
}

/* ---------- Grundlage ---------- */
html{font-family:var(--hk-font);font-size:100%;-webkit-text-size-adjust:100%}
body{background:var(--hk-bg);color:var(--hk-ink);font-size:var(--hk-fs-md);line-height:var(--hk-lh-text)}
a{color:var(--hk-link)}
:focus-visible{outline:none;box-shadow:var(--hk-focus);border-radius:var(--hk-r-sm)}
::selection{background:var(--hk-gold-soft);color:var(--hk-ink)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}