/**
 * Storelly Product Builder — Storefront Design Tokens (user-facing pages).
 *
 * Adopts the Printcart Stores v2.5 design system used by the shipped
 * `printcart-store-user-account-v2.5.1.html` (the `--nbd-*` token set) so the
 * buyer-facing surfaces (My Account order detail, Saved designs tab, cart links)
 * match the Printcart user-account look exactly. Source of truth:
 *   - claude-printcart/printcart-store-user-account-v2.5.1-design-system-tokens.md
 *   - printcart-store-user-account-v2.5.1.html  :root
 *
 * Prefixed + scoped to :root; theme-overridable. Load this BEFORE any storefront
 * stylesheet that references var(--nbd-*).
 */

:root {
    /* === Brand (Printcart blue) =============================== */
    --nbd-mb-primary:         #2563eb;
    --nbd-mb-primary-pressed: #1d4ed8;
    --nbd-mb-primary-soft:    #dbeafe;

    /* === Text ================================================= */
    --nbd-mb-text:            #1f2937;
    --nbd-mb-text-soft:       #6b7280;

    /* === Surfaces ============================================= */
    --nbd-mb-bg:              #ffffff;
    --nbd-mb-bg-soft:         #f9fafb;
    --nbd-mb-bg-canvas:       #f3f4f6;
    --nbd-mb-border:          #e5e7eb;
    --nbd-mb-border-strong:   #d1d5db;
    --nbd-mb-border-subtle:   #f3f4f6;

    /* === Status =============================================== */
    --nbd-color-success:        #10b981;
    --nbd-color-success-soft:   #d1fae5;
    --nbd-color-success-border: #86efac;
    --nbd-color-warning:        #f59e0b;
    --nbd-color-warning-soft:   #fef3c7;
    --nbd-color-error:          #ef4444;
    --nbd-color-error-soft:     #fee2e2;
    --nbd-color-error-border:   #fca5a5;
    --nbd-color-info:           #3b82f6;
    --nbd-color-info-soft:      #dbeafe;

    /* === Accent (premium / gold) ============================== */
    --nbd-accent:             #fbbf24;
    --nbd-accent-deep:        #f59e0b;
    --nbd-accent-text-on:     #78350f;

    /* === Spacing ============================================== */
    --nbd-space-1:  4px;
    --nbd-space-2:  8px;
    --nbd-space-3:  12px;
    --nbd-space-4:  16px;
    --nbd-space-6:  24px;
    --nbd-space-8:  32px;
    --nbd-space-12: 48px;

    /* === Radius =============================================== */
    --nbd-radius-sm:   4px;
    --nbd-radius-md:   6px;
    --nbd-radius-lg:   8px;
    --nbd-radius-xl:   12px;
    --nbd-radius-2xl:  16px;
    --nbd-radius-full: 9999px;

    /* === Shadows ============================================== */
    --nbd-shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --nbd-shadow-md:    0 2px 4px 0 rgba(0, 0, 0, 0.08);
    --nbd-shadow-lg:    0 4px 12px 0 rgba(0, 0, 0, 0.08);
    --nbd-shadow-xl:    0 8px 24px 0 rgba(0, 0, 0, 0.16);
    --nbd-shadow-focus: 0 0 0 3px rgba(37, 99, 235, 0.25);

    /* === Motion / typography ================================== */
    --nbd-duration-fast:   120ms;
    --nbd-duration-normal: 220ms;
    --nbd-ease-out:        ease-out;
    --nbd-font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                           "Helvetica Neue", Arial, sans-serif;

    /* === Controls — buttons =================================== */
    --st-btn-gap: 6px;
    --st-btn-radius: var(--nbd-radius-md, 6px);
    --st-btn-shadow: var(--nbd-shadow-sm, 0 1px 2px rgba(0,0,0,.04));
    --st-btn-shadow-hover: var(--nbd-shadow-lg, 0 4px 12px rgba(0,0,0,.08));
    --st-btn-pad-sm: 5px 10px;
    --st-btn-pad-md: 7px 14px;
    --st-btn-pad-lg: 10px 18px;
    --st-btn-font-sm: var(--text-base, 12px);
    --st-btn-font-md: var(--text-md, 13px);
    --st-btn-font-lg: var(--text-lg, 14px);
    --st-btn-min-h-sm: 28px;
    --st-btn-min-h-md: 34px;
    --st-btn-min-h-lg: 42px;

    /* === Controls — fields ==================================== */
    --st-field-pad: 9px 12px;
    --st-field-radius: var(--nbd-radius-md, 6px);
    --st-field-font: var(--text-md, 13px);
    --st-field-bg: var(--nbd-mb-bg, #fff);
    --st-field-border: var(--nbd-mb-border-strong, #c3c4c7);
    --st-field-shadow: var(--shadow-input-inset-md, inset 0 2px 4px rgba(16,24,40,.08));
    --st-field-focus-shadow: inset 0 1px 2px rgba(16,24,40,.04), 0 0 0 3px var(--nbd-mb-primary-soft, #dbeafe);
    --st-field-leading: 1.4;

    /* === Controls — icons ===================================== */
    --st-icon-xs: 12px; --st-icon-sm: 14px; --st-icon-md: 16px; --st-icon-lg: 20px; --st-icon-xl: 24px; --st-icon-2xl: 32px;
}