/**
 * Carbon Design Tokens for ProductTickler Pro
 * ============================================
 * Extracted from the Carbon dashboard (design/carbon-react-rewrite).
 *
 * HOW TO USE:
 * 1. Load this file AFTER style.css (it overrides :root variables)
 * 2. The existing --color-* and --glass-* properties are remapped
 *    to carbon equivalents, so all existing CSS "just works"
 * 3. Carbon-specific tokens (--carbon-*) are also available for
 *    new components that want finer control
 *
 * NOT ACTIVE until explicitly enqueued in functions.php.
 */

:root {
    /* ─── Core backgrounds (light theme — bol.com / boloo.co inspired) ─── */
    --color-background:     #FFFFFF;    /* page bg */
    --color-card-bg:        #FFFFFF;    /* card surface */
    --color-card-border:    #E5E7EB;    /* subtle border */

    /* ─── Brand colors ─── */
    --color-primary:        #1D4ED8;    /* bol.com-inspired primary blue */
    --color-primary-light:  #2563EB;    /* lighter blue (hover/accent) */
    --color-secondary:      #2563EB;    /* secondary blue accent */

    /* ─── Text ─── */
    --color-text:           #0F172A;    /* near-black slate */
    --color-text-muted:     #64748B;    /* muted slate grey */
    --color-border:         #E5E7EB;    /* explicit border token */

    /* ─── Surface elevation (was glassmorphism on dark) ─── */
    --glass-bg:             #FFFFFF;    /* solid white card */
    --glass-border:         #E5E7EB;    /* light border */
    --glass-blur:           0px;        /* no blur — light theme uses shadows */

    /* ─── Typography ─── */
    --font-family-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    /* ─── Layout (unchanged) ─── */
    --header-height:        80px;
    --container-max-width:  1440px;
    --breakpoint-nav:       1400px;

    /* ─── Carbon surface system (light mode — layered greys) ─── */
    --carbon-bg:            #FFFFFF;
    --carbon-surface-1:     #F7F9FC;
    --carbon-surface-2:     #F3F4F6;
    --carbon-surface-3:     #E5E7EB;
    --carbon-border:        #E5E7EB;
    --carbon-border-subtle:  #F1F5F9;

    /* ─── Carbon text ─── */
    --carbon-text-primary:  #0F172A;
    --carbon-text-secondary: #64748B;
    --carbon-text-muted:    #94A3B8;

    /* ─── Carbon accents ─── */
    --carbon-accent:        #1D4ED8;
    --carbon-accent-hover:  #1E40AF;
    --carbon-success:       #059669;
    --carbon-danger:        #DC2626;
    --carbon-warning:       #D97706;
}

/*
 * Override glassmorphism effects globally.
 * backdrop-filter: blur() becomes a no-op when --glass-blur is 0px,
 * but some components may hardcode it. These rules catch those cases.
 */
.glass-card,
.glass-panel,
[class*="backdrop-blur"],
[class*="glass"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}