/* tokens.css — die Marke in Zahlen.
 *
 * WOHER DIE FARBEN KOMMEN: 1:1 aus der App, assets/theme/palettes.ts,
 * THEME_REGISTRY.standard. Wenn dort ein Wert geaendert wird, gehoert er hier
 * nachgezogen — das ist die einzige Stelle der Website, an der Farbe definiert
 * wird. Kein Stylesheet unterhalb dieser Datei schreibt einen Hex-Wert.
 *
 * DUNKEL IST DIE BASIS. Die App laeuft auf Sepia-Schwarz, die Website auch.
 * Hell ist die Variante, nicht der Ausgangspunkt.
 */

:root {
  /* ---- Grund und Tinte (palettes.ts → standard.dark) ---- */
  --ground:      #0F0B08;   /* bg */
  --raised:      #171009;   /* bgElevated */
  --sheet:       #1B140D;   /* sheet */
  --ink:         #F5E8D2;
  --ink-soft:    #C9B79A;
  --ink-faint:   #8A7B63;
  --accent:      #D4AF7A;
  --on-accent:   #221A10;

  /* ---- Abgeleitet: Linien, Schleier, Schatten ---- */
  --line:        rgba(245, 232, 210, .14);
  --line-soft:   rgba(245, 232, 210, .07);
  --accent-dim:  rgba(212, 175, 122, .14);
  --accent-haze: rgba(212, 175, 122, .06);
  --veil:        rgba(15, 11, 8, .82);       /* Header-Hinterlegung */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.4);
  --shadow-md:   0 12px 32px -18px rgba(0,0,0,.9);
  --shadow-lg:   0 32px 70px -34px rgba(0,0,0,1);

  /* ---- Route: die gestrichelte Flugbahn (mapColors.way der App) ---- */
  --route:       rgba(212, 175, 122, .38);
  --route-done:  rgba(212, 175, 122, .85);
  --bird-shade:  rgba(0, 0, 0, .30);        /* Schein unter dem Vogel */

  /* ---- Tagebuchzettel: Papier, in beiden Faellen eigener Ton ---- */
  --paper:       #221A0F;
  --paper-ink:   #E8D9B8;

  /* Schlagschatten fuer freigestellte Motive (Buch, Zettel) */
  --drop-shade:  rgba(0, 0, 0, .42);

  /* ---- Semantik (palettes.ts → SEMANTIC.dark) ---- */
  --ok:          #2ECC71;
  --danger:      #E5533C;
  --warn:        #F5A623;
  --info:        #3AA0E0;

  /* ---- Plan-Akzent: Platin traegt Silber, sonst gilt Gold ---- */
  --platin:      #C9CBDE;

  /* ---- Schrift ---- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "Karla", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Typo-Skala — fluid, damit zwischen Telefon und Desktop nichts springt */
  --t-xs:   .74rem;
  --t-sm:   .86rem;
  --t-base: 1rem;
  --t-lg:   clamp(1.06rem, .98rem + .35vw, 1.22rem);
  --t-xl:   clamp(1.3rem,  1.15rem + .7vw,  1.6rem);
  --t-2xl:  clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
  --t-3xl:  clamp(2.3rem,  1.8rem + 2.4vw,  3.6rem);
  --t-4xl:  clamp(2.9rem,  2.1rem + 3.8vw,  5.2rem);

  /* ---- Mass und Raum ---- */
  --measure:   64ch;         /* Lesebreite */
  --page:      1180px;       /* Inhaltsbreite */
  --page-pad:  clamp(1.15rem, 4vw, 2.5rem);

  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;    --s-7: 3rem;    --s-8: 4.5rem;
  --s-9: 6.5rem;  --s-10: 9rem;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* ---- Bewegung ---- */
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur-fast:  .18s;
  --dur:       .34s;
  --dur-slow:  .7s;
}

/* ---- Hell: Systemwunsch, sofern nicht ausdruecklich dunkel gewaehlt ---- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:      #FBF7F0;
    --raised:      #FFFFFF;
    --sheet:       #FFFFFF;
    --ink:         #2A2015;
    --ink-soft:    #6B5B45;
    --ink-faint:   #9C8E78;
    --accent:      #B8894B;
    --on-accent:   #FFFFFF;

    --line:        rgba(42, 32, 21, .14);
    --line-soft:   rgba(42, 32, 21, .07);
    --accent-dim:  rgba(184, 137, 75, .14);
    --accent-haze: rgba(184, 137, 75, .06);
    --veil:        rgba(251, 247, 240, .84);
    --shadow-sm:   0 1px 2px rgba(42,32,21,.06);
    --shadow-md:   0 12px 32px -18px rgba(42,32,21,.4);
    --shadow-lg:   0 32px 70px -34px rgba(42,32,21,.5);

    --route:       rgba(184, 137, 75, .42);
    --route-done:  rgba(184, 137, 75, .9);
    --bird-shade:  rgba(42, 32, 21, .18);
    --paper:       #F7F1DC;
    --paper-ink:   #4A3B22;
    --drop-shade:  rgba(42, 32, 21, .26);

    --ok:          #1FA85C;
    --danger:      #C6371F;
    --warn:        #D98A00;
    --info:        #2A82C0;

    --platin:      #8A8DA6;
  }
}

/* ---- Hell: ausdrueckliche Wahl schlaegt das System ---- */
:root[data-theme="light"] {
  --ground:      #FBF7F0;
  --raised:      #FFFFFF;
  --sheet:       #FFFFFF;
  --ink:         #2A2015;
  --ink-soft:    #6B5B45;
  --ink-faint:   #9C8E78;
  --accent:      #B8894B;
  --on-accent:   #FFFFFF;

  --line:        rgba(42, 32, 21, .14);
  --line-soft:   rgba(42, 32, 21, .07);
  --accent-dim:  rgba(184, 137, 75, .14);
  --accent-haze: rgba(184, 137, 75, .06);
  --veil:        rgba(251, 247, 240, .84);
  --shadow-sm:   0 1px 2px rgba(42,32,21,.06);
  --shadow-md:   0 12px 32px -18px rgba(42,32,21,.4);
  --shadow-lg:   0 32px 70px -34px rgba(42,32,21,.5);

  --route:       rgba(184, 137, 75, .42);
  --route-done:  rgba(184, 137, 75, .9);
  --bird-shade:  rgba(42, 32, 21, .18);
  --paper:       #F7F1DC;
  --paper-ink:   #4A3B22;
  --drop-shade:  rgba(42, 32, 21, .26);

  --ok:          #1FA85C;
  --danger:      #C6371F;
  --warn:        #D98A00;
  --info:        #2A82C0;

  --platin:      #8A8DA6;
}