/* Design tokens, transcribed from the Figma variable set for
   "Website Design — Starnav.io". This is the only file that may declare a raw
   colour, size or spacing literal. Everything downstream references a var(). */

:root {
	/* ---------------------------------------------------------------- Colour */

	--sn-blue: #0192b7;
	--sn-blue-dark: #007492;
	--sn-blue-darker: #003a49;
	--sn-blue-darkest: #002b36;
	--sn-blue-light: #4db2cc;
	--sn-blue-lighter: #cce9f0;
	--sn-blue-lightest: #e5f4f7;

	--sn-firefly: #07111f;
	--sn-firefly-dark: #050d18;
	--sn-firefly-darker: #02060c;
	--sn-firefly-darkest: #020509;

	--sn-pale-sky: #717885;
	--sn-pale-sky-light: #9ba0a9;
	--sn-pale-sky-lighter: #e2e4e6;
	--sn-pale-sky-darker: #2d3035;

	--sn-neutral-darkest: #0c0c0d;
	--sn-neutral-dark: #545455;
	--sn-neutral-light: #b6b6b6;
	--sn-neutral-lighter: #dadada;
	--sn-neutral-lightest: #f2f2f2;
	--sn-white: #ffffff;

	/* Alpha tokens — Figma's Opacity/* set. */
	--sn-dark-05: rgba(12, 12, 13, 0.05);
	--sn-dark-15: rgba(12, 12, 13, 0.15);
	--sn-dark-60: rgba(12, 12, 13, 0.6);
	--sn-white-10: rgba(255, 255, 255, 0.1);
	--sn-transparent: rgba(255, 255, 255, 0);

	/* ------------------------------------------------- Semantic assignments */

	--sn-bg: var(--sn-firefly);
	--sn-bg-deep: var(--sn-firefly-darker);
	--sn-bg-panel: rgba(255, 255, 255, 0.04);
	--sn-bg-panel-hover: rgba(255, 255, 255, 0.07);
	--sn-text: var(--sn-neutral-lightest);
	--sn-text-muted: var(--sn-pale-sky-light);
	--sn-text-strong: var(--sn-white);
	--sn-accent: var(--sn-blue);
	--sn-accent-soft: var(--sn-blue-light);
	--sn-border: var(--sn-white-10);
	--sn-border-strong: rgba(255, 255, 255, 0.18);
	--sn-scrim: rgba(2, 5, 9, 0.72);

	/* ------------------------------------------------------------ Typography */

	--sn-font-heading: "Oxanium", "Segoe UI", system-ui, sans-serif;
	--sn-font-body: "Archivo", "Segoe UI", system-ui, sans-serif;

	--sn-weight-h1: 400;
	--sn-weight-h2: 200;
	--sn-weight-h3: 300;
	--sn-weight-h4: 400;
	--sn-weight-h5: 500;
	--sn-weight-h6: 500;

	--sn-weight-light: 300;
	--sn-weight-regular: 400;
	--sn-weight-medium: 500;
	--sn-weight-semibold: 600;

	/* Figma's desktop scale is the upper bound of each clamp; the lower bound is
	   the derived mobile size. Body sizes stay fixed — only headings scale. */
	--sn-size-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);   /* 40 -> 68 */
	--sn-size-h2: clamp(2rem, 1.55rem + 1.8vw, 3rem);       /* 32 -> 48 */
	--sn-size-h3: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);  /* 28 -> 40 */
	--sn-size-h4: clamp(1.5rem, 1.35rem + 0.6vw, 2rem);     /* 24 -> 32 */
	--sn-size-h5: clamp(1.25rem, 1.18rem + 0.3vw, 1.5rem);  /* 20 -> 24 */
	--sn-size-h6: 1.25rem;                                  /* 20 */

	--sn-size-tiny: 0.75rem;    /* 12 */
	--sn-size-small: 0.875rem;  /* 14 */
	--sn-size-regular: 1rem;    /* 16 */
	--sn-size-medium: 1.125rem; /* 18 */

	--sn-leading-heading: 1.2;
	--sn-leading-h5: 1.3;
	--sn-leading-body: 1.6;
	--sn-leading-tagline: 1.5;

	--sn-tracking-h2: -1px;
	--sn-tracking-tagline: 0.1875em; /* Figma letterSpacing 30 at 16px */

	/* --------------------------------------------------------------- Layout */

	--sn-container: 1280px;
	--sn-measure: 768px;
	--sn-gutter: 64px;

	--sn-section-sm: 48px;
	--sn-section-md: 80px;
	--sn-section-lg: 112px;

	--sn-gap-xs: 8px;
	--sn-gap-sm: 16px;
	--sn-gap-md: 24px;
	--sn-gap-lg: 32px;
	--sn-gap-xl: 48px;

	--sn-radius: 0;
	--sn-border-width: 1px;

	--sn-header-height: 84px;

	/* --------------------------------------------------------------- Motion */

	--sn-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--sn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--sn-duration-fast: 160ms;
	--sn-duration: 260ms;
	--sn-duration-slow: 520ms;

	--sn-z-header: 1000;
	--sn-z-drawer: 200;
	--sn-z-modal: 300;
}

@media (max-width: 1024px) {
	:root {
		--sn-gutter: 32px;
		--sn-section-lg: 80px;
		--sn-section-md: 64px;
		--sn-header-height: 72px;
	}
}

@media (max-width: 768px) {
	:root {
		--sn-gutter: 24px;
		--sn-section-lg: 64px;
		--sn-section-md: 48px;
		--sn-section-sm: 40px;
	}
}

@media (max-width: 480px) {
	:root {
		--sn-gutter: 20px;
	}
}