/* =============================================================================
   tokens.css — Kanzleimarketing-Portal · Design-System v2
   1. Design-Tokens (CSS Custom Properties)

   ▸ Pro Kundenprojekt: die Markenfarben unten in der "Markenfarben"-Sektion
     anpassen — danach färbt sich das gesamte Theme um (Frontend + Editor).
   ▸ Wird via enqueue_block_assets in Frontend UND Gutenberg-Editor geladen,
     damit beide Welten aus genau dieser Quelle gefärbt werden.
   ============================================================================= */

:root {
    /* ── Markenfarben — pro Kundenprojekt hier anpassen ── */
    --color-primary:           #1B4332;
    --color-primary-hover:     #152E24;
    --color-secondary:         #52796F;
    --color-secondary-hover:   #3F5E55;
    --color-highlight:         #C9A84C;
    --color-heading:           #1A1A1A;
    --color-text:              #2D2D2D;
    --color-text-faded:        #8A9099;
    --color-background:        #FAFAF8;
    --color-background-alt:    #F0EFEB;
    --color-background-dark:   #1B4332;
    --color-border:            #E2E0DA;
    --color-white:             #FFFFFF;

    /* ── RGB-Token (für rgba() mit Alpha) ── */
    --color-primary-rgb:       27, 67, 50;
    --color-highlight-rgb:     201, 168, 76;
    --color-white-rgb:         255, 255, 255;

    /* ── Typografie ── */
    --font-primary:            'Open Sans', sans-serif;
    --line-height-body:        1.65;
    --line-height-heading:     1.1;

    /* ── Layout ── */
    --max-width:               1200px;
    --max-width-narrow:        700px;
    --gutter:                  clamp(20px, 4vw, 48px);

    /* ── Spacing-Skala ── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  16px;
    --space-4:  24px;
    --space-5:  32px;
    --space-6:  48px;
    --space-7:  64px;
    --space-8:  96px;

    /* ── Border Radius ── */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:  16px;
    --radius-full: 9999px;
    --radius:      6px;   /* Standard: Buttons, Nav-Links */

    /* ── Effekte ── */
    --transition:          0.17s ease;

    /* Shadow Stack */
    --shadow-sm:           0 1px  4px rgba(0, 0, 0, 0.06);
    --shadow-md:           0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg:           0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-colored:      0 4px 20px rgba(var(--color-primary-rgb), 0.13);

    /* Legacy — bleiben für Rückwärtskompatibilität */
    --box-shadow:          var(--shadow-md);
    --box-shadow-card:     var(--shadow-colored);

    /* ── Section-Spacing ── */
    --section-y:          96px;
    --section-y-md:       72px;
    --section-y-sm:       56px;
}