/**
 * Womenmatic Brand Design Tokens
 *
 * Layer 1: --wm-* brand tokens (global, all pages)
 * Layer 2: Shadcn/Radix-inspired semantic tokens (aliased to --wm-*)
 *
 * IMPORTANT: This file is enqueued globally (all pages, priority 1).
 * Components consume via var(--wm-*) or semantic var(--primary) etc.
 * Dark mode uses body.wm-dark (NOT body.wm-dark.woocommerce-account)
 * so that shortcodes on Elementor landings also get correct dark colors.
 *
 * @see functions.php womenmatic_enqueue_brand_tokens()
 */

/* ── Layer 1: Brand tokens (light mode) ── */
:root {
    --wm-primary:     #4685A5;
    --wm-primary-rgb: 70, 133, 165;
    --wm-accent:      #C1AE8E;
    --wm-accent-rgb:  193, 174, 142;
    --wm-secondary:   #50705A;
    --wm-text:        #4C4842;
    --wm-text-muted:  #7A7470;
    --wm-bg-page:     #F5F5F3;
    --wm-bg-content:  #FFFFFF;
    --wm-border:      rgba(0, 0, 0, 0.06);

    /* Spacing scale (8px grid) */
    --wm-space-1:  4px;
    --wm-space-2:  8px;
    --wm-space-3:  12px;
    --wm-space-4:  16px;
    --wm-space-5:  20px;
    --wm-space-6:  24px;
    --wm-space-7:  28px;
    --wm-space-8:  32px;
    --wm-space-10: 40px;

    /* Shape */
    --wm-radius:    8px;
    --wm-radius-sm: 6px;
    --wm-radius-xs: 4px;

    /* Shadows */
    --wm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --wm-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --wm-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
    --wm-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);

    /* Transitions */
    --wm-transition: 150ms ease;

    /* Sidebar (account area) */
    --wm-sidebar-width: 240px;
}

/* ── Layer 2: Semantic tokens (light mode) ── */
:root {
    --background:           var(--wm-bg-content, #FFFFFF);
    --foreground:           var(--wm-text, #4C4842);
    --card:                 var(--wm-bg-content, #FFFFFF);
    --card-foreground:      var(--wm-text, #4C4842);
    --popover:              var(--wm-bg-content, #FFFFFF);
    --popover-foreground:   var(--wm-text, #4C4842);

    --primary:              var(--wm-primary, #4685A5);
    --primary-foreground:   #FFFFFF;
    --secondary:            rgba(70, 133, 165, 0.06);
    --secondary-foreground: var(--wm-primary, #4685A5);

    --muted:                rgba(0, 0, 0, 0.04);
    --muted-foreground:     var(--wm-text-muted, #7A7470);

    --accent:               var(--wm-accent, #C1AE8E);
    --accent-foreground:    #FFFFFF;

    --destructive:          #dc2626;
    --destructive-foreground: #FFFFFF;

    --border:               var(--wm-border, rgba(0, 0, 0, 0.06));
    --input:                rgba(0, 0, 0, 0.10);
    --ring:                 var(--wm-primary, #4685A5);

    --radius:    var(--wm-radius, 8px);
    --radius-lg: var(--wm-radius, 8px);
    --radius-md: var(--wm-radius-sm, 6px);
    --radius-sm: var(--wm-radius-xs, 4px);

    --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ── Dark mode overrides (global — any page with body.wm-dark) ──
   Scoped to body.wm-dark only (not .woocommerce-account) so that
   [wm_pricing_table] shortcodes on Elementor landings receive correct
   dark colors. Account-area-specific dark rules remain in
   account-theme-toggle.css which adds .woocommerce-account for specificity. */
body.wm-dark {
    /* Layer 1: --wm-* overrides */
    --wm-text:         #E4E2DE;
    --wm-text-muted:   #9C9891;
    --wm-bg-page:      #15151C;
    --wm-bg-content:   #1F1F28;
    --wm-border:       rgba(255, 255, 255, 0.08);
    --wm-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.3);
    --wm-shadow-md:    0 2px 8px rgba(0, 0, 0, 0.25);
    --wm-shadow-lg:    0 4px 16px rgba(0, 0, 0, 0.35);

    /* Layer 2: semantic overrides */
    --background:           #15151C;
    --foreground:           #E4E2DE;
    --card:                 #1F1F28;
    --card-foreground:      #E4E2DE;
    --popover:              #1F1F28;
    --popover-foreground:   #E4E2DE;

    --primary:              #6BA3BF;
    --primary-foreground:   #0B0B10;
    --secondary:            rgba(107, 163, 191, 0.10);
    --secondary-foreground: #6BA3BF;

    --muted:                rgba(255, 255, 255, 0.06);
    --muted-foreground:     #9C9891;

    --accent:               #C1AE8E;
    --accent-foreground:    #0B0B10;

    --border:               rgba(255, 255, 255, 0.08);
    --input:                rgba(255, 255, 255, 0.12);
    --ring:                 #6BA3BF;
}