/**
 * Design tokens — :root custom properties.
 * Loaded before all other CJW component CSS so var(--cjw-*) is available everywhere.
 * Reference: docs/THEME.md.
 */

:root {
    /* --- Brand spine (mono) --- */
    /* Site is fundamentally monochrome. Use these for headings, CTAs, footer, dark surfaces. */
    --cjw-color-primary:      #000000;        /* headings, brand wordmark, active borders, filter toggle */
    --cjw-color-primary-soft: #111111;        /* footer, WC default btn, parent link color, address title */
    --cjw-color-primary-alt:  #1a1a1a;        /* CTA banner */

    /* --- Accent (sparing, interactive only) --- */
    /* Blue ONLY for: header sign-in/up, filter-count badge (active state), copy-link hover. */
    --cjw-color-accent:      #1A5EDD;
    --cjw-color-accent-tint: #f0f5ff;         /* hover bg under accent borders */
    --cjw-color-accent-soft: #e9f1fb;         /* DataTable thead bg */

    /* --- Neutrals (light) --- */
    --cjw-color-bg-page:         #f6f6f6;     /* parent body bg */
    --cjw-color-bg-surface:      #ffffff;
    --cjw-color-bg-surface-alt:  #F9F9FE;     /* offer-card */
    --cjw-color-bg-muted:        #f0f0f0;     /* hero/breadcrumb area */

    /* --- Neutrals (dark) --- */
    /* Aliases of primary-soft / primary-alt, kept for "this is a background" semantics. */
    --cjw-color-bg-dark:         #111111;     /* footer + WC default btn */
    --cjw-color-bg-dark-alt:     #1a1a1a;     /* CTA banner */

    /* --- Text --- */
    --cjw-color-text:               #000000;  /* headings */
    --cjw-color-text-body:          #666666;  /* body copy / parent default */
    --cjw-color-text-muted:         #555555;  /* subtitles */
    --cjw-color-text-soft:          #777777;  /* form input value */
    --cjw-color-text-on-dark:       #ffffff;
    --cjw-color-text-on-dark-muted: #aaaaaa;
    --cjw-color-text-on-dark-soft:  #cccccc;

    /* --- Borders --- */
    --cjw-color-border:        #EBEBEB;       /* card / input default */
    --cjw-color-border-strong: #dee2e6;       /* table borders */
    --cjw-color-border-soft:   #cccccc;

    /* --- Status --- */
    --cjw-color-success:   #4CAF50;
    --cjw-color-warning:   #FF9800;
    --cjw-color-danger:    #F44336;
    --cjw-color-info:      #2196F3;
    --cjw-color-highlight: rgba(33, 150, 243, 0.15);

    /* --- Typography --- */
    --cjw-font-base: 'Jost', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    --cjw-font-size-xs:  12px;
    --cjw-font-size-sm:  14px;
    --cjw-font-size-md:  16px;   /* body */
    --cjw-font-size-lg:  18px;   /* section eyebrow */
    --cjw-font-size-xl:  24px;   /* h2 / corporate section */
    --cjw-font-size-2xl: 28px;   /* h1 / corporate hero */

    --cjw-line-height-tight: 1.3;
    --cjw-line-height-snug:  1.4;
    --cjw-line-height-base:  1.6;
    --cjw-line-height-loose: 1.7;

    --cjw-weight-regular:  400;
    --cjw-weight-medium:   500;
    --cjw-weight-semibold: 600;
    --cjw-weight-bold:     700;

    /* --- Radii --- */
    --cjw-radius-input:   3px;   /* form fields */
    --cjw-radius-sm:      6px;   /* small btns (copy-link) */
    --cjw-radius-md:      8px;   /* toast, cta image */
    --cjw-radius-card:   12px;   /* brand-card, category-card, badge */
    --cjw-radius-pill:   50px;   /* sign-in/up + WC default btn */
    --cjw-radius-circle: 50%;

    /* --- Spacing scale --- */
    --cjw-space-1:   4px;
    --cjw-space-2:   8px;
    --cjw-space-3:  12px;
    --cjw-space-4:  16px;
    --cjw-space-5:  20px;
    --cjw-space-6:  24px;
    --cjw-space-8:  32px;
    --cjw-space-10: 40px;
    --cjw-space-15: 60px;

    /* --- Shadows --- */
    --cjw-shadow-card:    0 2px 5px rgba(0, 0, 0, 0.1);
    --cjw-shadow-popover: 0 4px 40px rgba(0, 0, 0, 0.1);
    --cjw-shadow-toast:   0 4px 12px rgba(0, 0, 0, 0.3);
    --cjw-shadow-bar:     0 4px 16px rgba(7, 22, 52, 0.05);

    /* --- Layout --- */
    --cjw-container-max:         1300px;   /* corporate sections */
    --cjw-container-max-wide:    1400px;   /* corporate-gifting page */
    --cjw-container-max-account: 1440px;   /* WooCommerce account */

    /* --- Breakpoints (reference; CSS @media must use literals) --- */
    --cjw-bp-xs:   480px;
    --cjw-bp-sm:   720px;
    --cjw-bp-md:   768px;
    --cjw-bp-lg:  1024px;
    --cjw-bp-xl:  1199px;
    --cjw-bp-2xl: 1920px;

    /* --- Transitions --- */
    --cjw-transition-fast: 0.2s ease;
    --cjw-transition-base: 0.3s ease;
    --cjw-transition-slow: 0.4s ease;
}