/* Quelle: designskill/skills/design-traveldashboard/tokens.css; übernommen am 10.09.2026. */
/* ==========================================================================
   design-traveldashboard — Design-Tokens "Lagune"
   Smaragd ins Ozeanblau, auf leicht grünlichem Weiß. Amber trägt alles
   Zeitkritische.

   Die Token-Namen sind identisch mit denen von design-normal. Dadurch
   funktionieren dessen Effektrezepte hier unverändert — es wechselt nur
   die Farbe. Kein @import: die Datei steht bewusst für sich, damit sie
   über Symlinks und in fremde Projekte kopiert zuverlässig funktioniert.
   ========================================================================== */

:root {
  /* --- Akzent ----------------------------------------------------------- */
  /* Wie in der Basis zwei Verläufe: --gradient trägt weißen Text
     (alle Stützstellen >= 5:1), --gradient-deco leuchtet und trägt nie Text. */
  --accent:            #047857;   /* Smaragd — Text, Icons, Aktionen        */
  --accent-strong:     #036249;   /* Hover / gedrückter Zustand             */
  --accent-soft:       #e0f5ec;   /* Flächiger Akzent-Hintergrund           */
  --accent-2:          #0e7490;   /* Ozean — zweite Stützstelle, textfähig  */
  --accent-deco:       #34d399;   /* Mint — NUR Glow, Ränder, Balken        */
  --gradient:          linear-gradient(135deg, var(--accent), var(--accent-2));
  --gradient-deco:     linear-gradient(135deg, #10b981, var(--accent-deco));

  /* --- Zeitfarbe -------------------------------------------------------- */
  /* Amber ist in diesem System KEIN zweiter Markenton. Es markiert
     ausschließlich Zeitbezug: "bald", "verspätet", "läuft ab".             */
  --warm:              #b45309;
  --warm-soft:         #fdf3e3;
  --warm-border:       #f0dcbd;

  /* --- Flächen ---------------------------------------------------------- */
  --bg:                #f8fbf9;
  --bg-2:              #eef5f1;
  --bg-gradient:       linear-gradient(165deg, var(--bg), var(--bg-2));
  --surface:           #ffffffcc;
  --surface-solid:     #ffffff;
  --surface-sunken:    #e8f0ec;

  /* --- Linien ----------------------------------------------------------- */
  --border:            #dbe8e2;   /* Trennlinien, dekorativ                 */
  --border-strong:     #c8dcd4;   /* betonte Trennlinien                    */
  --border-input:      #748f86;   /* Formularränder — 3:1, WCAG 1.4.11      */

  /* --- Text ------------------------------------------------------------- */
  --text:              #101a18;
  --text-muted:        #5c6763;
  --text-on-accent:    #ffffff;

  /* --- Semantik --------------------------------------------------------- */
  /* Achtung: Grün ist hier Markenfarbe. "Erfolg" darf deshalb NIE allein
     über Farbe laufen — immer zusätzlich Text oder Symbol. Siehe SKILL.md. */
  --success:           #15803d;
  --warning:           #b45309;
  --error:             #dc2626;

  /* --- Bild ------------------------------------------------------------- */
  /* Overlay, das weißen Text über beliebigen Fotos lesbar hält.            */
  --photo-overlay:     linear-gradient(to top, #04231ce6 0%, #04231c59 45%, transparent 74%);
  --photo-ratio:       16 / 9;

  /* --- Glanz ------------------------------------------------------------ */
  --glow:              0 6px 20px -6px #04785799;
  --glow-soft:         radial-gradient(circle, #10b98126 0%, transparent 70%);
  --sheen:             linear-gradient(115deg, transparent 35%, #ffffffcc 50%, transparent 65%);
  --blur:              14px;

  /* --- Schatten --------------------------------------------------------- */
  --shadow-sm:         0 1px 2px 0 #0b4a3a14;
  --shadow-md:         0 8px 24px -12px #0b4a3a4d;
  --shadow-lg:         0 20px 48px -20px #0b4a3a5e;

  /* --- Radien ----------------------------------------------------------- */
  --r-sm:              12px;
  --r-md:              20px;
  --r-lg:              28px;
  --r-pill:            50px;

  /* --- Typografie ------------------------------------------------------- */
  --font-sans:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:         "JetBrains Mono", "Fira Code", ui-monospace, monospace;
  --tracking-tight:    -0.02em;
  --tracking-wide:     0.12em;
  --leading-body:      1.6;

  /* --- Abstände --------------------------------------------------------- */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px;  --space-8: 64px;

  /* --- Bewegung --------------------------------------------------------- */
  --ease:              cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast:            0.15s var(--ease);
  --t-base:            0.25s var(--ease);
}

/* --------------------------------------------------------------------------
   Dunkle Fassung — für die Nutzung unterwegs und am Abend.
   -------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --accent:          #34d399;
    --accent-strong:   #6ee7b7;
    --accent-soft:     #10261f;
    --accent-2:        #5eead4;
    --accent-deco:     #5eead4;
    --gradient:        linear-gradient(135deg, var(--accent), var(--accent-2));
    --gradient-deco:   linear-gradient(135deg, #10b981, #5eead4);

    --warm:            #fbbf24;
    --warm-soft:       #2a1f0c;
    --warm-border:     #46340f;

    --bg:              #0a1512;
    --bg-2:            #07100e;
    --surface:         #10201bcc;
    --surface-solid:   #10201b;
    --surface-sunken:  #0c1a16;

    --border:          #1e332c;
    --border-strong:   #2b463d;
    --border-input:    #5a7a70;

    --text:            #e4efea;
    --text-muted:      #93a8a1;
    --text-on-accent:  #04231c;

    --success:         #4ade80;
    --warning:         #fbbf24;
    --error:           #f87171;

    --photo-overlay:   linear-gradient(to top, #04120ef2 0%, #04120e73 45%, transparent 74%);

    --glow:            0 6px 24px -6px #34d399aa;
    --glow-soft:       radial-gradient(circle, #34d3992e 0%, transparent 70%);
    --sheen:           linear-gradient(115deg, transparent 35%, #ffffff40 50%, transparent 65%);

    --shadow-sm:       0 1px 2px 0 #00000059;
    --shadow-md:       0 8px 24px -12px #000000b3;
    --shadow-lg:       0 20px 48px -20px #000000cc;
  }
}

:root[data-theme="dark"] {
  --accent:          #34d399;
  --accent-strong:   #6ee7b7;
  --accent-soft:     #10261f;
  --accent-2:        #5eead4;
  --accent-deco:     #5eead4;
  --gradient:        linear-gradient(135deg, var(--accent), var(--accent-2));
  --gradient-deco:   linear-gradient(135deg, #10b981, #5eead4);

  --warm:            #fbbf24;
  --warm-soft:       #2a1f0c;
  --warm-border:     #46340f;

  --bg:              #0a1512;
  --bg-2:            #07100e;
  --surface:         #10201bcc;
  --surface-solid:   #10201b;
  --surface-sunken:  #0c1a16;

  --border:          #1e332c;
  --border-strong:   #2b463d;
  --border-input:    #5a7a70;

  --text:            #e4efea;
  --text-muted:      #93a8a1;
  --text-on-accent:  #04231c;

  --success:         #4ade80;
  --warning:         #fbbf24;
  --error:           #f87171;

  --photo-overlay:   linear-gradient(to top, #04120ef2 0%, #04120e73 45%, transparent 74%);

  --glow:            0 6px 24px -6px #34d399aa;
  --glow-soft:       radial-gradient(circle, #34d3992e 0%, transparent 70%);
  --sheen:           linear-gradient(115deg, transparent 35%, #ffffff40 50%, transparent 65%);

  --shadow-sm:       0 1px 2px 0 #00000059;
  --shadow-md:       0 8px 24px -12px #000000b3;
  --shadow-lg:       0 20px 48px -20px #000000cc;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}