/* ==========================================================================
   BGZ design tokens — the ONLY place raw colours, sizes and spacing live.
   Every other stylesheet (components.css, admin.css, public.css) uses these
   variables; a hard-coded hex value or px size outside this file is a bug.

   --bgz-primary itself is set from config('bgz.brand.primary') by
   resources/views/partials/styles.blade.php; the value below is only a
   fallback. Variants are derived with color-mix() so one change re-themes all.
   ========================================================================== */

:root {
    /* ── Brand ── */
    --bgz-primary:        #2E7D32;
    --bgz-primary-hover:  color-mix(in srgb, var(--bgz-primary) 82%, black);
    --bgz-primary-soft:   color-mix(in srgb, var(--bgz-primary) 10%, white);
    --bgz-on-primary:     #ffffff;

    /* ── Club colours (Ferry's mockup, EXAMPLE/css/style.css) ── */
    --bgz-navy:           #0E3150;   /* header, footer, dark bands */
    --bgz-ink:            #08131F;   /* text on the bright accent */
    --bgz-accent-bright:  #66BB6A;   /* accent on navy backgrounds */
    --bgz-accent-bright-hover: #7FCB84;
    --bgz-accent-pale:    #9CCB9F;   /* small accents on navy (logo "Arnhem", date labels) */
    --bgz-floor:          #2F6FB0;   /* court-floor blue: play times */
    --bgz-on-navy:        #ffffff;
    --bgz-on-navy-muted:  #C5D3E0;
    --bgz-on-navy-line:   rgb(255 255 255 / 0.15);
    --bgz-on-navy-hover:  rgb(255 255 255 / 0.16);
    --bgz-hero-shade:     linear-gradient(100deg, rgb(8 28 48 / 0.86) 0%, rgb(8 28 48 / 0.62) 55%, rgb(8 28 48 / 0.25) 100%);
    --bgz-text-shadow:    0 2px 14px rgb(0 0 0 / 0.4);

    /* ── Neutrals ── */
    --bgz-bg:             #F4F7FA;   /* page background */
    --bgz-surface:        #ffffff;   /* cards, modals, inputs */
    --bgz-surface-muted:  #EEF2F6;   /* read-only fields, table hover */
    --bgz-border:         #D6DEE6;
    --bgz-border-subtle:  #E4EAF0;
    --bgz-text:           #14263A;
    --bgz-text-muted:     #4F5E6C;
    --bgz-text-subtle:    #8593A0;
    --bgz-overlay:        rgb(8 19 31 / 0.55);
    --bgz-lightbox:       rgb(6 16 26 / 0.94);

    /* ── Semantic ── */
    --bgz-danger:         #b91c1c;
    --bgz-danger-hover:   color-mix(in srgb, var(--bgz-danger) 82%, black);
    --bgz-danger-soft:    color-mix(in srgb, var(--bgz-danger) 10%, white);
    --bgz-success:        #15803d;
    --bgz-success-soft:   color-mix(in srgb, var(--bgz-success) 10%, white);
    --bgz-warning:        #b45309;
    --bgz-warning-soft:   color-mix(in srgb, var(--bgz-warning) 10%, white);

    /* ── Typography ── */
    --bgz-font-sans:      system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bgz-font-heading:   var(--bgz-font-sans);
    --bgz-font-body:      'Barlow', var(--bgz-font-sans);                        /* public site */
    --bgz-font-display:   'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; /* public headings */
    --bgz-text-xs:        0.75rem;
    --bgz-text-sm:        0.875rem;
    --bgz-text-base:      1rem;
    --bgz-text-lg:        1.125rem;
    --bgz-text-xl:        1.375rem;
    --bgz-text-2xl:       1.75rem;
    --bgz-text-3xl:       2.25rem;
    --bgz-text-body:      1.0625rem;                      /* public body copy (17px) */
    --bgz-display-sm:     1.75rem;                        /* card / post titles */
    --bgz-display-md:     clamp(1.75rem, 5vw, 2.5rem);    /* bands */
    --bgz-display-lg:     clamp(2rem, 5vw, 2.75rem);      /* section titles */
    --bgz-display-xl:     clamp(2.75rem, 9vw, 5.25rem);   /* hero title, stats */
    --bgz-leading:        1.6;
    --bgz-weight-medium:  500;
    --bgz-weight-bold:    600;
    --bgz-weight-black:   700;

    /* ── Spacing (4px scale) ── */
    --bgz-space-1:  0.25rem;
    --bgz-space-2:  0.5rem;
    --bgz-space-3:  0.75rem;
    --bgz-space-4:  1rem;
    --bgz-space-5:  1.25rem;
    --bgz-space-6:  1.5rem;
    --bgz-space-8:  2rem;
    --bgz-space-12: 3rem;
    --bgz-space-10: 2.5rem;
    --bgz-space-16: 4rem;
    --bgz-section-pad: clamp(3rem, 8vw, 5.5rem);

    /* ── Shape & depth ── */
    --bgz-radius-sm:   0.375rem;
    --bgz-radius-md:   0.5rem;
    --bgz-radius-lg:   0.75rem;
    --bgz-radius-card: 0.625rem;
    --bgz-radius-full: 999px;
    --bgz-shadow-sm:   0 1px 2px rgb(0 0 0 / 0.06);
    --bgz-shadow-lg:   0 10px 30px rgb(0 0 0 / 0.15);
    --bgz-shadow-card: 0 8px 24px rgb(8 28 48 / 0.12);
    --bgz-shadow-card-hover: 0 14px 30px rgb(8 28 48 / 0.2);
    --bgz-shadow-menu: 0 12px 28px rgb(0 0 0 / 0.28);

    /* ── Layout ── */
    --bgz-container:   65rem;    /* 1040px, public site */
    --bgz-gutter:      1.25rem;  /* side padding */
    --bgz-nav-height:  4.25rem;
    --bgz-avatar-size: 2.5rem;
    --bgz-logo-size:   3rem;
    --bgz-z-header:    10;
    --bgz-z-menu:      30;
    --bgz-z-lightbox:  50;
    --bgz-z-modal:     9999;
    --bgz-transition:  150ms ease;
    --bgz-transition-slow: 250ms ease;
}