/*
 * Design tokens, from docs/handoff.md section 4.
 * This is the only file allowed to contain raw colour values.
 */

:root {
	/* Colours */
	--ink: #111416;
	--ink-2: #202426;
	--body: #434a4d;
	--muted: #626b6f;
	--muted-2: #676f72; /* Figma #778184, darkened to 4.5:1 on white, --cream and --cream-2 (WCAG AA) */
	--subtle: #8b949a;
	--placeholder: #b5b0a8;
	--plum: #5a1748;
	--plum-tint: rgb(90 23 72 / 0.1);
	--plum-tint-weak: rgb(90 23 72 / 0.07);
	--red: #c43a2f;
	--red-strong: #ad3328; /* red text on red tints (4.5:1) */
	--green: #2f7a4f;
	--green-tint: rgb(47 122 79 / 0.1);
	--amber: #8a5a0b;
	--marker: #f2c94c;
	--pink-on-dark: #f2b8c6;
	--bg: #fff;
	--cream: #f9f7f3;
	--cream-2: #f3f1ed;
	--line: #ece9e3;
	--line-2: #edeae4;

	/* Not in handoff section 4, taken from the Figma components. */
	--plum-tint-faint: rgb(90 23 72 / 0.06); /* account pill, open state */
	--selection: #2596be; /* text selection background */
	--border: #e4e1db; /* account pill, account cards */
	--border-soft: #e8e5df; /* dropdowns */
	--border-strong: #dcd8d1; /* outline buttons (mobile menu, 2296:2945) */
	--line-cool: #dee3e3; /* footer dividers, social buttons */
	--hover: #f7f5f1; /* menu item hover */

	/* Not in handoff section 4, taken from the Figma Home frame (2107:1569). */
	--muted-on-dark: #a3a3a3; /* body text on --ink */
	--hero-veil: rgb(84 14 62 / 0.25); /* over the hero photo */
	--hero-strip: rgb(40 15 23 / 0.2); /* hero feature strip */
	--tile-warm: #fff7f2; /* "Why NYCC" icon tiles */
	--white-52: rgb(255 255 255 / 0.52); /* inactive hero menu items */
	--white-60: rgb(255 255 255 / 0.6); /* 404 outline button border, Figma 2214:1829 */
	--white-85: rgb(255 255 255 / 0.85); /* 404 text, Figma 2214:1815 */
	--blue-404: #0d5ace; /* 404 sky, shown until the photo loads */
	--white-25: rgb(255 255 255 / 0.25); /* hero menu dashes, overlay header borders */

	/* Not in handoff section 4, taken from Figma Home — Mobile 390 (2308:2772). */
	--white-6: rgb(255 255 255 / 0.06); /* grid lines on --ink */
	--white-15: rgb(255 255 255 / 0.15); /* hero feature strip top border */
	--white-30: rgb(255 255 255 / 0.3); /* format badge border on photos */
	--black-12: rgb(0 0 0 / 0.12); /* hero feature strip */
	--red-tint: rgb(196 58 47 / 0.08); /* "Why NYCC" icon circles */
	--ring-inner: rgb(196 58 47 / 0.6); /* licensing step rings, inside out */
	--ring-middle: rgb(196 58 47 / 0.35);
	--ring-outer: rgb(196 58 47 / 0.18);

	/* Not in handoff section 4, taken from Figma Browse All Assets (2156:788). */
	--white-18: rgb(255 255 255 / 0.18); /* asset card format badge */
	--white-65: rgb(255 255 255 / 0.65); /* Contact card labels, Figma 2186:682 */
	--white-10: rgb(255 255 255 / 0.1); /* Licensing licence block icons, Figma 2185:773 */
	--white-75: rgb(255 255 255 / 0.75); /* asset card creator and price */
	--white-92: rgb(255 255 255 / 0.92); /* asset card "Vector" badge */
	--plum-tint-chip: rgb(90 23 72 / 0.08); /* applied filter chips */
	--checkbox-border: #cfcac2; /* filter checkboxes, off */
	--border-select: #e1ddd6; /* Sort by select */

	/* Not in handoff section 4, taken from Figma Single Asset (2159:950, 2216:2043). */
	--selected-bg: #fbf8f6; /* chosen file size */
	--red-tint-weak: rgb(196 58 47 / 0.06); /* saved button */
	--red-tint-avatar: rgb(196 58 47 / 0.12); /* creator initials */
	--red-border: rgb(196 58 47 / 0.35); /* saved button */
	--ink-55: rgb(17 20 22 / 0.55); /* consent dialog backdrop */
	--ink-62: rgb(17 20 22 / 0.62); /* preview note on the image: 4.5:1 for white text on any image */
	--format-tint: rgb(63 110 154 / 0.1); /* vector format label */
	--format-text: #2f5a82;
	--green-tint-strong: rgb(47 122 79 / 0.12); /* included format check */
	--green-tint-weak: rgb(47 122 79 / 0.08); /* checkout "Logged in as" note */
	--green-dark: #24583a; /* text on --green-tint-weak */
	--green-deep: #1f4a31; /* order complete heading */
	--green-tint-faint: rgb(47 122 79 / 0.07); /* order complete card */
	--green-border: rgb(47 122 79 / 0.25); /* order complete card */

	/* Not in handoff section 4, taken from Figma Login 2149:734 (auth visual panel). */
	--auth-panel: #351525;
	--auth-tint: rgb(84 14 62 / 0.22);
	--white-12: rgb(255 255 255 / 0.12);
	--white-14: rgb(255 255 255 / 0.14);
	--white-20: rgb(255 255 255 / 0.2);
	--white-28: rgb(255 255 255 / 0.28);
	--white-65: rgb(255 255 255 / 0.65);
	--white-72: rgb(255 255 255 / 0.72);
	--white-80: rgb(255 255 255 / 0.8);

	/* Not in handoff section 4, taken from Figma My Account Overview 2193:1544. */
	--white-50: rgb(255 255 255 / 0.5); /* outline button on the welcome banner */
	--white-55: rgb(255 255 255 / 0.55); /* account banner breadcrumb */
	--white-70: rgb(255 255 255 / 0.7); /* account banner text */
	--amber-tint: rgb(138 90 11 / 0.1); /* order status in progress, our choice (only Completed is designed) */
	--amber-border: rgb(138 90 11 / 0.25); /* order detail status banner in progress, our choice */
	--green-dark-85: rgb(36 88 58 / 0.85); /* order detail status text, Figma 2203:1481 */
	--shadow-tab: 0 1px 3px rgb(0 0 0 / 0.06); /* active Orders tab, Figma 2203:1130 */

	/* Gradients */
	--gradient-cta: linear-gradient(90deg, var(--plum), var(--red));
	--gradient-hero-tint: linear-gradient(#6d384f, #b56f6b);
	--gradient-hero-overlay: linear-gradient(rgb(17 20 22 / 0.8), rgb(17 20 22 / 0));
	--gradient-hero-tint-x: linear-gradient(90deg, #6d384f, #b56f6b); /* Home hero, Figma 2102:10 */
	--gradient-cta-banner: linear-gradient(52.2deg, var(--plum) 23.96%, var(--red) 137.5%); /* Home CTA, Figma 2107:501 */
	--gradient-image-caption: linear-gradient(to top, rgb(17 20 22 / 0.8), rgb(17 20 22 / 0) 78.69%);
	--gradient-hero-mobile: linear-gradient(rgb(90 23 72 / 0.72), rgb(90 23 72 / 0.86)); /* Home mobile hero, over the full photo */
	--gradient-image-caption-mobile: linear-gradient(rgb(17 20 22 / 0) 25%, rgb(17 20 22 / 0.85));
	--gradient-auth: linear-gradient(rgb(40 15 23 / 0), rgb(40 15 23 / 0) 35%, rgb(40 15 23 / 0.94)); /* auth panel, Figma 2149:738 */
	--gradient-404: linear-gradient(90deg, rgb(10 42 140 / 0.45), rgb(10 42 140 / 0.15) 45%, rgb(10 42 140 / 0) 70%); /* 404, Figma 2214:1773 */
	--gradient-404-mobile: linear-gradient(rgb(10 42 140 / 0.2), rgb(10 42 140 / 0.8) 55%, rgb(10 42 140 / 0.85)); /* 404 below 768, our choice: white text stays readable over the snow */
	--gradient-about-hero: linear-gradient(rgb(42 15 30 / 0) 55%, rgb(42 15 30 / 0.75)), linear-gradient(90deg, rgb(42 15 30 / 0.92), rgb(42 15 30 / 0.6) 45%, rgb(42 15 30 / 0.05) 80%); /* About hero, Figma 2184:663 */
	--gradient-about-hero-mobile: linear-gradient(rgb(42 15 30 / 0.7), rgb(42 15 30 / 0.85)); /* below 1024, our choice */
	--gradient-photo-cta: linear-gradient(90deg, rgb(58 14 44 / 0.85), rgb(58 14 44 / 0.5) 35%, rgb(58 14 44 / 0) 62%); /* photo CTA, Figma 2185:895, 2184:779 */
	--gradient-photo-cta-mobile: linear-gradient(rgb(58 14 44 / 0.85), rgb(58 14 44 / 0.6) 60%, rgb(58 14 44 / 0.3)); /* below 1024, our choice */
	--gradient-contact-card: linear-gradient(rgb(42 15 30 / 0.1), rgb(42 15 30 / 0.3) 35%, rgb(42 15 30 / 0.95)); /* Contact card, Figma 2186:669 */
	--gradient-account-welcome: linear-gradient(90deg, #4a1239, #7a2338 60%, #a8322f); /* My Account welcome banner, Figma 2193:1650 */
	--gradient-collection-tile: linear-gradient(rgb(26 10 18 / 0) 35%, rgb(26 10 18 / 0.88)); /* Browse collection tiles, Figma 2212:1700 */
	--gradient-asset-hover: linear-gradient(rgb(26 11 18 / 0.25), rgb(26 11 18 / 0) 35%, rgb(26 11 18 / 0.05) 60%, rgb(26 11 18 / 0.85)); /* asset card, Figma 2156:1261 */

	/* Font families. Noto Sans Canadian Aboriginal renders Inuktitut syllabics. */
	--font-heading: "Manrope", "Noto Sans Canadian Aboriginal", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--font-body: "DM Sans", "Noto Sans Canadian Aboriginal", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Font weights */
	--fw-regular: 400;
	--fw-semibold: 600;

	/* Type scale: size / line height / letter spacing */
	--fs-h1-legal: 52px;
	--ls-h1-legal: -0.015em;
	--fs-h1: 48px;
	--ls-h1: -0.02em;
	--fs-h2: 44px;
	--lh-h2: 1.12;
	--ls-h2: -0.015em;
	--fs-h3: 32px;
	--ls-h3: -0.01em;
	--fs-h4: 26px;
	--fs-h4-sm: 24px;
	--ls-h4: -0.01em;
	--fs-h5: 22px;
	--fs-h5-sm: 20px;
	--lh-h5: 1.15;
	--ls-h5: -0.005em;
	--fs-h6: 18px;
	--fs-h6-sm: 15px;
	--lh-heading: normal;

	/* Section headings as used in the Home frame (larger than the handoff H2). */
	--fs-display: 64px;
	--ls-display: -0.04em;
	--fs-section-xl: 50px;
	--fs-section-lg: 46px;
	--fs-section-md: 44px;
	--fs-section-sm: 40px; /* No results title, Figma 2211:1915 */
	--ls-section: -0.03em;
	--fs-catalogue-title: 30px; /* Browse page title, Figma 2156:821 */
	--fs-asset-title: 36px; /* Single asset title, Figma 2159:1128 */
	--fs-auth-panel: 54px; /* auth panel title, Figma 2149:746 */
	--fs-404: 180px; /* 404 number, Figma 2214:1813 */
	--fs-about-title: 68px; /* About hero, Figma 2184:666 */
	--fs-contact-title: 60px; /* Contact hero, Figma 2186:666 */
	--fs-licence-block: 21px; /* Licensing licence blocks, Figma 2185:777 */
	--fs-contact-card-title: 30px; /* Contact card and form titles, Figma 2186:670 */
	--fs-account-welcome: 34px; /* My Account welcome banner, Figma 2193:1652 */
	--fs-total: 28px; /* Cart and checkout total, Figma 2195:883 */
	--ls-section-md: -0.025em;
	--lh-section: normal;
	--fs-intro: 17px;
	--lh-intro: 27px;

	--fs-lead: 19px;
	--lh-lead: 1.6;
	--fs-longform: 17px;
	--lh-longform: 1.7;
	--fs-body-l: 16px;
	--lh-body-l: 1.6;
	--fs-body: 15px;
	--fs-body-sm: 14px;
	--lh-body: 1.6;
	--fs-small: 13px;
	--fs-small-sm: 12px;
	--fs-button: 15px;
	--lh-button: 20px;
	--fs-eyebrow: 13px;
	--fs-eyebrow-sm: 12px;
	--ls-eyebrow: 0.08em;
	--fs-tiny: 11px;

	/* Radius */
	--radius-pill: 999px;
	--radius-control: 8px;
	--radius-tile-sm: 10px;
	--radius-tile: 12px;
	--radius-tile-lg: 14px; /* order detail status banner, Figma 2203:1475 */
	--radius-card: 16px;
	--radius-card-lg: 18px;
	--radius-banner: 20px;
	--radius-banner-lg: 22px;
	--radius-panel: 24px;

	/* Motion: every hover state transitions with this. */
	--ease-hover: 0.15s ease;

	/* Shadows */
	--shadow-float: 0 16px 36px -8px rgb(26 10 18 / 0.14);
	--shadow-card-hover: 0 12px 28px -6px rgb(26 10 18 / 0.18); /* asset card */
	--shadow-card: 0 8px 12px rgb(26 10 18 / 0.06); /* order summary, Figma 2195:872 */
	--shadow-search-404: 0 16px 40px -8px rgb(5 20 77 / 0.25); /* 404 search, Figma 2214:1816 */
	--shadow-summary: 0 20px 44px -10px rgb(26 10 18 / 0.18); /* Licensing licence summary card, Figma 2185:677 */
	--shadow-dropdown: 0 2px 6px rgb(0 0 0 / 0.06), 0 18px 44px -8px rgb(18 13 15 / 0.14);

	/* Layout */
	--container: 1280px;
	--container-wide: 1400px; /* Home hero and its header */
	--gutter: 16px;
}

/* Display and section headings scale down below the design width; gutter grows on phones. */
@media (max-width: 1279px) {
	:root {
		--fs-display: 54px;
	}
}

@media (max-width: 1023px) {
	:root {
		--fs-404: 140px;
		--fs-contact-title: 46px;
		--fs-about-title: 52px;
		--fs-display: 46px;
		--fs-section-xl: 42px;
		--fs-section-lg: 40px;
		--fs-section-md: 38px;
		--fs-section-sm: 34px;
	}
}

/* Mobile values from Figma Home — Mobile 390 (2308:2772). */
@media (max-width: 767px) {
	:root {
		--fs-404: 112px;
		--fs-contact-title: 34px;
		--fs-about-title: 38px;
		--fs-display: 38px;
		--ls-display: -0.015em;
		--fs-section-xl: 30px;
		--fs-section-lg: 30px;
		--fs-section-md: 30px;
		--fs-section-sm: 28px;
		--ls-section: -0.012em;
		--ls-section-md: -0.012em;
		--lh-section: 1.15;
		--fs-intro: 15px;
		--lh-intro: 1.55;
		--gutter: 20px;
		--fs-catalogue-title: 24px;
		--fs-asset-title: 28px;
	}
}