/* =========================================================================
 * moonflow-tokens.css
 * -------------------------------------------------------------------------
 * Moonflow Design System — Foundation Layer (Design Tokens)
 *
 * Zweck:
 *   Zentrale Definition aller visuellen Primitive (Farben, Typografie,
 *   Radien, Schatten, Abstände, Layout-Maße), extrahiert direkt aus
 *   https://dev.moonflow.tv/. Alle weiteren Stylesheets und Komponenten
 *   bauen ausschließlich auf diesen Variablen auf — niemals auf
 *   Hex-Literalen oder Pixel-Werten. So bleibt das System in einem
 *   einzigen Punkt änderbar.
 *
 * Verwendung:
 *   <link rel="stylesheet" href="/public/css/moonflow-tokens.css">
 *   <link rel="stylesheet" href="/public/css/moonflow-components.css">
 *
 * Konventionen:
 *   --mf-*           globaler Moonflow-Namespace (kollisionsfrei)
 *   --mf-color-*     semantisch benannte Farben (Funktion, nicht Aussehen)
 *   --mf-dark-*      Farben für das dunkle Slate-Panel (Userbit-Stil)
 *   --mf-font-*      Font-Families & Größen
 *   --mf-size-*      numerische Raster-Skala (px-basiert, da Moonflow px-basiert ist)
 *   --mf-radius-*    Eckenradien
 *   --mf-shadow-*    Schatten
 *
 * Abhängigkeiten:
 *   Sansation-Webfont-Familie muss unter /public/fonts/ liegen
 *   (siehe @font-face-Block unten, aus fonts.css übernommen).
 * ========================================================================= */


/* -------------------------------------------------------------------------
 * 1) WEBFONTS — "Sansation"
 * -------------------------------------------------------------------------
 * Die gesamte Moonflow-Display-Typografie verwendet Sansation in sechs
 * Schnitten. Die Font-Familien heißen absichtlich nicht "Sansation",
 * sondern "mx_sansation*" — so wie auf der Live-Seite, um eine 1:1
 * Kompatibilität bestehender Klassen und Inline-Styles zu gewährleisten.
 * ------------------------------------------------------------------------- */

@font-face {
    font-family: 'mx_sansationlight';
    src: url('../fonts/MXSansationWeb-Light.woff') format('woff'),
    url('../fonts/MXSansationWeb-Light.ttf')  format('truetype');
    font-weight: 200;
    font-style:  normal;
    font-display: swap; /* verhindert unsichtbaren Text während des Ladens */
}

@font-face {
    font-family: 'mx_sansationlight_italic';
    src: url('../fonts/MXSansationWeb-LightItalic.woff') format('woff'),
    url('../fonts/MXSansationWeb-LightItalic.ttf')  format('truetype');
    font-weight: 200;
    font-style:  italic;
    font-display: swap;
}

@font-face {
    font-family: 'mx_sansationregular';
    src: url('../fonts/MXSansationWeb-Regular.woff') format('woff'),
    url('../fonts/MXSansationWeb-Regular.ttf')  format('truetype');
    font-weight: 400;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: 'mx_sansationitalic';
    src: url('../fonts/MXSansationWeb-Italic.woff') format('woff'),
    url('../fonts/MXSansationWeb-Italic.ttf')  format('truetype');
    font-weight: 400;
    font-style:  italic;
    font-display: swap;
}

@font-face {
    font-family: 'mx_sansationbold';
    src: url('../fonts/MXSansationWeb-Bold.woff') format('woff'),
    url('../fonts/MXSansationWeb-Bold.ttf')  format('truetype');
    font-weight: 700;
    font-style:  normal;
    font-display: swap;
}

@font-face {
    font-family: 'mx_sansationbold_italic';
    src: url('../fonts/MXSansationWeb-BoldItalic.woff') format('woff'),
    url('../fonts/MXSansationWeb-BoldItalic.ttf')  format('truetype');
    font-weight: 700;
    font-style:  italic;
    font-display: swap;
}


/* -------------------------------------------------------------------------
 * 2) TOKENS — Auf :root gebunden, damit überall erreichbar
 * ------------------------------------------------------------------------- */

:root {

    /* --------------------------------------------------------------- *
     * 2.1 Farben — Markenfarben
     * Signaturfarbe ist das "Moonflow-Pink" #a70064. Auf der Live-Seite
     * existiert außerdem die minimal abweichende Variante #a80064 (nur
     * im Button-Background). Beide werden hier explizit erhalten, damit
     * Bestandsseiten 1:1 zu replizieren sind.
     * --------------------------------------------------------------- */
    --mf-color-primary:         #a70064;  /* Haupt-Pink: Links, Headlines, CTAs, Akzente */
    --mf-color-primary-btn:     #a80064;  /* Pink-Variante für Buttons (1 Punkt dunkler) */
    --mf-color-primary-hover:   #8a0053;  /* abgeleiteter Hover-Zustand (~15 % dunkler)  */

    /* --------------------------------------------------------------- *
     * 2.2 Farben — Graustufen für Text
     * Moonflow nutzt eine gestaffelte Grau-Palette, je weiter unten in
     * der Hierarchie, desto heller. Werte direkt aus dem Live-CSS.
     * --------------------------------------------------------------- */
    --mf-color-text:            #515151;  /* Fließtext (storyText)                         */
    --mf-color-text-strong:     #000000;  /* Body-Default (body color)                     */
    --mf-color-text-highlight:  #585858;  /* hervorgehobene Metadaten (Scheuerleiste)      */
    --mf-color-text-muted:      #818181;  /* sekundäre Headlines, Info-Text                */
    --mf-color-text-subtle:     #8c8c8c;  /* Meta-Informationen                            */
    --mf-color-text-faint:      #949494;  /* dezente Info-Texte, Zeitangaben               */
    --mf-color-text-disabled:   #a0a0a0;  /* Story-Kategorie, Autor                        */
    --mf-color-text-placeholder:#acacac;  /* Platzhalter, Link-Items in Sidebar            */

    /* --------------------------------------------------------------- *
     * 2.3 Farben — Rahmen & Hintergründe (Light-Theme)
     * --------------------------------------------------------------- */
    --mf-color-bg:              #ffffff;  /* Seitenhintergrund (Content-Bereich)           */
    --mf-color-bg-alt:          #f5f5f5;  /* Abwechselnder Hintergrund, Tabellen-Header    */
    --mf-color-bg-zebra:        #fbfbfb;  /* Zebra-Zeilen in .infotable                    */
    --mf-color-bg-infobar:      #dcdcdc;  /* Graue Leiste unter NewsItems                  */

    --mf-color-border:          #dddddd;  /* Standard-Rahmen, dezente Linien               */
    --mf-color-border-soft:     #f5f5f5;  /* noch dezenter (Tabellen)                      */
    --mf-color-border-divider:  #d5d5d5;  /* Unterstrich in NewsItem-Headline              */
    --mf-color-border-strong:   #919191;  /* Betonte Trennlinien                           */

    /* --------------------------------------------------------------- *
     * 2.4 Farben — Dunkles Slate-Panel (Userbit / Dropdown)
     * Der #userPMenue liefert den kompletten Dark-Theme-Bezug. Die
     * gleiche Slate-Palette findet sich auch im blockquote-Style
     * (#475369) wieder — das Moonflow-typische "Deep-Slate".
     * --------------------------------------------------------------- */
    --mf-dark-slate:            #475369;  /* Deep-Slate: Blockquotes, Input-BG im Panel   */
    --mf-dark-bg:               #3c4556;  /* Panel-Hintergrund                            */
    --mf-dark-border:           #4d596f;  /* Panel-Rahmen                                 */
    --mf-dark-input-border:     #5a6577;  /* Input-Rahmen im Dark-Panel                   */
    --mf-dark-shadow-accent:    #23314c;  /* Tieferer Schatten-Akzent (Box-Shadow Layer)  */
    --mf-dark-heading:          #707f99;  /* H1 im Dark-Panel (gedämpft)                  */
    --mf-dark-text:             #fcfcfc;  /* Primärtext auf Dunkel                        */
    --mf-dark-text-muted:       #93a1b8;  /* Sekundärtext, Menüeinträge                   */
    --mf-dark-text-faint:       #95a4bb;  /* Terziärtext, Greetings                       */

    /* --------------------------------------------------------------- *
     * 2.5 Farben — Semantisch (abgeleitet)
     * Werden auf der Live-Site noch nicht verwendet, aber hier schon
     * definiert, damit neue Komponenten (Alerts, Badges) konsistent
     * aus demselben Farb-Pool schöpfen können.
     * --------------------------------------------------------------- */
    --mf-color-success: #2e7d32;
    --mf-color-warning: #ed6c02;
    --mf-color-danger:  #c62828;
    --mf-color-info:    var(--mf-dark-slate);  /* Info reuses brand slate */


    /* --------------------------------------------------------------- *
     * 2.6 Typografie — Font-Stacks
     * Sansation ist die Display-Schrift (Headlines, Nav, CTAs),
     * Arial/Helvetica der Body-Stack. Die Fallbacks sind bewusst
     * konservativ — keine Google-Fonts, keine System-UI-Abhängigkeit.
     * --------------------------------------------------------------- */
    --mf-font-display:         'mx_sansationregular', 'Sansation', Arial, Helvetica, sans-serif;
    --mf-font-display-light:   'mx_sansationlight',   'Sansation', Arial, Helvetica, sans-serif;
    --mf-font-display-bold:    'mx_sansationbold',    'Sansation', Arial, Helvetica, sans-serif;
    --mf-font-display-italic:  'mx_sansationitalic',  'Sansation', Arial, Helvetica, sans-serif;
    --mf-font-body:            Arial, Helvetica, sans-serif;

    /* --------------------------------------------------------------- *
     * 2.7 Typografie — Größenskala (px, analog Live-CSS)
     * Namensschema: -xs < -sm < -base < -md < -lg < -xl < -2xl < -3xl ...
     * Body-Default ist -base (12px) — Moonflow ist eine kompakte Seite.
     * --------------------------------------------------------------- */
    --mf-font-size-xs:    10px;  /* Weiterlesen-Button, Scheuerleiste, Meta     */
    --mf-font-size-sm:    11px;  /* Kleinste Labels                             */
    --mf-font-size-base:  12px;  /* Body-Default, Tabellen                      */
    --mf-font-size-md:    13px;  /* Userbit-Menü-Einträge                       */
    --mf-font-size-lg:    14px;  /* generalText, Filter-Links                   */
    --mf-font-size-xl:    16px;  /* H6, Claim-Small, Autor                      */
    --mf-font-size-2xl:   17px;  /* Sidebar-Headlines                           */
    --mf-font-size-3xl:   18px;  /* Userbit-Name, generalHeadline               */
    --mf-font-size-4xl:   20px;  /* NewsItem-Headline, Story-H2                 */
    --mf-font-size-5xl:   24px;  /* Nav-Items, MainHeadline, StoryCat           */
    --mf-font-size-6xl:   26px;  /* Blockquote                                  */
    --mf-font-size-7xl:   40px;  /* Story-Headline (Artikel-Titel)              */

    /* --------------------------------------------------------------- *
     * 2.8 Line-Heights
     * --------------------------------------------------------------- */
    --mf-line-tight:   1.0;      /* Buttons, Labels                             */
    --mf-line-snug:    1.1;      /* Headlines                                   */
    --mf-line-normal:  1.4;      /* Body (12px ≈ 16-18px LH im Live-CSS)        */
    --mf-line-relaxed: 1.5;      /* Story-Body (14px / 20px)                    */

    /* --------------------------------------------------------------- *
     * 2.9 Eckenradien — SIGNATUR
     * Das prägnanteste visuelle Merkmal der Moonflow-Seite: asymmetrische
     * Eckenradien (nur oben-links + unten-rechts). Wird auf Buttons, dem
     * Weiterlesen-Pill, dem "Alle News"-Link und der NewsItem-Infobar
     * eingesetzt. Bei NEUEN Komponenten im Moonflow-Stil IMMER dieses
     * Muster verwenden — nie symmetrische border-radius.
     * --------------------------------------------------------------- */
    --mf-radius-asym:    7px;                  /* Einzelwert für die beiden Ecken */
    --mf-radius-corners: 7px 0 7px 0;          /* Shorthand: TL=7 TR=0 BR=7 BL=0  */
    --mf-radius-pill:    999px;                /* Für echte Pills (nicht Moonflow-typisch) */

    /* --------------------------------------------------------------- *
     * 2.10 Schatten
     * --------------------------------------------------------------- */
    --mf-shadow-nav:      0 1px 15px 5px rgba(66, 66, 66, 0.4);
    --mf-shadow-dropdown: 0 0 0 1px var(--mf-dark-shadow-accent),
    0 1px 2px 1px rgba(0, 0, 0, 0.7),
    0 5px 75px 12px rgba(0, 0, 0, 0.7);
    --mf-shadow-card:     0 1px 3px rgba(0, 0, 0, 0.08);  /* neue Komponenten */

    /* --------------------------------------------------------------- *
     * 2.11 Abstände (Spacing-Skala)
     * Abgeleitet aus den tatsächlich genutzten px-Werten im Live-CSS.
     * Schritt 4px, da Moonflow auf einer ~4px-Rasterung basiert.
     * --------------------------------------------------------------- */
    --mf-space-1:   4px;
    --mf-space-2:   8px;
    --mf-space-3:   12px;
    --mf-space-4:   16px;
    --mf-space-5:   20px;
    --mf-space-6:   24px;
    --mf-space-8:   32px;
    --mf-space-10:  40px;

    /* --------------------------------------------------------------- *
     * 2.12 Layout-Maße (für #mainContainer-Struktur)
     * --------------------------------------------------------------- */
    --mf-width-wrapper:  1000px;  /* Gesamt-Content-Spalte    */
    --mf-width-main:     670px;   /* Hauptspalte (ohne Sidebar) */
    --mf-width-sidebar:  320px;   /* Rechte Sidebar            */
    --mf-height-header:  175px;
    --mf-height-nav:     62px;
    --mf-height-header-total: 236px; /* Header + Navigation     */

    /* --------------------------------------------------------------- *
     * 2.13 Z-Index-Skala
     * --------------------------------------------------------------- */
    --mf-z-base:     1;
    --mf-z-sticky:   10;
    --mf-z-header:   100;    /* Live-Wert von #headerContainer / #navContainer */
    --mf-z-overlay:  500;
    --mf-z-modal:    9999;   /* Live-Wert vom Gallery-Lightbox                */
    --mf-z-tooltip:  10001;

    /* --------------------------------------------------------------- *
     * 2.14 Transition-Defaults
     * --------------------------------------------------------------- */
    --mf-transition-fast: 0.15s ease;
    --mf-transition-base: 0.2s ease;  /* Live-Wert aus storyGallery-item */
    --mf-transition-slow: 0.3s ease;
}

/* -------------------------------------------------------------------------
 * 3) OPTIONAL: Dark-Mode-Brücke
 * -------------------------------------------------------------------------
 * Moonflow ist primär Light-Theme. Diese Regel stellt sicher, dass ein
 * systemweit aktiviertes Dark-Scheme NICHT automatisch die Variablen
 * umbiegt — die Live-Seite würde sonst bricht. Wenn in Zukunft ein
 * echter Dark-Mode gewünscht ist, wird er hier definiert.
 * ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
    /* Absichtlich leer — Moonflow bleibt im eigenen Theme. */
}