/* ============================================================
   cartoso — Token-Schicht
   Einzige Datei, die Farben kennt. Alles andere leitet ab.

   Schicht 1  Primitive   farbneutral, ohne Bedeutung
   Schicht 2  Semantik    modusabhängig — die EINZIGE Schicht,
                          die prefers-color-scheme / [data-theme] kennt
   Schicht 3  Alias       Altnamen (--caradag-*, --cts-*), damit die
                          bestehenden Stylesheets unverändert weiterlaufen

   Der Dunkelmodus ist damit ein Block, kein Querschnitt durch 3.400 Zeilen.
   Alle Kontrastwerte sind nach der WCAG-Formel gerechnet und im Plan
   docs/plaene/design.md, Abschnitt 2.3 einzeln belegt.
   ============================================================ */

/* ---------- Schriften (lokal gehostet, DSGVO-konform) ---------- */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/sora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/sora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   Schicht 2 — Semantik, hell (Vorgabe, auch ohne JS und ohne Systemsignal)
   ============================================================ */
:root {
  color-scheme: light dark;

  /* Flächen und Text */
  --cartoso-surface: #ffffff;
  --cartoso-surface-2: #f6f7f9;
  --cartoso-surface-3: #edeff3;
  --cartoso-text: #16191f;
  --cartoso-text-muted: #5b6472;

  /* Zwei Rahmen-Tokens: --border ist Dekoration (reißt 1.4.11 und darf
     deshalb nie ein Bedienelement begrenzen), --border-strong ist die
     Kontur von Feldern, Knöpfen, Schaltern und Tabs. */
  --cartoso-border: #e2e5ea;
  --cartoso-border-strong: #828a96;

  /* Aktion */
  --cartoso-action: #2d5bd8;
  --cartoso-action-on: #ffffff;        /* 5,83:1 */
  --cartoso-action-hover: #1e44a8;     /* weiß darauf 8,58:1 */
  --cartoso-action-text: #2d5bd8;      /* 5,83 / 5,44 / 5,07 */
  --cartoso-action-tint: #ecf0fb;

  /* Status */
  --cartoso-ok: #1f7a4c;
  --cartoso-ok-tint: #eaf3ee;
  --cartoso-warn: #9a6400;
  --cartoso-warn-tint: #f6f1e8;
  /* #9A6400 auf dem Warn-Tint ergibt nur 4,41:1 — gleicher Farbton, dunkler. */
  --cartoso-warn-on-tint: #8a5a00;
  --cartoso-error: #b3261e;
  --cartoso-error-tint: #f8edec;

  /* Plattformfarben — ausschließlich im jeweiligen Plattform-Element */
  --cartoso-instagram: #c13584;
  --cartoso-whatsapp: #0e7264;         /* statt #128C7E = 4,14:1, reißt AA */
  --cartoso-tiktok: #010101;

  --cartoso-focus: var(--cartoso-action);

  /* Schrift — genau zwei Familien, beide lokal vorhanden */
  --cartoso-font-display: 'Space Grotesk', 'Sora', 'Segoe UI', -apple-system, sans-serif;
  --cartoso-font-body: 'Sora', 'Segoe UI', -apple-system, sans-serif;
  --cartoso-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  /* Geometrie — Radius höchstens 12 px, 999 px nur für Pillen */
  --cartoso-radius-sm: 8px;
  --cartoso-radius: 12px;
  --cartoso-radius-pill: 999px;

  /* Schatten nur zur Abgrenzung, nie als Effekt */
  --cartoso-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --cartoso-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
}

/* ============================================================
   Schicht 2 — Semantik, dunkel
   Zwei Blöcke: dem System folgen, und den Umschalter gewinnen lassen.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --cartoso-surface: #14171c;
    --cartoso-surface-2: #1b1f26;
    --cartoso-surface-3: #232830;
    --cartoso-text: #e8eaee;
    --cartoso-text-muted: #a0a9b6;

    --cartoso-border: #2a2f38;
    --cartoso-border-strong: #6a7280;

    /* #2D5BD8 erreicht als Fläche gegen #1B1F26 nur 2,83:1 und reißt damit
       1.4.11. Helle Aktionsfarbe mit dunkler Beschriftung — dasselbe Muster,
       das der Code an anderer Stelle längst fährt. */
    --cartoso-action: #8aaaf2;
    --cartoso-action-on: #0e1116;      /* 8,21:1 */
    --cartoso-action-hover: #a0b9f7;   /* 9,71:1 */
    --cartoso-action-text: #8aaaf2;    /* 7,79 / 7,17 / 6,43 */
    --cartoso-action-tint: #181f33;

    --cartoso-ok: #4fbf87;
    --cartoso-ok-tint: #152622;
    --cartoso-warn: #d9a441;
    --cartoso-warn-tint: #28221a;
    --cartoso-warn-on-tint: #d9a441;
    --cartoso-error: #f08c85;
    --cartoso-error-tint: #2c1a1c;

    --cartoso-instagram: #e879b6;
    --cartoso-whatsapp: #3fd6a4;
    --cartoso-tiktok: #ffffff;

    --cartoso-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --cartoso-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme='dark'] {
  --cartoso-surface: #14171c;
  --cartoso-surface-2: #1b1f26;
  --cartoso-surface-3: #232830;
  --cartoso-text: #e8eaee;
  --cartoso-text-muted: #a0a9b6;

  --cartoso-border: #2a2f38;
  --cartoso-border-strong: #6a7280;

  --cartoso-action: #8aaaf2;
  --cartoso-action-on: #0e1116;
  --cartoso-action-hover: #a0b9f7;
  --cartoso-action-text: #8aaaf2;
  --cartoso-action-tint: #181f33;

  --cartoso-ok: #4fbf87;
  --cartoso-ok-tint: #152622;
  --cartoso-warn: #d9a441;
  --cartoso-warn-tint: #28221a;
  --cartoso-warn-on-tint: #d9a441;
  --cartoso-error: #f08c85;
  --cartoso-error-tint: #2c1a1c;

  --cartoso-instagram: #e879b6;
  --cartoso-whatsapp: #3fd6a4;
  --cartoso-tiktok: #ffffff;

  --cartoso-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --cartoso-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* ============================================================
   Schicht 3 — Aliase auf die Altnamen
   saas-portal.css, design-system.css, saas-landing.css und
   partner-dashboard.css laufen unverändert weiter; sie ziehen ihre Werte
   ab hier aus einer Quelle statt aus sechs eigenen :root-Blöcken.
   ============================================================ */
:root {
  /* saas-portal.css */
  --caradag-bg: var(--cartoso-surface-2);
  --caradag-surface: var(--cartoso-surface);
  --caradag-surface-2: var(--cartoso-surface-2);
  --caradag-text: var(--cartoso-text);
  --caradag-muted: var(--cartoso-text-muted);

  --caradag-brand: var(--cartoso-action);
  --caradag-brand-strong: var(--cartoso-action-hover);
  --caradag-brand-soft: var(--cartoso-action-tint);
  --caradag-brand-on: var(--cartoso-action-on);

  --caradag-signal: var(--cartoso-warn);
  --caradag-signal-soft: var(--cartoso-warn-tint);

  --caradag-success: var(--cartoso-ok);
  --caradag-success-soft: var(--cartoso-ok-tint);
  --caradag-danger: var(--cartoso-error);
  --caradag-danger-soft: var(--cartoso-error-tint);
  --caradag-warn: var(--cartoso-warn);
  --caradag-warn-soft: var(--cartoso-warn-tint);

  --caradag-accent: var(--cartoso-action);
  --caradag-accent-2: var(--cartoso-warn);
  --caradag-border: var(--cartoso-border);
  --caradag-border-strong: var(--cartoso-border-strong);
  --caradag-shadow: var(--cartoso-shadow);
  --caradag-shadow-sm: var(--cartoso-shadow-sm);
  --caradag-radius: var(--cartoso-radius);

  /* Plattformfarben. Die vier toten Instagram-Verlaufsstufen sind entfallen. */
  --caradag-instagram-pink: var(--cartoso-instagram);
  --caradag-whatsapp-teal: var(--cartoso-whatsapp);
  --caradag-tiktok-ink: var(--cartoso-tiktok);

  /* design-system.css */
  --cts-ink: var(--cartoso-text);
  --cts-ink-soft: var(--cartoso-text-muted);
  --cts-paper: var(--cartoso-surface-2);
  --cts-surface: var(--cartoso-surface);
  --cts-surface-muted: var(--cartoso-surface-2);
  --cts-border: var(--cartoso-border);
  --cts-border-strong: var(--cartoso-border-strong);
  --cts-steel: var(--cartoso-text-muted);
  --cts-steel-soft: var(--cartoso-text-muted);

  --cts-brand: var(--cartoso-action);
  --cts-brand-strong: var(--cartoso-action-hover);
  --cts-brand-ink: var(--cartoso-action-on);
  --cts-brand-soft: var(--cartoso-action-tint);

  --cts-signal: var(--cartoso-warn);
  --cts-signal-soft: var(--cartoso-warn-tint);
  --cts-success: var(--cartoso-ok);
  --cts-success-soft: var(--cartoso-ok-tint);
  --cts-danger: var(--cartoso-error);
  --cts-danger-soft: var(--cartoso-error-tint);
  --cts-warn: var(--cartoso-warn);
  --cts-warn-soft: var(--cartoso-warn-tint);
  --cts-focus: var(--cartoso-focus);

  --cts-font-display: var(--cartoso-font-display);
  --cts-font-body: var(--cartoso-font-body);
  --cts-font-mono: var(--cartoso-font-mono);

  --cts-radius-sm: var(--cartoso-radius-sm);
  --cts-radius-md: var(--cartoso-radius);
  --cts-radius-lg: var(--cartoso-radius);

  --cts-shadow-1: var(--cartoso-shadow-sm);
  --cts-shadow-2: var(--cartoso-shadow);

  --cts-space-1: 8px;
  --cts-space-2: 16px;
  --cts-space-3: 24px;
  --cts-space-4: 40px;
  --cts-space-5: 64px;
  --cts-space-6: 96px;

  /* partner-dashboard.css */
  --caradag-partner-bg: var(--cartoso-surface-2);
  --caradag-partner-surface: var(--cartoso-surface);
  --caradag-partner-surface-2: var(--cartoso-surface-3);
  --caradag-partner-text: var(--cartoso-text);
  --caradag-partner-muted: var(--cartoso-text-muted);
  --caradag-partner-border: var(--cartoso-border);
  --caradag-partner-accent: var(--cartoso-action);
  --caradag-partner-accent-soft: var(--cartoso-action-tint);
  --caradag-partner-accent-strong: var(--cartoso-action-hover);
  --caradag-partner-danger: var(--cartoso-error);
  --caradag-partner-success: var(--cartoso-ok);
  --caradag-partner-radius: var(--cartoso-radius);
  --caradag-partner-shadow: var(--cartoso-shadow);
}