/* TIPSY DROPS palette — EXACT hexes from the brand site (tdp-brand.tiltedchair.co) +
   TDP Web Design.fig color variables (see TDP_DESIGN.md). Candy-bright cocktail brand.
   Semantic TDP slugs below; SPF/NEUE slug names kept as ALIASES (mapped to TDP roles) so
   any hardcoded var() refs in fragments/buttons still resolve. */
/******/
/*** VARIABLES ***/
/******/

:root, :host {
	/* --- TDP brand palette --- */
	--color-rich-black: #231E1C;        /* primary ink, dark sections, line art */
	--color-warm-white: #F7F3E4;        /* page bg, text on dark, form fields */
	--color-sunset-pink: #FF8894;       /* Strawberry flavor, accent */
	--color-lavender: #BEA8DD;          /* CTA buttons, Lavender flavor, contact-form bg */
	--color-raspberry: #A31347;         /* Birthday use-case bg, accent */
	--color-strawberry-red: #CE1D1D;    /* Founders section bg, marquee */
	--color-lemon-yellow: #FFE164;      /* gingham bg, social section, can */
	--color-peachy-peach: #F2B5A2;      /* Peach flavor bg */
	--color-buzzy-blue: #A9D4EA;        /* Blue Raz flavor bg */
	--color-garnish-green: #606029;     /* Stadiums use-case bg */
	--color-sandy-tan: #A08055;         /* accent */
	--color-near-black: #191316;        /* near-black variant */
	/* --- legacy SPF/NEUE slug aliases → TDP roles (keep fragments working) --- */
	--color-good-work-green: #231E1C;   /* dark bg → rich black */
	--color-barnwood-brown: #231E1C;    /* ink on light → rich black */
	--color-compassion-cream: #F7F3E4;  /* light → warm white */
	--color-breezy-blue: #A9D4EA;       /* → buzzy blue */
	--color-pickled-patch: #606029;     /* → garnish green */
	--color-lemon-lime: #FFE164;        /* eyebrow on dark → lemon yellow */
	--color-reddish-radish: #CE1D1D;    /* → strawberry red */
	--color-simple-sky-blue: #A9D4EA;   /* links on dark → buzzy blue */
	--color-golden-grain: #FFE164;      /* → lemon yellow */
	--color-petal-pink: #FF8894;        /* eyebrow on dark → sunset pink */
	--color-offwhite: #FFFDF7;          /* off-white */
	--color-navy-deep: #191316;
	--color-deep-brown: #231E1C;
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
	--gap-0: 0;
	--gap-4: .25rem;
	--gap-8: .5rem;
	--gap-12: .75rem;
	--gap-16: 1rem;
	--gap-24: 1.5rem;
	--gap-32: 2rem;
	--gap-48: 3rem;
	--gap-56: 3.5rem;
	--gap-64: 4rem;
	--gap-72: 4.5rem;
	--gap-80: 5rem;
    --tracking-tighter: -.05em;
    --tracking-tight: -.025em;
    --tracking-normal: 0em;
    --tracking-wide: .025em;
    --tracking-wider: .05em;
    --tracking-widest: .1em;
    --leading-tight: 1;
	--leading-snug: 1.25;
    --leading-base: 1.375;
    --leading-normal: 1.5625;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
	--radius-8: .5rem;
	--radius-10: .625rem;
    --radius-12: .75rem;
	--radius-16: 1rem;
	--radius-20: 1.25rem;
    --radius-24: 1.5rem;
    --shadow-2xs: 0 0.0625rem #0000000d;
    --shadow-xs: 0 0.0625rem 0.125rem 0 #0000000d;
    --shadow-sm: 0 0.0625rem 0.1875rem 0 #0000001a, 0 0.0625rem 0.125rem -0.0625rem #0000001a;
    --shadow-md: 0 0.25rem 0.375rem -0.0625rem #0000001a, 0 0.125rem 0.25rem -0.125rem #0000001a;
    --shadow-lg: 0 0.625rem 0.9375rem -0.1875rem #0000001a, 0 0.25rem 0.375rem -0.25rem #0000001a;
    --shadow-xl: 0 1.25rem 1.5625rem -0.3125rem #0000001a, 0 0.5rem 0.625rem -0.375rem #0000001a;
    --shadow-2xl: 0 1.5625rem 3.125rem -0.75rem #00000040;
	--spacing: .25rem;
    --text-max-h4: 2rem;       /* TDP type scale (FatFrank display, larger than tokens): H4 32 */
    --text-max-h3: 3rem;       /* H3 48 */
    --text-max-h2: 4rem;       /* H2 64 (section headings) */
    --text-max-h1: 6rem;       /* H1 96 (hero) */
    --text-p-xs: .75rem;
    --text-p-sm: .875rem;
    --text-p: 1rem;            /* Figtree body 16 */
    --text-h6: 1.125rem;
    --text-h5: 1.5rem;
    --text-h4: 2rem;
    --text-h3: 3rem;
    --text-h2: 4rem;
    --text-h1: 6rem;
    --text-min-h4: 1.5rem;     /* mobile: H4 24 */
    --text-min-h3: 2rem;       /* H3 32 */
    --text-min-h2: 2.5rem;     /* H2 40 */
    --text-min-h1: 3rem;       /* H1 48 */
    --inset-shadow-2xs: inset 0 0.0625rem #0000000d;
    --inset-shadow-xs: inset 0 0.0625rem 0.0625rem #0000000d;
    --inset-shadow-sm: inset 0 0.125rem 0.25rem #0000000d;
    --drop-shadow-xs: 0 0.0625rem 0.0625rem #0000000d;
    --drop-shadow-sm: 0 0.0625rem 0.125rem #00000026;
    --drop-shadow-md: 0 0.1875rem 0.1875rem #0000001f;
    --drop-shadow-lg: 0 0.25rem 0.25rem #00000026;
    --drop-shadow-xl: 0 0.5625rem 0.4375rem #0000001a;
    --drop-shadow-2xl: 0 1.5625rem 1.5625rem #00000026;
    --text-shadow-2xs: 0rem 0.0625rem 0rem #00000026;
    --text-shadow-xs: 0rem 0.0625rem 0.0625rem #0003;
    --text-shadow-sm: 0rem 0.0625rem 0rem #00000013, 0rem 0.0625rem 0.0625rem #00000013, 0rem 0.125rem 0.125rem #00000013;
    --text-shadow-md: 0rem 0.0625rem 0.0625rem #0000001a, 0rem 0.0625rem 0.125rem #0000001a, 0rem 0.125rem 0.25rem #0000001a;
    --text-shadow-lg: 0rem 0.0625rem 0.125rem #0000001a, 0rem 0.1875rem 0.125rem #0000001a, 0rem 0.25rem 0.5rem #0000001a;
    --ease-in: cubic-bezier(.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --animate-spin: spin 1s linear infinite;
    --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
    --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
    --animate-bounce: bounce 1s infinite;
    --blur-xs: 0.25rem;
    --blur-sm: 0.5rem;
    --blur-md: 0.75rem;
    --blur-lg: 1rem;
    --blur-xl: 1.5rem;
    --blur-2xl: 2.5rem;
    --blur-3xl: 4rem;
    --perspective-dramatic: 6.25rem;
    --perspective-near: 18.75rem;
    --perspective-normal: 31.25rem;
    --perspective-midrange: 50rem;
    --perspective-distant: 75rem;
    --aspect-video: 16/9;
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}