/* ==========================================================================
   Cartvai - Ecommerce Checkout and Funnel — Design Tokens
   --------------------------------------------------------------------------
   Minimal, shade-based color system. Six BASE colors are defined:
   primary, primary-light, primary-deep, border, heading, text.
   Every tint, hover and border color is DERIVED from those bases via
   color-mix(), so switching a theme only means swapping the base shades.
   No semantic success/danger colors to manage.

   To add a theme, override --cartvai-primary (and optionally
   --cartvai-primary-light / --cartvai-primary-deep) in a
   `.cartvai-theme-*` block — the derived tints follow automatically.
   ========================================================================== */

:root {
    /* ---- Base brand accent (overridden per theme / design settings) ---- */
    --cartvai-primary: #2563eb;
    --cartvai-primary-light: #dbeafe;
    --cartvai-primary-deep: #1e40af;
    --cartvai-on-primary: #ffffff;

    /* ---- Base neutrals ---- */
    --cartvai-border: #e5e7eb;
    --cartvai-heading: #111827;
    --cartvai-text: #111827;

    /* ---- Fixed neutrals ---- */
    --cartvai-surface: #ffffff;   /* cards, inputs, buttons */
    --cartvai-bg: #f9fafb;        /* sunken / page background */
    --cartvai-text-muted: #6b7280;/* secondary text */

    /* ---- Typography ---- */
    --cartvai-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --cartvai-text-xs: 12px;
    --cartvai-text-sm: 13px;
    --cartvai-text-base: 16px;
    --cartvai-text-md: 18px;
    --cartvai-text-lg: 20px;
    --cartvai-text-xl: 22px;
    --cartvai-text-2xl: 24px;
    --cartvai-weight-normal: 400;
    --cartvai-weight-medium: 500;
    --cartvai-weight-semibold: 600;
    --cartvai-weight-bold: 700;

    /* ---- Radius scale ---- */
    --cartvai-radius-xs: 4px;
    --cartvai-radius-sm: 6px;
    --cartvai-radius: 8px;
    --cartvai-radius-md: 10px;
    --cartvai-radius-lg: 12px;
    --cartvai-radius-pill: 999px;

    /* ---- Spacing scale ---- */
    --cartvai-space-1: 4px;
    --cartvai-space-2: 8px;
    --cartvai-space-3: 12px;
    --cartvai-space-4: 16px;
    --cartvai-space-5: 20px;
    --cartvai-space-6: 24px;

    /* ---- Shadows ---- */
    --cartvai-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --cartvai-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    /* ---- Motion ---- */
    --cartvai-transition: 0.15s ease;
    --cartvai-transition-slow: 0.2s ease;

    /* ---- Derived tints (auto-generated from the bases above) ---- */
    --cartvai-primary-soft: color-mix(in srgb, var(--cartvai-primary) 10%, transparent);
    --cartvai-primary-ring: color-mix(in srgb, var(--cartvai-primary) 25%, transparent);
    --cartvai-primary-dark:  color-mix(in srgb, var(--cartvai-primary), black 20%);

    --cartvai-border-strong: color-mix(in srgb, var(--cartvai-border) 65%, var(--cartvai-text));
    --cartvai-text-subtle: color-mix(in srgb, var(--cartvai-text-muted) 70%, var(--cartvai-surface));
    --cartvai-surface-hover: color-mix(in srgb, var(--cartvai-text) 5%, var(--cartvai-surface));
}

/* Shared quantity stepper icon (rendered as inline SVG, inherits button color) */
.cartvai-qty-icon {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

/* ==========================================================================
   Theme presets — only the base colors are set; every tint cascades.
   The checkout wrapper gets `cartvai-theme-<key>` from settings; an inline
   `--cartvai-primary` (set per-funnel) still wins as a final override.
   ========================================================================== */

.cartvai-theme-modern {
    --cartvai-primary: #2563eb;
}

.cartvai-theme-classic {
    --cartvai-primary: #4f46e5;
}

.cartvai-theme-mint {
    --cartvai-primary: #059669;
}

.cartvai-theme-sunset {
    --cartvai-primary: #ea580c;
}

.cartvai-theme-rose {
    --cartvai-primary: #e11d48;
}

.cartvai-theme-violet {
    --cartvai-primary: #7c3aed;
}

.cartvai-theme-slate {
    --cartvai-primary: #334155;
}