/* 01-tokens.css — Design-Tokens (:root) + Dark Mode
   Teil von css/living-canvas (aufgeteilt). Ladereihenfolge = Dateiname.
   Siehe docs/components/ fuer die Zuordnung Sektion -> Datei. */
/* 1. CSS Custom Properties (:root) */
:root {
  /* Colors - Quiet Signal Design System */
  --ink: #102B3C;
  --paper: #F7FBF8;
  --mist: #D9F1ED;
  --teal: #008C95;
  --teal-d: #005E67;
  --teal-soft: #D9F1ED;
  --apricot: #FF8A5B;
  --apricot-d: #A83F22;
  --apricot-soft: #FCE3D6;
  --electric: #6857E8;
  --electric-d: #4131B7;
  --electric-soft: #E5E1FF;
  --lime: #C9F36B;
  --lime-d: #3F6516;
  --lime-soft: #EFFAD1;
  --grey: #62737D;
  --line: #B9D8D6;
  --font-display: 'Plus Jakarta Sans', Arial, sans-serif;
  --font-body: 'DM Sans', Arial, sans-serif;

  /* Form-Tokens */
  --radius-chip: 6px;   /* Labels/Tags/Badges — statisch, nicht klickbar */
  --radius-pill: 999px; /* Buttons/Links — alles Klickbare */

  /* Motion Tokens */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --dur-fast: 0.18s;
  --dur-normal: 0.35s;
  --dur-slow: 0.6s;
}

/* 2. Dark Mode */
[data-theme='dark'] {
  --ink: #E8F0F5;
  --paper: #0E1A23;
  --mist: #152530;
  --line: #1E3040;
  --grey: #8CA0A8;
}
[data-theme='dark'] .card,
[data-theme='dark'] .station,
[data-theme='dark'] .featured-card,
[data-theme='dark'] .case,
[data-theme='dark'] .edu-note,
[data-theme='dark'] .brand-card .info,
[data-theme='dark'] .tab {
  background-color: #152530;
}
[data-theme='dark'] header.nav {
  background: rgba(14, 26, 35, 0.82);
}
[data-theme='dark'] footer {
  /* Footer stays dark in both modes, using original dark colors */
  background: #102B3C;
}