/* ==========================================================
   XXL4YOU 2.0
   Zentrales Design-System
   variables.css
   ========================================================== */

:root {

    /* ======================================================
       HAUPTFARBEN
       ====================================================== */

    /* Äußerer Browserhintergrund */
    --color-page-background: #000000;

    /* Verbindlicher Hauptrotton für alle Seitenbereiche */
    --color-main-background: #250000;

    /* Bereiche, die später bewusst abweichen dürfen */
    --color-header-background: var(--color-main-background);
    --color-navigation-background: var(--color-main-background);
    --color-infobar-background: var(--color-main-background);
    --color-section-background: var(--color-main-background);

    /* Karten werden später gemeinsam festgelegt */
    --color-card-background: rgba(255, 255, 255, .02);
    --color-card-background-hover: rgba(255, 255, 255, .04);


    /* ======================================================
       TEXTFARBEN
       ====================================================== */

    /* Haupttext – warmes Weiß */
    --color-text: #F5EEE8;

    /* Überschriften und besonders helle Texte */
    --color-text-light: #FFFFFF;

    /* Dezente Zusatztexte */
    --color-text-muted: #B8A8A0;


    /* ======================================================
       AKZENTFARBEN
       ====================================================== */

    /* Verbindlicher Goldton */
    --color-gold: #C7A35D;

    /* Zusätzlicher Rot-Akzent für Buttons oder Hinweise */
    --color-red: #B53022;
    --color-red-hover: #D03D2D;


    /* ======================================================
       LINIEN UND RAHMEN
       ====================================================== */

    --color-border-soft: rgba(199, 163, 93, .13);
    --color-border: rgba(199, 163, 93, .26);
    --color-border-strong: rgba(199, 163, 93, .42);


    /* ======================================================
       BUTTONS
       ====================================================== */

	--color-button-background: rgba(91, 10, 10, .58);
	--color-button-background-hover: #5B0A0A;
	--color-button-text: var(--color-text-light);
	--color-button-border: var(--color-border-strong);
	
    /* ======================================================
       STATUSFARBEN
       ====================================================== */

    --color-success: #42C767;
    --color-warning: #D6B04A;
    --color-error: #D54141;


    /* ======================================================
       TYPOGRAFIE
       ====================================================== */

    --font-family-base: "Inter", "Segoe UI", Arial, sans-serif;
    --font-family: var(--font-family-base);

    /* Schriftgrößen */
    --text-xs: .75rem;       /* 12 px */
    --text-sm: .875rem;      /* 14 px */
    --text-base: 1rem;       /* 16 px */
    --text-lg: 1.125rem;     /* 18 px */

    --heading-4: 1rem;        /* 16 px */
    --heading-3: 1.125rem;   /* 18 px */
    --heading-2: 1.375rem;   /* 22 px */
    --heading-1: 2.5rem;     /* 40 px */

    /* Schriftstärken */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Zeilenabstände */
    --line-height-tight: 1.2;
    --line-height-heading: 1.3;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    /* Buchstabenabstände */
    --letter-spacing-tight: -.01em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: .03em;


    /* ======================================================
       ABSTÄNDE
       ====================================================== */

    --space-xs: .5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;


    /* ======================================================
       RADII
       ====================================================== */

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;


    /* ======================================================
       SCHATTEN
       ====================================================== */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .18);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .24);


    /* ======================================================
       ANIMATIONEN
       ====================================================== */

    --transition: .25s ease;


    /* ======================================================
       LAYOUT
       ====================================================== */

    --container-width: 1400px;
    --header-height: auto;


    /* ======================================================
       KOMPATIBILITÄTS-ALIASE
       Diese Namen bleiben vorerst erhalten, damit bestehende
       CSS-Dateien beim schrittweisen Umbau weiter funktionieren.
       ====================================================== */

    --color-primary: #5B0A0A;
    --color-primary-dark: var(--color-main-background);
    --color-home-background: var(--color-main-background);
    --color-accent: var(--color-gold);

    --color-background: var(--color-page-background);
    --color-surface: var(--color-main-background);

    --body-bg: var(--color-page-background);
    --surface: var(--color-main-background);
    --surface-dark: var(--color-header-background);
    --surface-nav: var(--color-navigation-background);
    --surface-info: var(--color-infobar-background);

    --text: var(--color-text);
    --text-light: var(--color-text-light);
    --text-muted: var(--color-text-muted);

    --gold: var(--color-gold);
    --red: var(--color-red);
    --red-hover: var(--color-red-hover);

    --font-size-sm: var(--text-sm);
    --font-size-base: var(--text-base);
    --font-size-lg: var(--text-lg);
    --font-size-xl: var(--heading-2);
    --font-size-xxl: var(--heading-1);
}