/* Centeralise our design tokens, this is just to everything maintainble and consistent */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Black+Ops+One&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik+Distressed&display=swap');

:root {
	/* Fonts */
	--font-sans: "Inter", system-ui, sans-serif;
	--font-display: "Bebas Neue", sans-serif;
	--header-height: 5rem;
	--radius: 8px;
	/* Colors — for transparency do rgb(var(--*-color) / 0-1) */
	--background-color: 14 18 19;
	--foreground-color: 242 235 221;
	--primary-color: 168 75 56;
	--primary-foreground-color: 255 247 234;
	--secondary-color: 30 40 40;
	--secondary-foreground-color: 242 235 221;
	--muted-color: 180 172 158;
	--accent-color: 216 180 95;
	--accent-foreground-color: 14 18 19;
	--card-color: 20 26 26;
	--card-foreground-color: 242 235 221;
	--border-color: 68 81 75;
	--shadow-color: 0 0 0;
	/* chapter colors */
	/* --birthright-color: 193 122 58;
	--limbo-color: 120 151 166;
	--daylight-color: 111 174 122; */
	--birthright-color: 192 70 55;
	--limbo-color: 216 140 60;
	--daylight-color: 111 174 122;
	/* these are gonna be used for text sizing, (clamped values to ensurre full resposnivenss across all screen sizes) */
	--text-2xs: clamp(0.6rem, 1.5vw, 0.7rem);
	--text-xs: clamp(0.7rem, 1.75vw, 0.8rem);
	--text-sm: clamp(0.8rem, 2vw, 0.9rem);
	--text-base: clamp(0.9rem, 2.5vw, 1rem);
	--text-lg: clamp(1rem, 3vw, 1.5rem);
	--text-xl: clamp(1.5rem, 4vw, 2rem);
	--text-2xl: clamp(2rem, 5.5vw, 3rem);
	--text-3xl: clamp(3rem, 8.5vw, 5rem);
	--text-4xl: clamp(3.5rem, 14vw, 9rem);
	--text-5xl: clamp(4rem, 18vw, 10rem);
	/* these will be used for margin (to add gaps between elements) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 3rem;
	--space-7: 4rem;
	--space-8: 6rem;
	/* durations for animation, to aslo make the animations more consistent */
	--duration-quick: 500ms;
	--duration-base: 750ms;
	--duration-slow: 1250ms;
	--duration-slower: 2000ms;
	--ease: cubic-bezier(0.4, 0, 0.2, 1);
	/* Chapter background tones */
	--tone-warm-color: 196 132 74;
	--tone-floral-color: 210 185 220;
	--tone-ash-color: 90 88 84;
	--tone-sky-color: 140 180 215;
	--tone-haven-color: 120 160 110;
	--tone-dust-color: 170 150 120;
	--tone-ember-color: 200 90 60;
	--tone-night-color: 60 75 105;
	/* letter-spacing scale */
	--tracking-tight: 0.025em;
	--tracking-wide: 0.06em;
	--tracking-wider: 0.1em;
	--tracking-widest: 0.2em;
	--tracking-eyebrow: 0.28em;
	/* line-height scale */
	--leading-tight: 0.9;
	--leading-normal: 1.75;
	/* font-weight scale */
	--weight-light: 300;
	--weight-regular: 400;
}