/**
 * Cotton Blush design tokens — Dandelion Colombo.
 * Single source of truth for colour, type, spacing, radius, shadow and
 * motion. Every other stylesheet in this theme reads these custom
 * properties instead of hard-coding values. Change a brand colour here
 * and it updates everywhere.
 *
 * Palette source: client-approved Cotton Blush brand guide + the Stitch
 * design export (DESIGN.md), reconciled where the two matched.
 */

:root {
	/* ---- Raw brand palette ---- */
	--cb-blush-pink: #F593B7;   /* primary accent */
	--cb-dusty-rose: #F593B7;   /* primary CTA fill */
	--cb-powder-blue: #9DCBF2;  /* secondary accent / hover */
	--cb-misty-blue: #9DCBF2;   /* secondary accent, active filter state */
	--cb-soft-lilac: #DCCFE6;   /* tertiary accent */
	--cb-marshmallow-cream: #F7F2EE; /* inset surface */

	/* ---- Neutrals ---- */
	--cb-ivory: #FBF9F6;        /* page canvas */
	--cb-white: #FFFFFF;        /* card / modal surface */
	--cb-border: #EAE2DC;       /* hairline dividers, 1px only */
	--cb-charcoal: #2D2926;     /* primary text/headings */
	--cb-slate: #5F5953;        /* secondary text */
	--cb-taupe: #8C827A;        /* metadata, placeholders */
	--cb-error: #BA1A1A;

	/* ---- Semantic colour (what components should reference) ---- */
	--cb-color-background: var(--cb-ivory);
	--cb-color-surface: var(--cb-white);
	--cb-color-surface-alt: var(--cb-marshmallow-cream);
	--cb-color-text: var(--cb-charcoal);
	--cb-color-text-muted: var(--cb-slate);
	--cb-color-text-faint: var(--cb-taupe);
	--cb-color-border: var(--cb-border);
	--cb-color-primary: var(--cb-blush-pink);
	--cb-color-secondary: var(--cb-powder-blue);
	--cb-color-lilac: var(--cb-soft-lilac);
	--cb-color-dusty-rose: var(--cb-dusty-rose);
	--cb-color-misty-blue: var(--cb-misty-blue);
	--cb-color-button: var(--cb-dusty-rose);
	--cb-color-button-text: var(--cb-charcoal);
	--cb-color-button-hover: var(--cb-powder-blue);
	--cb-color-error: var(--cb-error);

	/* ---- Typography ---- */
	--cb-font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--cb-font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--cb-text-display-lg: 56px;
	--cb-leading-display-lg: 64px;
	--cb-tracking-display-lg: 0.04em;
	--cb-text-display-lg-mobile: 36px;
	--cb-leading-display-lg-mobile: 44px;

	--cb-text-headline-lg: 38px;
	--cb-leading-headline-lg: 46px;
	--cb-text-headline-lg-mobile: 28px;
	--cb-leading-headline-lg-mobile: 36px;

	--cb-text-headline-md: 24px;
	--cb-leading-headline-md: 32px;
	--cb-text-headline-sm: 20px;
	--cb-leading-headline-sm: 28px;
	--cb-text-title-editorial: 18px;
	--cb-leading-title-editorial: 26px;
	--cb-tracking-title-editorial: 0.08em;

	--cb-text-body-lg: 15px;
	--cb-leading-body-lg: 24px;
	--cb-text-body-md: 13px;
	--cb-leading-body-md: 20px;
	--cb-text-body-sm: 11px;
	--cb-leading-body-sm: 16px;

	--cb-text-label-caps: 10px;
	--cb-leading-label-caps: 14px;
	--cb-tracking-label-caps: 0.14em;
	--cb-text-label-md: 12px;
	--cb-leading-label-md: 16px;
	--cb-tracking-label-md: 0.04em;

	/* ---- Spacing ---- */
	--cb-space-xs: 0.25rem;
	--cb-space-sm: 0.5rem;
	--cb-space-md: 1rem;
	--cb-space-lg: 1.5rem;
	--cb-space-xl: 2.5rem;
	--cb-gutter: 1.5rem;
	--cb-gutter-mobile: 0.75rem;
	--cb-margin: 3rem;
	--cb-margin-mobile: 1.25rem;

	/* ---- Layout ---- */
	--cb-container-max: 1280px;
	--cb-container-narrow: 780px;

	/* ---- Radius ---- */
	--cb-radius-sm: 0.125rem;
	--cb-radius: 0.25rem;
	--cb-radius-md: 0.375rem;
	--cb-radius-lg: 0.5rem;
	--cb-radius-xl: 0.75rem;
	--cb-radius-full: 9999px;

	/* ---- Shadow ---- */
	--cb-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.02);
	--cb-shadow-ambient: 0 12px 32px -4px rgba(45, 41, 38, 0.05), 0 4px 12px -2px rgba(221, 168, 185, 0.12);
	--cb-shadow-md: 0 8px 24px rgba(45, 41, 38, 0.08);

	/* ---- Motion ---- */
	--cb-transition-fast: 200ms ease;
	--cb-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
	--cb-transition-slow: 700ms cubic-bezier(0.16, 1, 0.3, 1);
}