/**
 * Science Factory Camp - Global Design System
 *
 * This file contains the core design tokens including fonts, colors,
 * spacing, and base styles for the Science Factory Camp brand.
 */

/* ==========================================================================
   Font Definitions
   ========================================================================== */

/* Archer Font Family (Primary - Serif) */
@font-face {
	font-family: 'Archer';
	src: url('../fonts/archer/ArcherHairlinePro.woff2') format('woff2');
	font-weight: 100;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Archer';
	src: url('../fonts/archer/ArcherXLightPro.woff2') format('woff2');
	font-weight: 200;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Archer';
	src: url('../fonts/archer/ArcherLightPro.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Archer';
	src: url('../fonts/archer/ArcherLightItalPro.woff2') format('woff2');
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Archer';
	src: url('../fonts/archer/ArcherBookPro.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Archer';
	src: url('../fonts/archer/ArcherBookItalPro.woff2') format('woff2');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: 'Archer';
	src: url('../fonts/archer/ArcherMediumPro.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Archer';
	src: url('../fonts/archer/ArcherSemiboldPro.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Archer';
	src: url('../fonts/archer/ArcherBoldPro.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Poppins Font Family (Secondary - Sans-serif) */
@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins/Poppins-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Poppins';
	src: url('../fonts/poppins/Poppins-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
	/* Typography */
	--sfc-font-primary: 'Archer', Georgia, 'Times New Roman', serif;
	--sfc-font-secondary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Brand Colors */
	--sfc-color-primary: #196B81;        /* Teal - headings, feature cards */
	--sfc-color-primary-light: #2a7a8c;  /* Lighter teal - camp-your-way bg */
	--sfc-color-secondary: #e47633;      /* Orange - buttons, accents */
	--sfc-color-secondary-dark: #ffffff; /* Orange hover state */
	--sfc-color-accent-gold: #ffb400;    /* Gold - ratings, stars */

	/* Text Colors */
	--sfc-color-text-dark: #262626;      /* Primary text */
	--sfc-color-text-gray: #4a4a4a;      /* Secondary text, descriptions */
	--sfc-color-text-light: #fff;        /* Light text on dark backgrounds */
	--sfc-color-text-black: #000000;     /* Pure black for high contrast text */

	/* Background Colors */
	--sfc-color-bg-white: #fff;
	--sfc-color-bg-cream: #E9E2D3;       /* Footer background */
	--sfc-color-bg-light-gray: #f5f5f5;  /* Hover states */
	--sfc-color-bg-border: #f0f0f0;      /* Borders */

	/* Spacing Scale */
	--sfc-space-xs: 10px;
	--sfc-space-sm: 20px;
	--sfc-space-md: 30px;
	--sfc-space-lg: 40px;
	--sfc-space-xl: 60px;
	--sfc-space-2xl: 80px;
	--sfc-space-3xl: 120px;

	/* Border Radius */
	--sfc-radius-sm: 8px;
	--sfc-radius-md: 20px;
	--sfc-radius-lg: 30px;
	--sfc-radius-pill: 1000px;           /* Full pill shape for buttons */
	--sfc-radius-round: 50%;

	/* Shadows */
	--sfc-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.1);
	--sfc-shadow-md: 0 10px 30px rgba(26, 95, 122, 0.2);

	/* Container */
	--sfc-container-max: 1440px;
	--sfc-container-padding: 20px;
	--sfc-container-padding-desktop: 130px;  /* Desktop (1440px+) horizontal padding */

	/* Transitions */
	--sfc-transition-fast: 0.2s ease;
	--sfc-transition-base: 0.3s ease;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

html body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: var(--sfc-font-primary);
	font-size: 16px;
	line-height: 1.5;
	color: var(--sfc-color-text-dark);
	background-color: var(--sfc-color-bg-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

/* ==========================================================================
   Typography Base
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sfc-font-primary);
	color: var(--sfc-color-primary);
	margin: 0;
	line-height: 1.2;
}

p {
	margin: 0;
	color: var(--sfc-color-text-gray);
}

a {
	color: var(--sfc-color-secondary);
	text-decoration: none;
	transition: color var(--sfc-transition-fast);
}

/* a:hover {
	color: var(--sfc-color-secondary-dark);
} */

/* ==========================================================================
   Button Styles
   ========================================================================== */

.sfc-button {
	display: inline-block;
	padding: 16px 32px;
	border-radius: var(--sfc-radius-lg);
	font-family: var(--sfc-font-primary);
	font-size: 16px;
	font-weight: 500;
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	transition: all var(--sfc-transition-base);
	border: 2px solid transparent;
	white-space: nowrap;
}

.sfc-button--primary {
	background-color: var(--sfc-color-secondary);
	color: var(--sfc-color-text-light);
	border-color: var(--sfc-color-secondary);
}

.sfc-button--primary:hover {
	background-color: var(--sfc-color-secondary-dark);
	border-color: var(--sfc-color-secondary-dark);
	color: var(--sfc-color-text-light);
}

.sfc-button--outline {
	background-color: transparent;
	color: var(--sfc-color-secondary);
	border-color: var(--sfc-color-secondary);
}

.sfc-button--outline:hover {
	background-color: var(--sfc-color-secondary);
	color: var(--sfc-color-text-light);
}

/* ==========================================================================
   Container
   ========================================================================== */

.sfc-container {
	max-width: var(--sfc-container-max);
	margin: 0 auto;
	padding: 0 var(--sfc-container-padding);
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.sfc-text-center {
	text-align: center;
}

.sfc-text-primary {
	color: var(--sfc-color-primary);
}

.sfc-text-secondary {
	color: var(--sfc-color-secondary);
}

.sfc-bg-primary {
	background-color: var(--sfc-color-primary);
}

.sfc-bg-secondary {
	background-color: var(--sfc-color-secondary);
}

.sfc-bg-cream {
	background-color: var(--sfc-color-bg-cream);
}