/* ==========================================================================
   Vinding — Design Tokens
   Pulled from the Figma design system (Vinding Winery).
   Fonts: Newsreader (serif display) + Darker Grotesque (sans body).
   ========================================================================== */

:root {
	/* ---- Brand colours ---- */
	--vd-ink: #1e0814;          /* primary dark plum — text & dark sections   */
	--vd-ink-90: #2c1320;
	--vd-ink-70: rgba(30, 8, 20, 0.7);
	--vd-ink-50: rgba(30, 8, 20, 0.5);
	--vd-ink-30: rgba(30, 8, 20, 0.3);

	--vd-accent: #f5ff7d;       /* lime/chartreuse — pills, CTAs, footer      */
	--vd-accent-ink: #1e0814;   /* text on accent                            */

	--vd-coral: #ef5130;        /* coral-red — LET'S TALK / SUBMIT / news box */
	--vd-coral-ink: #ffffff;
	--vd-wine: #4F0A2B;         /* deep wine/maroon — Get in Touch band       */
	--vd-wine-logo: #7d2233;    /* footer "vinding" wordmark colour           */

	--vd-cream: #fcfde8;        /* hero & light cream text                   */
	--vd-paper: #F2EEEA;        /* page background (warm off-white)          */
	--vd-surface: #F5F5F5;      /* card / section surface                    */
	--vd-surface-2: #F7F8EB;    /* secondary surface                         */
	--vd-border: #d8c4a0;       /* warm tan border (cards, inputs)           */
	--vd-border-soft: #e7ddcd;

	--vd-white: #ffffff;
	--vd-muted: #6f5f66;        /* muted body text on light bg               */
	--vd-success: #3f7d4f;
	--vd-danger: #b3401f;

	/* ---- Typography ---- */
	--vd-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
	--vd-font-sans: "Darker Grotesque", "Helvetica Neue", Arial, sans-serif;
	--vd-font-logo: "Playfair Display", "Newsreader", Georgia, serif;

	/* Type scale (px from Figma, exposed in rem) */
	--vd-fs-hero-lg: 5.8rem;    /* 92.8px Title Hero Large — Newsreader LightItalic */
	--vd-fs-hero: 4.5rem;       /* 72px  Title Hero        */
	--vd-fs-page: 3rem;         /* 48px  Title Page        */
	--vd-fs-subtitle: 2rem;     /* 32px  Subtitle serif    */
	--vd-fs-h1: 1.75rem;        /* 28px  Heading sans      */
	--vd-fs-h2: 1.5rem;         /* 24px  Subheading        */
	--vd-fs-h3: 1.375rem;       /* 22px  Body Large strong */
	--vd-fs-body: 1.25rem;      /* 20px  Body Base         */
	--vd-fs-sm: 1.0625rem;      /* 17px  Body small        */
	--vd-fs-cap: 1rem;          /* 16px  caption base      */
	--vd-fs-xs: 0.875rem;       /* 14px  caption small     */

	--vd-lh-tight: 1.2;
	--vd-lh-base: 1.4;
	--vd-lh-serif: 1.25;

	/* ---- Spacing / layout ---- */
	--vd-container: 1440px;
	--vd-gutter: 48px;          /* page side padding (desktop)   */
	--vd-gutter-sm: 24px;
	--vd-section-y: 120px;      /* vertical section rhythm        */
	--vd-gap: 24px;

	/* ---- Radii ---- */
	--vd-radius-pill: 50px;
	--vd-radius-lg: 24px;
	--vd-radius-md: 16px;
	--vd-radius-sm: 8px;

	/* ---- Shadows ---- */
	--vd-shadow-card: 0 10px 30px rgba(30, 8, 20, 0.08);
	--vd-shadow-soft: 0 4px 16px rgba(30, 8, 20, 0.06);

	/* ---- Motion ---- */
	--vd-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--vd-dur: 0.35s;
}

@media (max-width: 1024px) {
	:root {
		--vd-gutter: 24px;
		--vd-section-y: 72px;
		--vd-fs-hero-lg: 3.25rem;
		--vd-fs-hero: 2.75rem;
		--vd-fs-page: 2.25rem;
		--vd-fs-subtitle: 1.625rem;
	}
}

@media (max-width: 600px) {
	:root {
		--vd-gutter: 18px;
		--vd-section-y: 56px;
		--vd-fs-hero-lg: 2.5rem;
		--vd-fs-hero: 2.25rem;
		--vd-fs-page: 1.875rem;
	}
}