/* Tatis Deutschecke – Design-Tokens
   Einbinden in Website, Post-Tool und Mockups. Nichts hart kodieren, immer diese Variablen nutzen.

   Vier Farbschemen zum Ausprobieren, umgeschaltet über <html data-scheme="...">:
     chinkali  Teal & Koralle    (Original-Farben des Logos, Standard)
     pflaume   Pflaume & Koralle (bisheriges Schema)
     marine    Senf & Marine
     wein      Salbei & Wein
   Die Variablennamen bleiben in allen Schemen gleich:
     --ts-coral = Primärfarbe (Buttons, Akzente), --ts-plum = Sekundärfarbe (Überschriften, Flächen).
   brand/scheme.js merkt sich die Auswahl und blendet den Umschalter ein. */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Inter:wght@400;500;600&family=Noto+Sans+Georgian:wght@400;600;800&display=swap');

:root {
  /* Schema 1: Teal & Koralle (Standard) */
  --ts-cream:     #F4EFE3;   /* Grundfläche */
  --ts-paper:     #FFFFFF;   /* Karten */
  --ts-tint:      #FAF7F0;   /* sehr helle Fläche, Tabellenzeilen */
  --ts-line:      #E4DDCF;   /* Linien, Rahmen */
  --ts-ink:       #16333A;   /* Text */
  --ts-ink-2:     #55676C;   /* Sekundärtext */
  --ts-coral:     #F16B58;   /* Primär */
  --ts-coral-d:   #CC4F3E;   /* Primär dunkel: Hover, "falsch" */
  --ts-peach:     #FBDBD0;   /* Primär hell: Flächen, Tags */
  --ts-plum:      #3E9D84;   /* Sekundär */
  --ts-mint:      #8FD6C0;   /* positiv, Sticker */
  --ts-mint-soft: #DDF3EC;
  --ts-right:     #2A8A70;   /* "richtig" als Text */
  --ts-sun:       #F6C453;   /* Markierung */
  --ts-sun-soft:  #FDEFC9;
  --ts-rose:      #F7B3A6;   /* dekorativ */

  /* Schrift */
  --ts-font-head: 'Nunito', 'Noto Sans Georgian', system-ui, sans-serif;
  --ts-font-body: 'Inter', 'Noto Sans Georgian', system-ui, sans-serif;
  --ts-font-ka:   'Noto Sans Georgian', 'Inter', system-ui, sans-serif;

  /* Form */
  --ts-radius:    22px;
  --ts-radius-sm: 12px;
  --ts-shadow:    0 10px 30px color-mix(in srgb, var(--ts-ink) 10%, transparent);
  --ts-shadow-sm: 0 4px 12px color-mix(in srgb, var(--ts-ink) 8%, transparent);
}

:root[data-scheme="pflaume"] {
  --ts-cream:     #FFF8F0;
  --ts-tint:      #FCFAFD;
  --ts-line:      #E8E2EC;
  --ts-ink:       #2A1E33;
  --ts-ink-2:     #5F546A;
  --ts-coral:     #F0655A;
  --ts-coral-d:   #D24E44;
  --ts-peach:     #FFD9C7;
  --ts-plum:      #5A3E6B;
  --ts-mint:      #7FD1B9;
  --ts-mint-soft: #D6F2E9;
  --ts-right:     #2F8F73;
  --ts-sun:       #FFC85C;
  --ts-sun-soft:  #FFEFC7;
  --ts-rose:      #F7B1A8;
}

:root[data-scheme="marine"] {
  --ts-cream:     #F6F3EB;
  --ts-tint:      #FAF8F2;
  --ts-line:      #E2DDD0;
  --ts-ink:       #16243A;
  --ts-ink-2:     #5B667A;
  --ts-coral:     #2E4C7E;   /* Marine als Primär */
  --ts-coral-d:   #1F3760;
  --ts-peach:     #FBE8BF;   /* helles Senfgelb als Fläche */
  --ts-plum:      #A9780F;   /* dunkles Senf als Sekundär (lesbar auf Weiß) */
  --ts-mint:      #8ED0B5;
  --ts-mint-soft: #DCF1E7;
  --ts-right:     #2A8A70;
  --ts-sun:       #F5C242;
  --ts-sun-soft:  #FDEFC0;
  --ts-rose:      #F3C9A6;
}

:root[data-scheme="wein"] {
  --ts-cream:     #FAF4EE;
  --ts-tint:      #FCF8F5;
  --ts-line:      #EADFDA;
  --ts-ink:       #351C26;
  --ts-ink-2:     #6B5560;
  --ts-coral:     #9B3352;   /* Wein als Primär */
  --ts-coral-d:   #7A2440;
  --ts-peach:     #F5DEE3;
  --ts-plum:      #5E8C6A;   /* Salbei als Sekundär */
  --ts-mint:      #A6D3B2;
  --ts-mint-soft: #E1F1E5;
  --ts-right:     #3E7D50;
  --ts-sun:       #E9C46A;
  --ts-sun-soft:  #F9EFCF;
  --ts-rose:      #E8B7C0;
}

:root[data-scheme="himmel"] {
  --ts-cream:     #F1F6FB;
  --ts-tint:      #F7FAFD;
  --ts-line:      #D9E3EE;
  --ts-ink:       #14304A;
  --ts-ink-2:     #4F6478;
  --ts-coral:     #2F86D6;   /* Himmelblau als Primär */
  --ts-coral-d:   #1F67AB;
  --ts-peach:     #FBE3CF;   /* helles Apricot als Fläche */
  --ts-plum:      #C96A2B;   /* Apricot dunkel als Sekundär */
  --ts-mint:      #8FD6C0;
  --ts-mint-soft: #DDF3EC;
  --ts-right:     #2A8A70;
  --ts-sun:       #FFC85C;
  --ts-sun-soft:  #FFEFC7;
  --ts-rose:      #F7C2A8;
}

:root[data-scheme="olive"] {
  --ts-cream:     #F7F4EC;
  --ts-tint:      #FBF9F4;
  --ts-line:      #E4DFD1;
  --ts-ink:       #2E2A1F;
  --ts-ink-2:     #66604F;
  --ts-coral:     #C8553D;   /* Terracotta als Primär */
  --ts-coral-d:   #A33F2B;
  --ts-peach:     #F6DDD3;
  --ts-plum:      #6B7F3A;   /* Olive als Sekundär */
  --ts-mint:      #B7CF8E;
  --ts-mint-soft: #E6EFD6;
  --ts-right:     #4E6B1F;
  --ts-sun:       #E9C46A;
  --ts-sun-soft:  #F9EFCF;
  --ts-rose:      #E9B8A8;
}

:root[data-scheme="rosa"] {
  --ts-cream:     #FFF4F7;
  --ts-tint:      #FFF9FB;
  --ts-line:      #F0DBE3;
  --ts-ink:       #2A1A22;
  --ts-ink-2:     #6C5560;
  --ts-coral:     #E0507F;   /* Pink als Primär */
  --ts-coral-d:   #B93A64;
  --ts-peach:     #FDDCE6;
  --ts-plum:      #1F5C4A;   /* Tannengrün als Sekundär */
  --ts-mint:      #9ED9BE;
  --ts-mint-soft: #DFF3E9;
  --ts-right:     #237A5C;
  --ts-sun:       #FFD166;
  --ts-sun-soft:  #FFF1C9;
  --ts-rose:      #F8BBD0;
}

:root[data-scheme="nacht"] {
  /* dunkles Schema: Grund und Karten dunkel, Text hell; Sticker-Farben abgedunkelt, damit heller Text darauf lesbar bleibt */
  --ts-cream:     #1E1B2E;
  --ts-paper:     #2A2740;
  --ts-tint:      #262340;
  --ts-line:      #3D3958;
  --ts-ink:       #F5F0FA;
  --ts-ink-2:     #B9B2C9;
  --ts-coral:     #FF7A66;   /* Koralle als Primär */
  --ts-coral-d:   #E0604D;
  --ts-peach:     #4A2F3A;
  --ts-plum:      #9C86D6;   /* Lavendel als Sekundär */
  --ts-mint:      #2E6B58;
  --ts-mint-soft: #23413A;
  --ts-right:     #7FD1B9;
  --ts-sun:       #8A6A1C;
  --ts-sun-soft:  #3D3320;
  --ts-rose:      #7A3F4E;
}

/* Basis */
.ts-body { background: var(--ts-cream); color: var(--ts-ink); font-family: var(--ts-font-body); }
.ts-h    { font-family: var(--ts-font-head); font-weight: 800; letter-spacing: -.01em; }
.ts-ka   { font-family: var(--ts-font-ka); }

/* Bausteine */
.ts-btn { display:inline-block; padding: 14px 26px; border-radius: 999px; background: var(--ts-coral); color:#fff;
          font-family: var(--ts-font-head); font-weight: 800; text-decoration:none; box-shadow: var(--ts-shadow-sm); }
.ts-btn:hover { background: var(--ts-coral-d); }
.ts-btn--ghost { background: transparent; color: var(--ts-plum); box-shadow: inset 0 0 0 2px var(--ts-plum); }
.ts-btn--ghost:hover, .ts-btn--ghost:focus-visible { background: var(--ts-coral-d); color: #fff !important; }
.ts-card { background: var(--ts-paper); border-radius: var(--ts-radius); box-shadow: var(--ts-shadow); }
.ts-tag  { display:inline-block; padding: 4px 12px; border-radius: 999px; background: var(--ts-peach); color: var(--ts-coral-d);
           font-family: var(--ts-font-head); font-weight: 700; font-size: .85rem; }

/* Farb-Bedeutungen in Lernposts (immer gleich verwenden!) */
.ts-wrong  { color: var(--ts-coral-d); text-decoration: line-through; }
.ts-right  { color: var(--ts-right); }
.ts-mark   { background: var(--ts-sun); padding: 0 .25em; border-radius: 6px; }

/* Wortmarke: Logo-Blase + Name.  <a class="ts-brand"><img data-logo="…-{scheme}.png">Tatis <span>Deutschecke</span></a> */
.ts-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ts-ink);
            font-family: var(--ts-font-head); font-weight: 900; font-size: 1.25rem; letter-spacing: -.01em; white-space: nowrap; }
.ts-brand img { height: 44px; width: auto; }
.ts-brand span { color: var(--ts-coral); }

/* Schema- und Layout-Umschalter (nur zum Ausprobieren, wird von scheme.js erzeugt) */
.ts-switches { position: fixed; right: 14px; bottom: 14px; z-index: 999; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.ts-switch { display: flex; gap: 6px; padding: 8px; border-radius: 999px; background: var(--ts-paper); box-shadow: var(--ts-shadow);
             font-family: var(--ts-font-head); font-size: .8rem; }
.ts-switch button { border: 0; cursor: pointer; width: 34px; height: 34px; border-radius: 50%; padding: 0; position: relative;
                    outline: 3px solid transparent; outline-offset: 2px; color: var(--ts-ink); font: inherit; font-weight: 800; }
.ts-switch--scheme button { background: linear-gradient(90deg, var(--l) 50%, var(--r) 50%); }
.ts-switch--style button { background: var(--ts-cream); font-size: .72rem; letter-spacing: -.02em; }
.ts-switch--style button[aria-pressed="true"] { background: var(--ts-ink); color: var(--ts-paper); }
.ts-switch--scheme button[aria-pressed="true"] { outline-color: var(--ts-ink); }
.ts-switch button span { position: absolute; left: 50%; bottom: 130%; transform: translateX(-50%); white-space: nowrap; background: var(--ts-ink); color: var(--ts-paper);
                         padding: 4px 10px; border-radius: 999px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .15s; }
.ts-switch button:hover span { opacity: 1; }
@media (max-width: 520px) { .ts-switches { right: 10px; bottom: 10px; gap: 6px; } .ts-switch { gap: 4px; padding: 6px; } .ts-switch button { width: 26px; height: 26px; outline-width: 2px; font-size: .62rem; } }