/* ==============================================================
   KIWAG.com — Design-Tokens (variables.css)
   ==============================================================
   HIER definierst du ALLE Farben, Schriften und Abstände.
   Ändere Werte hier, und die gesamte Seite passt sich an.
   ============================================================== */

:root {
    /* ----------------------------------------------------------
       BASISFARBEN (überall gleich, nicht ändern)
       ---------------------------------------------------------- */
    --color-dark:       #0f1729;
    --color-dark-soft:  #1a2237;
    --color-light:      #f7f6f3;
    --color-white:      #ffffff;
    --color-text:       #2c2c2a;
    --color-text-soft:  #5f5e5a;
    --color-text-muted: #888780;
    --color-border:     #e2e0d8;
    --color-border-soft:#f0efe8;

    /* ----------------------------------------------------------
       AKZENTFARBEN PRO KATEGORIE
       Diese Variable wird pro Seite überschrieben.
       Standard = neutrales Dunkelblau
       ---------------------------------------------------------- */
    --accent:           #185FA5;
    --accent-light:     #E6F1FB;
    --accent-dark:      #0C447C;

    /* Finanzen */
    --accent-finanzen:       #0F6E56;
    --accent-finanzen-light: #E1F5EE;
    --accent-finanzen-dark:  #085041;

    /* IT-Service */
    --accent-it:       #185FA5;
    --accent-it-light: #E6F1FB;
    --accent-it-dark:  #0C447C;

    /* PV-Anlagen */
    --accent-pv:       #BA7517;
    --accent-pv-light: #FAEEDA;
    --accent-pv-dark:  #633806;

    /* ----------------------------------------------------------
       NEUE KATEGORIE HINZUFÜGEN:
       Kopiere die 3 Zeilen oben und ändere den Namen + Farben.
       Beispiel:
       --accent-immobilien:       #8B5CF6;
       --accent-immobilien-light: #EDE9FE;
       --accent-immobilien-dark:  #5B21B6;
       ---------------------------------------------------------- */

    /* ----------------------------------------------------------
       SCHRIFTEN
       ---------------------------------------------------------- */
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

    /* ----------------------------------------------------------
       ABSTÄNDE & GRÖSSEN
       ---------------------------------------------------------- */
    --space-xs:   0.25rem;   /*  4px */
    --space-sm:   0.5rem;    /*  8px */
    --space-md:   1rem;      /* 16px */
    --space-lg:   1.5rem;    /* 24px */
    --space-xl:   2rem;      /* 32px */
    --space-2xl:  3rem;      /* 48px */
    --space-3xl:  4rem;      /* 64px */
    --space-4xl:  6rem;      /* 96px */

    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-xl:  16px;
    --radius-full: 9999px;

    --max-width:  1200px;
    --nav-height: 72px;

    /* ----------------------------------------------------------
       SCHATTEN (dezent und modern)
       ---------------------------------------------------------- */
    --shadow-sm:  0 1px 2px rgba(15, 23, 41, 0.06);
    --shadow-md:  0 4px 12px rgba(15, 23, 41, 0.08);
    --shadow-lg:  0 8px 32px rgba(15, 23, 41, 0.12);

    /* ----------------------------------------------------------
       ÜBERGÄNGE
       ---------------------------------------------------------- */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
}