/*
 * Supply Solution — Design Tokens
 * SHARED source of truth: must match tokens.css in the b2b-portal.
 *
 * When adding/changing tokens, update BOTH properties.
 * See THEME-SYSTEM.md for rules.
 */

:root {
    /* ── Typography ──────────────────────────────────────────────── */
    --font-sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, Roboto, sans-serif;
    --font-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    --text-xs:    11px;
    --text-sm:    12px;
    --text-base:  13px;
    --text-md:    14px;
    --text-lg:    16px;
    --text-xl:    20px;
    --text-2xl:   24px;
    --text-3xl:   32px;

    --leading-tight:  1.2;
    --leading-base:   1.5;
    --leading-loose:  1.7;

    --weight-normal:    400;
    --weight-medium:    500;
    --weight-semibold:  600;
    --weight-bold:      700;
    --weight-black:     800;

    /* ── Spacing ─────────────────────────────────────────────────── */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ── Radii ───────────────────────────────────────────────────── */
    --radius-sm:    6px;   /* inputs, small buttons, chips */
    --radius-md:   10px;   /* cards, panels */
    --radius-lg:   14px;   /* large containers, modals */
    --radius-pill: 999px;  /* status badges, pills */

    /* ── Shadows ─────────────────────────────────────────────────── */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.15);

    /* ── Semantic colors (never per-store) ───────────────────────── */
    --success:      #1abc9c;
    --success-soft: rgba(26, 188, 156, 0.10);
    --warning:      #f59e0b;
    --warning-soft: rgba(245, 158, 11, 0.10);
    --danger:       #ef4444;
    --danger-soft:  rgba(239, 68, 68, 0.08);
    --info:         #60a5fa;
    --info-soft:    rgba(96, 165, 250, 0.10);

    /* ── Accent (per store — override in store-accents/*.css) ────── */
    --accent:        #3b82f6;                    /* default (portal / parent landing) */
    --accent-hover:  #2563eb;
    --accent-soft:   rgba(59, 130, 246, 0.12);
    --accent-border: rgba(59, 130, 246, 0.30);
    --accent-text:   #60a5fa;
}

/* ── Storefront default: LIGHT mode ──────────────────────────────── */
:root,
[data-theme="light"] {
    /* Page bg — warm off-white (paper cream). Cards stay pure #fff so they
       "lift" off the page — creates visual rhythm without requiring color,
       reduces eye strain over long browsing sessions. See brand voice doc. */
    --bg-page:       #faf9f7;
    --bg-card:       #ffffff;
    --bg-card-dim:   #f1f5f9;
    --bg-input:      #ffffff;
    --bg-row-hover:  rgba(59, 130, 246, 0.04);

    --text-primary:  #0f172a;
    --text-muted:    #475569;
    --text-faint:    #64748b;
    --text-dimmer:   #94a3b8;
    --text-section:  #cbd5e1;

    --border-card:    #e2e8f0;
    --border-divider: #f1f5f9;
    --border-input:   #cbd5e1;
    --border-faint:   #f8fafc;

    /* Elevation — subtle depth cues. Universal across displays (unlike hue
       shifts which get lost on cheap monitors). Use --shadow-card for
       standard cards, --shadow-card-lift for hover, --shadow-page for
       larger "content page" blocks (specs / reviews section). */
    --shadow-card:      0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-card-lift: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.05);
    --shadow-page:      0 2px 8px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.03);

    /* Color moments — semantic tints used at functional cues (trust icons,
       category tag, hover states). Stay CONSISTENT across all 4 store
       accents; only the primary --accent varies per store. */
    --tint-safety-bg:  rgba(245, 158, 11, 0.14);
    --tint-safety-fg:  #b45309;
    --tint-ship-bg:    rgba(59, 130, 246, 0.14);
    --tint-ship-fg:    #1d4ed8;
    --tint-money-bg:   rgba(139, 92, 246, 0.14);
    --tint-money-fg:   #6d28d9;
    --tint-geo-bg:     rgba(16, 185, 129, 0.14);
    --tint-geo-fg:     #047857;
    --hover-save:      #b45309;
    --hover-quote:     #0f766e;
    --hover-compare:   #6d28d9;
}

/* ── Legacy token aliases ────────────────────────────────────────── */
/*
 * Existing theme CSS (cart.css, pdp.css, plp.css, minicart.css, source/_extend.less)
 * uses --ss-* tokens defined in _extend.less. Aliasing them to the new design tokens
 * here makes ALL existing pages pick up the per-store accent + light/dark switching
 * WITHOUT any file-by-file rewrite. When those files are eventually refactored to
 * use --accent / --space-N / --text-* directly, delete this block.
 *
 * Load order matters: parent's compiled styles-l.css redeclares --ss-* with
 * hardcoded hex and loads LAST on desktop (min-width:768px media query).
 * !important on the alias forces our value to win at cascade level.
 */
:root {
    --ss-blue:     var(--accent) !important;
    --ss-blue-dk:  var(--accent-hover) !important;
    --ss-font:     var(--font-sans) !important;
    --ss-mono:     var(--font-mono) !important;
    --ss-surface:  var(--bg-card-dim) !important;
    --ss-border:   var(--border-card) !important;
    --ss-line:     var(--border-divider) !important;
    --ss-white:    var(--bg-card) !important;
    --ss-ink:      var(--text-primary) !important;
    --ss-ink-2:    var(--text-muted) !important;
    --ss-ink-3:    var(--text-faint) !important;
    --ss-green:    var(--success) !important;
    --ss-red:      var(--danger) !important;
    --ss-r:        var(--radius-sm) !important;
}

/* ── DARK mode (user toggle) ─────────────────────────────────────── */
[data-theme="dark"] {
    --bg-page:       #0f172a;
    --bg-card:       #1e293b;
    --bg-card-dim:   #172033;
    --bg-input:      #0f1a2e;
    --bg-row-hover:  rgba(59, 130, 246, 0.06);

    --text-primary:  #f1f5f9;
    --text-muted:    #94a3b8;
    --text-faint:    #64748b;
    --text-dimmer:   #475569;
    --text-section:  #334155;

    --border-card:    rgba(148, 163, 184, 0.15);
    --border-divider: rgba(148, 163, 184, 0.10);
    --border-input:   rgba(148, 163, 184, 0.20);
    --border-faint:   rgba(148, 163, 184, 0.06);
}