/* ============================================================
   Zavello Design Tokens
   Single source of truth for the brand identity.
   Extracted from Shopify Shrine PRO theme + zavello.de live audit.
   ============================================================ */

:root {

	/* ─────────── Colors — Brand ─────────── */
	--zv-color-primary:        #000000;   /* Black — main buttons, dominant accent */
	--zv-color-secondary:      #dd1d1d;   /* Red — CTAs, urgent badges, divider */
	--zv-color-text:           #121212;   /* Primary body text */
	--zv-color-text-muted:     #5a7a70;   /* Secondary text (counts, dates) */
	--zv-color-bg:             #ffffff;   /* Main background */
	--zv-color-bg-alt:         #f3f3f3;   /* Cards, blocks alternated */
	--zv-color-bg-dark:        #121212;   /* Footer */
	--zv-color-outline-label:  #282828;   /* Outline button label */
	--zv-color-white:          #ffffff;
	--zv-color-scrollbar:      #555555;

	/* ─────────── Colors — Trustpilot custom (reviews section) ─────────── */
	--zv-tp-green:             #00b67a;   /* Trustpilot star green */
	--zv-tp-green-light:       #c2e6d8;   /* Gradient + pill border */
	--zv-tp-green-divider:     #eef5f2;
	--zv-tp-green-empty:       #d6e4df;   /* Empty stars */
	--zv-tp-text-main:         #0d1f1a;   /* Heading + author name */
	--zv-tp-text-quote:        #1a3530;   /* Review body */
	--zv-tp-text-date:         #9ab5ac;

	/* ─────────── Colors — Custom widgets ─────────── */
	--zv-cd-bg:                #111111;   /* Countdown wrap */
	--zv-cd-banner:            #222222;   /* Countdown top banner */
	--zv-cd-border:            #333333;   /* Countdown banner border */
	--zv-cd-label:             #888888;   /* Countdown labels */
	--zv-cd-sep:               #555555;   /* Countdown colon separator */

	--zv-ship-bg:              #EAEEEF;   /* Versand badge background */
	--zv-ship-border:          #E8E8E8;
	--zv-ship-dot:             #00B77B;   /* Live blink dot */

	--zv-form-success-text:    #28c100;
	--zv-form-success-bg:      #f2ffed;
	--zv-form-error-text:      #ff0000;
	--zv-form-error-bg:        #fff5f5;

	/* ─────────── Typography ─────────── */
	--zv-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--zv-font-body:    'Inter',      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--zv-font-system:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--zv-font-tp:      'DM Sans',    -apple-system, sans-serif;   /* Trustpilot section */

	--zv-fw-regular:   400;
	--zv-fw-medium:    500;
	--zv-fw-semibold:  600;
	--zv-fw-bold:      700;
	--zv-fw-black:     800;

	--zv-letter-spacing-heading: 0.6px;
	--zv-line-height-heading:    1.2;
	--zv-line-height-body:       1.6;

	/* Heading scale (px desktop / mobile auto via clamp) */
	--zv-fs-h1: clamp(28px, 4vw, 48px);
	--zv-fs-h2: clamp(24px, 3.5vw, 39px);
	--zv-fs-h3: clamp(20px, 2.8vw, 28px);
	--zv-fs-h4: 20px;
	--zv-fs-body: 16px;
	--zv-fs-small: 13px;

	/* ─────────── Borders / Radius ─────────── */
	--zv-radius-sm:    6px;     /* Buttons, inputs */
	--zv-radius-md:    8px;     /* Pickers, quantity */
	--zv-radius-lg:    12px;    /* Cards, media */
	--zv-radius-xl:    16px;    /* Trustpilot review cards */
	--zv-radius-2xl:   20px;    /* Customer-reviews cards */
	--zv-radius-pill:  40px;    /* Variant pills */
	--zv-radius-round: 100px;   /* Swatches, filter pills */

	--zv-border-thin:    1px;
	--zv-border-medium:  2px;

	/* ─────────── Shadows ─────────── */
	--zv-shadow-card:        2px 6px 15px rgba(0, 0, 0, 0.10);
	--zv-shadow-collection:  0 6px 15px rgba(0, 0, 0, 0.05);
	--zv-shadow-tp-card:     0 2px 16px rgba(0, 0, 0, 0.07);
	--zv-shadow-tp-hover:    0 8px 28px rgba(0, 0, 0, 0.12);
	--zv-shadow-popup:       10px 12px 20px rgba(0, 0, 0, 0.10);

	/* ─────────── Spacing ─────────── */
	--zv-gap-grid:      40px;
	--zv-gap-tight:     12px;
	--zv-gap-mobile:    12px;

	--zv-pad-section:   36px;       /* default top/bottom for sections */
	--zv-pad-block:     16px;
	--zv-pad-button:    14px 28px;

	/* ─────────── Layout ─────────── */
	--zv-container-max: 1280px;

	/* ─────────── Animation / Transition ─────────── */
	--zv-ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--zv-duration:    250ms;
}

/* ────────────────────────────────────────────────────────────
   Optional: dark-friendly defaults for system fallbacks.
   Currently the brand is light-only; uncomment to enable dark.
   ──────────────────────────────────────────────────────────── */
/*
@media (prefers-color-scheme: dark) {
	:root { ... overrides ... }
}
*/

/* ────────────────────────────────────────────────────────────
   PLUGIN MODE: este arquivo só DEFINE variáveis, não aplica
   estilos globais. O tema (Phlox/qualquer outro) controla
   tipografia, body e headings. Os widgets Zavello consomem
   os tokens através de classes próprias (.zv-*).
   ──────────────────────────────────────────────────────────── */