/* ==========================================================================
   Really Simple Funnel — Design Tokens
   --------------------------------------------------------------------------
   Minimal, uniform color system. Only a handful of BASE colors are defined
   (brand accent, success, danger, and neutral steps). Every tint, hover and
   border color is DERIVED from those bases via color-mix(), so switching a
   theme only means swapping --rsf-primary (and optionally --rsf-success /
   --rsf-danger). No extra colors to manage.

   To add a theme, override --rsf-primary (and/or --rsf-success / --rsf-danger)
   in a `.rsf-theme-*` block — the derived tints follow automatically.
   ========================================================================== */

:root {
    /* ---- Base brand accent (overridden per theme / design settings) ---- */
    --rsf-primary: #2563eb;
    --rsf-on-primary: #ffffff;

    /* ---- Base semantic colors ---- */
    --rsf-success: #10b981;
    --rsf-danger: #ef4444;

    /* ---- Base neutrals ---- */
    --rsf-surface: #ffffff;   /* cards, inputs, buttons */
    --rsf-bg: #f9fafb;        /* sunken / page background */
    --rsf-border: #e5e7eb;    /* hairlines, input borders */
    --rsf-text: #111827;      /* primary text + dark UI */
    --rsf-text-muted: #6b7280;/* secondary text */

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

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

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

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

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

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

    --rsf-success-soft: color-mix(in srgb, var(--rsf-success) 12%, transparent);
    --rsf-success-text: color-mix(in srgb, var(--rsf-success) 65%, #000);
    --rsf-success-border: color-mix(in srgb, var(--rsf-success) 30%, transparent);

    --rsf-danger-soft: color-mix(in srgb, var(--rsf-danger) 12%, transparent);
    --rsf-danger-text: color-mix(in srgb, var(--rsf-danger) 75%, #000);
    --rsf-danger-strong: color-mix(in srgb, var(--rsf-danger) 80%, #000);
    --rsf-danger-ring: color-mix(in srgb, var(--rsf-danger) 25%, transparent);

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

/* Shared quantity stepper icon (rendered as inline SVG, inherits button color) */
.rsf-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 `rsf-theme-<key>` from settings; an inline
   `--rsf-primary` (set per-funnel) still wins as a final override.
   ========================================================================== */

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

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

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

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

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

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

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