/**
 * Design Tokens — Mr.Woo
 * Source: Figma → Drop of Smell / Mr.Woo titulinis
 * All variables follow `--<category>-<name>` naming.
 */

:root {
	/* === Colors — brand === */
	--color-black: #000000;
	--color-white: #ffffff;
	--color-pink-shocking: #ffb8cd;        /* primary action */
	--color-pink-middle: #ff8fab;          /* hover/accent */
	--color-pink-soft: #f9dfe6;            /* gradient stop */
	--color-yellow-golden: #ebd670;
	--color-yellow-ronchi: #e8b558;
	--color-yellow-soft: #faeeb4;          /* gradient stop */

	/* === Colors — accent (badges) === */
	--color-mint: #b4e0d2;                 /* "Naujiena" */
	--color-coral: #ffcba4;                /* "Populiaru" */

	/* === Colors — extended brand palette (Figma) === */
	--color-pink-strawberry: #fd6187;      /* Wild Strawberry */
	--color-pink-light: #ffebf1;           /* Pink Light (Figma exact) */
	--color-turquoise: #88c0c7;            /* Celestine Turquoise */
	--color-turquoise-spearfish: #5fb5c2;  /* Spearfish Turquoise — used for delivery badge */
	--color-turquoise-pale: #f0f8f9;       /* Turquoise Light — info bg */
	--color-yellow-tone: #faf5db;          /* Yellow Tone — soft bg */
	--color-umber-pale: #fbf8f3;           /* Umber Pale — beige page bg */
	--color-footer-brown: #29000a;         /* Mr.Woo footer brown — dark wine */

	/* === Colors — neutrals === */
	--color-grey-light: #b9b6b6;           /* placeholder, muted text */
	--color-grey-border: #ebebeb;          /* borders, dividers */
	--color-grey-bg: #f7f7f7;

	/* === Colors — semantic === */
	--color-text: var(--color-black);
	--color-text-muted: var(--color-grey-light);
	--color-bg: var(--color-white);
	--color-border: var(--color-grey-border);
	--color-primary: var(--color-pink-shocking);
	--color-primary-hover: var(--color-pink-middle);

	/* === Gradients === */
	--gradient-pink-yellow: linear-gradient(
		118.3deg,
		var(--color-pink-soft) 0%,
		var(--color-pink-shocking) 30.3%,
		var(--color-yellow-soft) 100%
	);

	/* === Typography — families === */
	--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--font-heading: "Manrope", var(--font-sans);
	--font-display: "Proxima Nova", var(--font-sans);

	/* === Typography — sizes (rem-based, 1rem = 16px) === */
	--text-xs: 0.75rem;       /* 12px */
	--text-sm: 0.875rem;      /* 14px — Body 2 / Label 2 */
	--text-base: 1rem;        /* 16px — Body 1 / Label 1 */
	--text-lg: 1.125rem;      /* 18px */
	--text-xl: 1.25rem;       /* 20px */
	--text-2xl: 1.5rem;       /* 24px */
	--text-h4: 1.375rem;      /* 22px — Figma Heading 4 */
	--text-3xl: 1.75rem;      /* 28px */
	--text-4xl: 2rem;         /* 32px — Figma Heading 3 */
	--text-5xl: 2.5rem;       /* 40px */
	--text-6xl: 3rem;         /* 48px */
	--text-display: 4rem;     /* 64px — hero */

	/* === Typography — weights === */
	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;

	/* === Typography — line heights === */
	--leading-tight: 1.1;
	--leading-snug: 1.25;
	--leading-normal: 1.4;     /* Body 2 */
	--leading-relaxed: 1.625;  /* Body 1: 26/16 */

	/* === Typography — letter spacing === */
	--tracking-tight: -0.02em;
	--tracking-normal: 0;
	--tracking-wide: 0.0125em;
	--tracking-wider: 0.0875em;  /* CanCan_Button: 1.25/14 */

	/* === Spacing scale === */
	--space-1: 0.25rem;   /* 4px */
	--space-2: 0.5rem;    /* 8px */
	--space-2-2: 0.625rem; /* 10px */
	--space-3: 0.75rem;   /* 12px */
	--space-4: 1rem;      /* 16px */
	--space-5: 1.25rem;   /* 20px */
	--space-6: 1.5rem;    /* 24px */
	--space-8: 2rem;      /* 32px */
	--space-10: 2.5rem;   /* 40px */
	--space-12: 3rem;     /* 48px */
	--space-16: 4rem;     /* 64px */
	--space-20: 5rem;     /* 80px */
	--space-24: 6rem;     /* 96px */

	/* === Radii (Figma: xs=6, sm=8, md=12, xl=24) === */
	--radius-xs: 0.375rem;      /* 6px — Figma Radius/xs */
	--radius-sm: 0.5rem;        /* 8px — Figma Radius/sm */
	--radius-md: 0.75rem;       /* 12px — Figma Radius/md */
	--radius-lg: 1rem;          /* 16px */
	--radius-xl: 1.5rem;        /* 24px — Figma Radius/xl, input fields */
	--radius-pill: 50px;        /* buttons */
	--radius-full: 9999px;      /* circular */

	/* === Layout === */
	--container-max: 1344px;    /* 1440 - 48*2 (Figma) */
	--container-pad: var(--space-6);

	/* === Shadows === */
	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);

	/* === Transitions === */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;
	--transition-slow: 400ms ease;

	/* === Z-index scale === */
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-header: 300;
	--z-overlay: 400;
	--z-modal: 500;
	--z-toast: 600;
}