/* ==========================================================================
   Einfach Kuchen — Brand Override
   Overrides WPBlogsAndPages default tokens with brand-specific values.
   Loaded after global.css via wp_enqueue_style().
   ========================================================================== */

/* ==========================================================================
   A. @FONT-FACE DECLARATIONS
   Self-hosted fonts (GDPR-compliant, no external requests).
   Font files: ../fonts/einfach-kuchen/
   ========================================================================== */

/* Outfit — Variable font (400–700), sans-serif body + headings */
/* Latin */
@font-face {
    font-family: 'Outfit';
    src: url('../fonts/einfach-kuchen/Outfit-Variable.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Latin Extended */
@font-face {
    font-family: 'Outfit';
    src: url('../fonts/einfach-kuchen/Outfit-Variable-LatinExt.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Reenie Beanie — Logo + Handwriting font */
@font-face {
    font-family: 'Reenie Beanie';
    src: url('../fonts/einfach-kuchen/ReenieBeanie-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   B. :ROOT TOKEN OVERRIDES
   Only tokens that differ from global.css defaults.
   ========================================================================== */
:root {
    /* --- Colors - Neutral Scale (warmer greys) --- */
    --color-neutral-50: #F9F9F9;
    --color-neutral-100: #EFEFEF;
    --color-neutral-200: #E5E5E5;
    --color-neutral-300: #D4D4D4;
    --color-neutral-400: #A3A3A3;
    --color-neutral-500: #737373;
    --color-neutral-600: #52525B;
    --color-neutral-700: #404040;
    --color-neutral-800: #262626;
    --color-neutral-900: #171717;
    --color-neutral-950: #0A0A0A;

    /* --- Colors - Brand Scale (Plum/Berry) --- */
    --color-brand-50: #FDF4F8;
    --color-brand-100: #FBE8F2;
    --color-brand-200: #F6D2E4;
    --color-brand-300: #F0B0D0;
    --color-brand-400: #E682B0;
    --color-brand-500: #b83b69;
    --color-brand-600: #922d50;
    --color-brand-700: #922f53;
    --color-brand-800: #462537;
    --color-brand-900: #361D2B;
    --color-brand-950: #1A0D14;

    /* --- Colors - Semantic --- */
    --color-primary: #b83b69;
    --color-primary-foreground: #FFFFFF;
    --color-primary-hover: #922f53;
    --color-primary-light: #E682B0;
    --color-primary-bg: #FDF4F8;

    --color-secondary: #922f53;
    --color-secondary-foreground: #FFFFFF;
    --color-secondary-hover: #462537;

    --color-accent: #C2B59B;
    --color-accent-foreground: #222222;
    --color-accent-hover: #B0A288;
    --color-accent-light: #F3F0E9;

    --color-surface: #C8BDB9;

    /* --- Colors - Text --- */
    --color-text-primary: var(--color-neutral-900);
    --color-text-secondary: var(--color-neutral-700);
    --color-text-meta: var(--color-neutral-500);
    --color-link: #b83b69;
    --color-link-hover: #922d50;

    /* --- Colors - Background --- */
    --color-bg-body: #FFFFFF;
    --color-bg-card: #FFFFFF;
    --color-bg-secondary: var(--color-neutral-50);
    --color-bg-surface: #C8BDB9;
    --color-bg-heart: #F3F0E9;

    /* --- Colors - Border --- */
    --color-border: var(--color-neutral-200);
    --color-border-hover: var(--color-neutral-300);
    --color-border-active: #b83b69;
    --color-border-subtle: var(--color-neutral-100);
    --color-border-input: var(--color-neutral-300);

    /* --- Colors - Focus Ring --- */
    --color-ring: #b83b69;
    --color-ring-subtle: rgba(109, 59, 85, 0.25);

    /* --- Colors - Star / Rating --- */
    --color-star: #F59E0B;
    --color-star-light: #FEF3C7;

    /* --- Typography - Font Families --- */
    --font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-serif: 'Outfit', system-ui, -apple-system, sans-serif;
    --font-logo: 'Reenie Beanie', cursive;
    --font-heading: var(--font-sans);
    --font-handwriting: 'Reenie Beanie', cursive;

    /* --- Typography - Heading Size Bump (Reenie Beanie needs more room) --- */
    --font-size-2xl: 1.75rem;
    --font-size-3xl: 2.25rem;
    --font-size-4xl: 2.75rem;

    /* --- Typography - Font Sizes --- */
    --font-size-nav: 0.875rem;
    --font-size-meta: 0.85rem;

    /* --- Line Heights --- */
    --line-height-tight: 1.25;
    --line-height-relaxed: 1.75;
    --line-height-loose: 2;

    /* --- Spacing --- */
    --spacing-section: 4rem;

    /* --- Shadows (plum-tinted glow) --- */
    --shadow-glow-sm: 0 0 8px rgba(109, 59, 85, 0.2);
    --shadow-glow: 0 0 15px rgba(109, 59, 85, 0.3);
    --shadow-soft: 0 4px 20px -2px rgba(109, 59, 85, 0.1);

    /* --- Gradients (brand-colored) --- */
    --gradient-brand: linear-gradient(135deg, #b83b69 0%, #922f53 100%);
    --gradient-brand-soft: linear-gradient(180deg, #FDF4F8 0%, #FFFFFF 100%);
    --gradient-soft: linear-gradient(180deg, var(--color-neutral-100) 0%, #FFFFFF 100%);
    --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
    --gradient-overlay-dark: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    --gradient-dusk: linear-gradient(135deg, #462537 0%, #382924 100%);
    --gradient-subtle-glow: radial-gradient(circle at center, #FBE8F2 0%, transparent 70%);
    --gradient-surface: var(--gradient-soft);

    /* --- Transitions --- */
    --transition-slow: 500ms ease;

    /* --- Logo (Reenie Beanie needs larger sizes) --- */
    --logo-font-size: 2.0rem;
    --logo-font-size-md: 3.5rem;
    --logo-font-size-lg: 3.5rem;
    --logo-color: var(--color-brand-600);
    --logo-color-hover: var(--color-brand-500);
    --logo-line-height: 1.1;

    /* --- Tagline (Absolute Kuchenliebe) --- */
    --tagline-display: block;
    --tagline-margin-top: -5px;
    --tagline-font-size: 0.9rem;
    --tagline-color: var(--color-neutral-600);
    --tagline-letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    :root {
        --font-size-5xl: 2.25rem;
    }
}