/**
 * VR Design System — Base Tokens
 *
 * Defines all --vr-* CSS custom properties on :root.
 * This file is ALWAYS enqueued on the frontend (wp_enqueue_scripts).
 * It is NOT loaded on WP Admin pages.
 *
 * Site-specific themes override individual tokens by redefining them on :root
 * in their own stylesheet. Blocks always reference --vr-* properties, never
 * hardcoded values or --wp--preset--* variables directly.
 */

:root {
    /* ── Colors: Text & Background ───────────────────────────── */
    --vr-color-black:         #0F0F0F;
    --vr-color-bg-black-dark: #151515;
    --vr-color-bg-black:      #212121;
    --vr-color-white:         #FFFFFF;
    --vr-color-beige:         #F2F0ED;

    /* ── Colors: Primary (Blue) ───────────────────────────────── */
    --vr-color-primary-dark:  #0E283F;
    --vr-color-primary:       #3277B1;
    --vr-color-primary-light: #70A6D4;
    --vr-color-primary-pale:  #C3DAEB;

    /* ── Colors: Secondary (Green) ───────────────────────────── */
    --vr-color-secondary:       #45653D;
    --vr-color-secondary-light: #82B077;
    --vr-color-secondary-pale:  #C3D7BF;

    /* ── Colors: Accent ──────────────────────────────────────── */
    --vr-color-accent-red:          #965452;
    --vr-color-accent-pink:         #E6B4AF;
    --vr-color-accent-pink-light:   #F0DBD9;
    --vr-color-accent-orange:       #E59357;
    --vr-color-accent-orange-light: #F7E6DA;
    --vr-color-accent-brown:        #5D4D3C;

    /* ── Colors: Status ──────────────────────────────────────── */
    --vr-color-warning: #FFE100;
    --vr-color-error:   #CD0B11;

    /* ── Colors: Utility ─────────────────────────────────────── */
    --vr-color-twisted-blue: #275C89;
    --vr-color-dark-grey:    #6E727E;

    /* ── Spacing ─────────────────────────────────────────────── */
    --vr-spacing-xs: 0.25rem;  /*  4px */
    --vr-spacing-sm: 0.5rem;   /*  8px */
    --vr-spacing-md: 1rem;     /* 16px */
    --vr-spacing-lg: 2rem;     /* 32px */
    --vr-spacing-xl: 4rem;     /* 64px */

    /* ── Typography: Font family ─────────────────────────────── */
    --vr-font-family-base: 'Inter', system-ui, -apple-system, sans-serif;

    /* ── Typography: Font sizes (desktop) ───────────────────── */
    --vr-font-size-sm:      0.875rem;  /* 14px */
    --vr-font-size-base:    1.125rem;  /* 18px body / Brödtext / Punktlista */
    --vr-font-size-lg:      1.125rem;  /* 18px */
    --vr-font-size-xl:      1.5rem;    /* 24px H3 desktop */
    --vr-font-size-2xl:     2rem;      /* 32px H2 desktop */
    --vr-font-size-3xl:     2.5rem;    /* 40px H1 desktop */
    --vr-font-size-ingress: 1.5rem;    /* 24px Ingress desktop */
    --vr-font-size-4xl:     4rem;      /* 64px Heading XL desktop */

    /* ── Typography: Line heights ────────────────────────────── */
    --vr-line-height-base:    1.7;    /* 170% — Brödtext */
    --vr-line-height-tight:   1.25;  /* 125% — H1/H2 */
    --vr-line-height-normal:  1.5;   /* 150% — Ingress / Text link */
    --vr-line-height-heading3: 1.3;  /* 130% — H3 */
    --vr-line-height-heading4: 1.4;  /* 140% — H4 */

    /* ── Typography: Font weights ────────────────────────────── */
    --vr-font-weight-regular:   400;
    --vr-font-weight-medium:    500;
    --vr-font-weight-semibold:  600;
    --vr-font-weight-bold:      700;

    /* ── Semantic aliases (what components actually reference) ── */
    --vr-surface-primary:   var(--vr-color-white);
    --vr-surface-secondary: var(--vr-color-beige);
    --vr-surface-elevated:  #ffffff;
    --vr-text-primary:      var(--vr-color-black);
    --vr-text-secondary:    #555555;
    --vr-text-on-primary:   var(--vr-color-white);
    --vr-border-default:    #d1d5db;
    --vr-border-subtle:     #e5e7eb;
    --vr-link-default:      var(--vr-color-primary);
    --vr-link-visited:      #6b21a8;
    --vr-link-hover:        var(--vr-color-primary-dark);
    --vr-focus-ring:        var(--vr-color-secondary);
    --vr-shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.05);
    --vr-shadow-md:         0 4px 6px rgba(0, 0, 0, 0.07);
}

/* ── Responsive typography — mobile override ────────────────── */
@media (max-width: 767px) {
    :root {
        --vr-font-size-base:    1rem;     /* 16px — Brödtext mobile */
        --vr-font-size-xl:      1.25rem;  /* 20px — H3 mobile */
        --vr-font-size-2xl:     1.5rem;   /* 24px — H2 mobile */
        --vr-font-size-3xl:     1.75rem;  /* 28px — H1 mobile */
        --vr-font-size-ingress: 1.25rem;  /* 20px — Ingress mobile */
        --vr-font-size-4xl:     2rem;     /* 32px — Heading XL mobile */
    }
}