/* Design tokens for the Anubhav & Deepshikha invite. Shared by site/ and video/. */
@import url("fonts.css");

:root {
	/* Palette from the brief */
	--ivory: #FAF6EC;
	--powder: #BCD4E6;
	--gold: #C9A227;       /* lines, borders, accents only: 2.2:1 on ivory, never text */
	--midnight: #1B2A4A;   /* Scene 4 ONLY */

	/* Derived, contrast-checked (WCAG AA) */
	--ink: #3D3529;        /* 11.2:1 on ivory, 7.9:1 on powder */
	--gold-ink: #8A6A0E;   /* 4.7:1 on ivory: names and gold text on light grounds */
	--powder-ink: #2E4A63; /* 6.0:1 on powder: Scene 3 headings */
	--gold-light: #E2C463; /* 8.3:1 on midnight: Scene 4 headings */
	--ivory-deep: #F3ECDC;
	--powder-soft: #E6EFF6;

	/* Type */
	--font-script: "Imperial Script", cursive;
	--font-serif: "Cormorant Garamond", Georgia, serif;
	--font-title: "Cinzel", Georgia, serif;
	--font-deva: "Tiro Devanagari Hindi", serif;

	/* 1u = 1% of a 390px-wide phone scene. On wider frames (1080x1920 video, desktop)
	   height wins, so a scene keeps the same proportions everywhere.
	   Resolved inside .scene, which is a size container. */
	--u: min(1cqi, 0.462cqh);

	/* Motion: gentle and slow */
	--ease-gentle: cubic-bezier(.25, .1, .25, 1); /* colour fades */
	--ease-out: cubic-bezier(.23, 1, .32, 1);     /* transform transitions (presses, icon swaps) */

	/* Gold foil (background-clip: text). The cover's Ganesha gradient copies these stops. */
	--foil: linear-gradient(100deg, #6B4F06 0%, var(--gold-ink) 30%, #A88415 42%, #F2DA8C 50%, #B8901F 58%, var(--gold-ink) 70%, #6B4F06 100%);
	--foil-light: linear-gradient(100deg, #C9A227 0%, #E9CF78 40%, #FFF3C4 50%, #E2C463 60%, #B8901F 100%); /* Cocktail and Wedding titles, on dark grounds */
}

/* Unit-derived tokens are declared again on every scene child, so a layout can rescale a whole
   scene by overriding --u there: a custom property substitutes var() where it is declared, so
   declared only on :root these would keep :root's --u. --u itself is declared on :root only. */
:root, .scene > * {
	--fs-deva: calc(5 * var(--u));
	--fs-name: calc(19 * var(--u));
	--fs-title: calc(9.5 * var(--u));
	--fs-lead: calc(6.4 * var(--u));
	--fs-body: calc(5.3 * var(--u));
	--fs-small: calc(4.5 * var(--u));
	--sp-1: calc(2 * var(--u));
	--sp-2: calc(4 * var(--u));
	--sp-3: calc(6 * var(--u));
	--sp-4: calc(10 * var(--u));
	--sp-5: calc(16 * var(--u));
	--line: max(1px, calc(0.3 * var(--u)));
}