/* ═══════════════════════════════════════════════════════════════
   mc-web-theme · mc-tokens.css
   Die EINE Quelle für Farben, Typografie und Design-Tokens des
   merchantCENTRAL-Webauftritts (Marketing, Hilfe, Warehouse-Doku).

   Konvention:
   - --mc-*      Design-Tokens (hier definiert)
   - .mc-*       Inhalts-Komponenten (mc-components.css)
   - .mc-l-*     Landing-Module (mc-landing.css)

   Light = :root · Dark = [data-md-color-scheme="slate"]
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Markenfarben ── */
    --mc-teal: #007B8A;
    --mc-teal-light: #009BA3;
    --mc-teal-dark: #005662;
    --mc-cyan: #00B4D8;
    --mc-orange: #FF9800;
    --mc-orange-light: #FFB74D;
    --mc-slate: #2C3E50;
    --mc-deep: #06262B;
    --mc-deep-2: #0A3A42;

    /* ── Flächen & Text ── */
    --mc-text: #1B262C;
    --mc-muted: #5C6B73;
    --mc-mid-gray: #666666;
    --mc-light-gray: #F5F5F5;
    --mc-band-bg: #F2F9FA;
    --mc-card-bg: #FFFFFF;
    --mc-card-border: rgba(0, 123, 138, 0.14);
    --mc-chip-bg: rgba(0, 123, 138, 0.07);
    --mc-highlight: #E8F5E9;

    /* ── Verläufe ── */
    --mc-grad: linear-gradient(135deg, #007B8A 0%, #00B4D8 100%);
    --mc-grad-warm: linear-gradient(135deg, #FF9800 0%, #FFB74D 100%);
    --mc-grad-hero: linear-gradient(158deg, #071E23 0%, #06343C 48%, #00474F 100%);

    /* ── Schatten & Radien ── */
    --mc-shadow: 0 2px 10px rgba(6, 38, 43, 0.06);
    --mc-shadow-hover: 0 18px 40px -14px rgba(0, 123, 138, 0.35);
    --mc-radius-sm: 6px;
    --mc-radius: 12px;
    --mc-radius-lg: 16px;

    /* ── Typografie ── */
    --mc-font-text: "Segoe UI", system-ui, -apple-system, sans-serif;
    --mc-font-code: "Cascadia Code", "Fira Code", monospace;
}

/* ── Dark Mode ── */
[data-md-color-scheme="slate"] {
    --mc-text: #E2E4E9;
    --mc-muted: #9FB4BC;
    --mc-band-bg: #16252C;
    --mc-card-bg: #1B262C;
    --mc-card-border: rgba(0, 180, 216, 0.16);
    --mc-chip-bg: rgba(0, 180, 216, 0.08);
    --mc-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    --mc-shadow-hover: 0 18px 40px -14px rgba(0, 180, 216, 0.3);
}

/* ═══════════════════════════════════════════════════════════════
   Material-Theme-Einfärbung (gilt für alle drei Sites)
   ═══════════════════════════════════════════════════════════════ */
[data-md-color-scheme="default"] {
    --md-primary-fg-color: var(--mc-teal);
    --md-primary-fg-color--light: var(--mc-teal-light);
    --md-primary-fg-color--dark: var(--mc-teal-dark);
    --md-accent-fg-color: var(--mc-cyan);
    --md-typeset-a-color: var(--mc-teal);
}

[data-md-color-scheme="slate"] {
    --md-primary-fg-color: var(--mc-teal);
    --md-primary-fg-color--light: var(--mc-teal-light);
    --md-primary-fg-color--dark: var(--mc-teal-dark);
    --md-accent-fg-color: var(--mc-cyan);
    --md-typeset-a-color: var(--mc-cyan);
}

:root {
    --md-text-font: "Segoe UI", system-ui, -apple-system, sans-serif;
    --md-code-font: "Cascadia Code", "Fira Code", monospace;
}