/*
 * Design-Tokens · 4 media selling GmbH · Version 1
 *
 * Quelle: 4mediaselling-website/src/styles/tokens.css
 * Kopie:  etim-toolbox/static/css/tokens.css (nur über scripts/tokens-sync.sh ändern)
 * Werte:  docs/Design-Vorgabe · 4 media selling GmbH.md, Referenz ist die 4ms-toolbox-Landingpage.
 *
 * Breakpoints lassen sich nicht als Variable in @media verwenden:
 * 1024px (Tablet) und 768px (Mobil), jeweils max-width.
 */
:root {
    /* Farben */
    --color-blue: #0066CC;               /* Buttons, Links, Akzent */
    --color-black: #000000;              /* Text, dunkle Flächen, Hover der Buttons */
    --color-white: #FFFFFF;
    --color-soft: #F8F8F8;               /* helle Abschnittsfläche */
    --color-hairline: #E0E0E0;           /* Rahmen, Trennlinien */
    --color-hairline-light: #E5E5E5;     /* Header-Unterkante */
    --color-field-border: #BDBDBD;
    --color-text-strong: #333;
    --color-text: #444;
    --color-text-muted: #555;
    --color-text-subtle: #666;

    /* Grau auf Schwarz (Footer, Cookie-Banner) */
    --color-muted-on-dark: #AAA;         /* Fließtext */
    --color-muted-on-dark-strong: #CCC;  /* Links */
    --color-muted-on-dark-soft: #999;    /* Überschriften */
    --color-muted-on-dark-faint: #777;   /* Copyright, Rechtliches; #666 hatte nur 3,66:1 auf Schwarz */
    --color-line-on-dark: #333;

    /* Rückmeldungen */
    --color-error: #C62828;
    --color-error-bg: #FDF2F2;
    --color-success: #2E7D32;
    --color-success-bg: #F1F8F1;
    --color-info-bg: #F2F7FC;

    /* Schrift */
    --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --weight-regular: 400;
    --weight-semibold: 600;
    --weight-bold: 700;

    --text-xs: 13px;
    --text-sm: 14px;
    --text-base-sm: 15px;
    --text-base: 16px;
    --text-md: 17px;
    --text-lg: 18px;
    --text-xl: 20px;
    --text-2xl: 22px;
    --text-3xl: 28px;
    --text-4xl: 32px;
    --text-5xl: 36px;
    --text-6xl: 42px;
    --text-7xl: 48px;
    --text-8xl: 56px;
    --text-9xl: 68px;

    --leading-none: 1;
    --leading-tight: 1.1;
    --leading-heading: 1.2;
    --leading-body: 1.5;
    --leading-snug: 1.6;
    --leading-relaxed: 1.7;
    --leading-loose: 1.8;

    --tracking-label: 2px;
    --tracking-caps: 1.5px;
    --tracking-caps-sm: 1px;

    /* Abstände */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-8: 64px;
    --space-9: 72px;
    --space-10: 80px;
    --space-12: 96px;

    /* Layout */
    --container: 1200px;
    --gutter: 40px;
    --gutter-tablet: 24px;
    --section-y: 96px;
    --section-y-tablet: 72px;
    --header-height: 80px;

    /* Linien und Flächen: keine Verläufe, keine abgerundeten Ecken */
    --border-width: 1px;
    --border-width-strong: 2px;
    --radius: 0;
    --accent-line-width: 80px;
    --accent-line-height: 3px;
    --shadow-header: 0 2px 20px rgba(0,0,0,0.06);

    /* Bewegung */
    --ease-default: 0.2s ease;
    --ease-slow: 0.3s ease;
    --ease-reveal: 0.4s ease;            /* Einblenden beim Scrollen */
}