/* ==========================================================================
   BBB Design Tokens
   Apple HIG-inspirierte Basis, warme Wein-Palette fuer den Verein.
   ========================================================================== */

:root {
    /* --- Farben: Brand --- */
    --color-bordeaux:        #6B0F1A;
    --color-bordeaux-dark:   #4A0A12;
    --color-bordeaux-light:  #8C3A4A;
    --color-gold:            #C9A66B;
    --color-gold-soft:       #E6D4A7;
    --color-vine:            #3E5641;
    --color-vine-soft:       #6F8474;

    /* --- Farben: Neutrals --- */
    --color-bg:              #FBF7F1;   /* warmes Elfenbein */
    --color-bg-alt:          #F2EADC;
    --color-surface:         #FFFFFF;
    --color-surface-soft:    #F7F0E2;
    --color-border:          #DDD1BC;
    --color-border-strong:   #BFAE90;
    --color-text:            #1A120B;   /* fast schwarz, warm */
    --color-text-muted:      #574B40;   /* kontrastreicher als vorher */
    --color-text-soft:       #7A6A5A;   /* nur fuer dekorative Hinweise */
    --color-text-inverse:    #FBF7F1;

    /* --- Farben: States --- */
    --color-focus:           #007AFF;   /* Apple HIG */
    --color-success:         #2E7D32;
    --color-warning:         #B25E09;
    --color-danger:          #B0201E;
    --color-info:            #31658E;

    /* --- Typografie --- */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
                 "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif,
                 "Apple Color Emoji", "Segoe UI Emoji";
    --font-display: "SF Pro Display", -apple-system, BlinkMacSystemFont,
                    "Segoe UI", Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --fs-12: 0.75rem;
    --fs-14: 0.875rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-30: 1.875rem;
    --fs-36: 2.25rem;
    --fs-48: 3rem;
    --fs-60: 3.75rem;

    --lh-tight: 1.15;
    --lh-snug: 1.3;
    --lh-normal: 1.55;
    --lh-relaxed: 1.75;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* --- Spacing (8pt-Grid) --- */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-8:  32px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-24: 96px;

    /* --- Radien --- */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* --- Shadows (subtil, apple-like) --- */
    --shadow-xs: 0 1px 2px rgba(30, 26, 23, 0.05);
    --shadow-sm: 0 2px 6px rgba(30, 26, 23, 0.06), 0 1px 2px rgba(30, 26, 23, 0.04);
    --shadow-md: 0 8px 24px rgba(30, 26, 23, 0.08), 0 2px 4px rgba(30, 26, 23, 0.04);
    --shadow-lg: 0 20px 48px rgba(30, 26, 23, 0.12);

    /* --- Layout --- */
    --container-max: 1200px;
    --container-pad: var(--sp-6);
    --header-height: 72px;

    /* --- Motion --- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;

    /* --- Z-Index --- */
    --z-nav: 50;
    --z-overlay: 100;
    --z-modal: 200;
    --z-toast: 300;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* Kerzenlicht-Atmosphaere: warm, nicht zu dunkel, hoher Textkontrast */
        --color-bg:              #2A1F17;
        --color-bg-alt:          #322620;
        --color-surface:         #3B2D24;
        --color-surface-soft:    #44352B;
        --color-border:          #5A4738;
        --color-border-strong:   #7A6550;
        --color-text:            #FAF3E6;   /* hoher Kontrast */
        --color-text-muted:      #DBC9B4;   /* deutlich heller als vorher */
        --color-text-soft:       #B8A58F;
        --color-text-inverse:    #2A1F17;
        --color-bordeaux:        #C26B7D;   /* helleres Bordeaux fuer Links/Akzente */
        --color-bordeaux-dark:   #A84E61;
        --color-bordeaux-light:  #D98B9B;
        --color-gold:            #E0C089;
        --color-gold-soft:       #B89567;
        --color-vine:            #8FA492;
        --color-vine-soft:       #A8BAAC;
        --color-focus:           #4DA3FF;

        --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
        --shadow-sm: 0 2px 6px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.25);
        --shadow-md: 0 8px 24px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3);
        --shadow-lg: 0 20px 48px rgba(0,0,0,0.55);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0ms;
        --dur-base: 0ms;
        --dur-slow: 0ms;
    }
}