/* ==============================================
   OCTARINE ANALYTICS — SHARED STYLES
   Design tokens, reset, and common components
   (nav, hamburger, CTA button, footer, skip-link)
   used across index.html, data-stories.html, and
   pjm-load-analysis.html.

   Page-specific styles (hero, sections, charts,
   responsive breakpoints) stay inline per page.
   ============================================== */

:root {
	/* --- Typography Scale (1.25 ratio) --- */
	--text-xs: 0.75rem;      /* 12px - meta, labels */
	--text-sm: 0.875rem;     /* 14px - body small, links */
	--text-base: 1rem;       /* 16px - body default */
	--text-lg: 1.125rem;     /* 18px - card titles */
	--text-xl: 1.25rem;      /* 20px - service titles */
	--text-2xl: 1.5rem;      /* 24px - small headers */
	--text-3xl: 2rem;        /* 32px - section headers */
	--text-4xl: 2.5rem;      /* 40px - footer CTA */
	--text-5xl: 3.5rem;      /* 56px - hero minimum */
	--text-6xl: 5rem;        /* 80px - hero maximum */

	/* --- Font Families --- */
	--font-display: 'Fraunces', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	/* --- Font Weights --- */
	--weight-light: 300;
	--weight-normal: 400;
	--weight-medium: 500;
	--weight-semibold: 600;

	/* --- Line Heights --- */
	--leading-none: 1;
	--leading-tight: 1.15;
	--leading-snug: 1.35;
	--leading-normal: 1.5;
	--leading-relaxed: 1.7;
	--leading-loose: 1.85;

	/* --- Letter Spacing --- */
	--tracking-tighter: -0.03em;
	--tracking-tight: -0.015em;
	--tracking-normal: 0;
	--tracking-wide: 0.025em;
	--tracking-wider: 0.05em;
	--tracking-widest: 0.1em;

	/* --- Brand Colors --- */
	--color-primary: #b794f6;
	--color-primary-muted: #a085d8;
	--color-accent: #10C3AA;
	--color-accent-hover: #0dab96;

	/* --- Background Colors (slightly warm gray palette) --- */
	--color-bg-dark: #38363a;
	--color-bg-dark-rgb: 56, 54, 58;  /* For rgba() usage */
	--color-bg-light: #faf9f7;
	--color-bg-section: #f5f4f1;
	--color-footer: #2a282c;
	--color-card-bg: #ffffff;

	/* --- Text Colors --- */
	--color-text-dark: #1a1819;
	--color-text: #2d2a2b;
	--color-text-body: #4a4647;
	--color-text-muted: #6e696b;
	--color-text-subtle: #8f8a8c;
	--color-text-light: #f7f5f6;

	/* --- UI Colors --- */
	--color-divider: #e6e3e0;
	--color-card-border: rgba(0, 0, 0, 0.04);
	--color-card-shadow: rgba(0, 0, 0, 0.05);
	--color-card-shadow-hover: rgba(0, 0, 0, 0.09);

	/* --- Spacing Scale (8px base grid) --- */
	--space-1: 0.25rem;   /* 4px */
	--space-2: 0.5rem;    /* 8px */
	--space-3: 0.75rem;   /* 12px */
	--space-4: 1rem;      /* 16px */
	--space-5: 1.5rem;    /* 24px */
	--space-6: 2rem;      /* 32px */
	--space-7: 2.5rem;    /* 40px */
	--space-8: 3rem;      /* 48px */
	--space-9: 4rem;      /* 64px */
	--space-10: 5rem;     /* 80px */
	--space-11: 6rem;     /* 96px */

	/* --- Layout Constants --- */
	--nav-height: 72px;
	--content-max-width: 1140px;
	--card-radius: 6px;
	--section-padding-x: 8%;
}


/* ==============================================
   RESET & BASE STYLES
   ============================================== */
*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-size: 16px;
	overflow-x: hidden;
}

body {
	font-family: var(--font-body);
	font-size: var(--text-base);
	line-height: var(--leading-relaxed);
	color: var(--color-text);
	font-weight: var(--weight-normal);
}


/* ==============================================
   NAVIGATION
   ============================================== */
nav {
	background: rgba(var(--color-bg-dark-rgb), 0.97);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 0 var(--section-padding-x);
	height: var(--nav-height);
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}

nav.scrolled {
	box-shadow: 0 1px 16px rgba(0, 0, 0, 0.12);
}

nav.hidden {
	transform: translateY(-100%);
}

/* --- Logo --- */
.logo {
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	font-size: var(--text-xl);
	letter-spacing: var(--tracking-tight);
	color: #ffffff;
	text-decoration: none;
	transition: opacity 0.2s;
}

.logo:hover {
	opacity: 0.9;
}

.logo:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
}

.logo span {
	color: var(--color-primary);
}

/* --- Nav Links --- */
.nav-links {
	display: flex;
	gap: var(--space-7);
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-wide);
}

.nav-links a {
	position: relative;
	color: var(--color-text-light);
	text-decoration: none;
	opacity: 0.8;
	transition: opacity 0.2s;
	text-transform: uppercase;
}

.nav-links a:hover,
.nav-links a.active {
	opacity: 1;
}

.nav-links a::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
	transform: scaleX(1);
}

.nav-links a:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
	opacity: 1;
}

.skip-link {
	position: absolute;
	top: -100%;
	left: var(--section-padding-x);
	z-index: 200;
	padding: var(--space-2) var(--space-4);
	background: var(--color-accent);
	color: #fff;
	font-size: var(--text-sm);
	font-weight: var(--weight-medium);
	text-decoration: none;
	border-radius: 0 0 4px 4px;
	transition: top 0.2s;
}
.skip-link:focus {
	top: 0;
}

/* --- Hamburger Menu (Mobile) --- */
.hamburger {
	display: none;
	flex-direction: column;
	justify-content: space-around;
	width: 24px;
	height: 20px;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
}

.hamburger-line {
	width: 24px;
	height: 2px;
	background: var(--color-text-light);
	border-radius: 1px;
	transition: all 0.3s ease;
}

.hamburger:hover .hamburger-line {
	background: var(--color-accent);
}

.hamburger:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
}

.hamburger.active .hamburger-line:nth-child(1) {
	transform: translateY(9px) rotate(45deg);
}

.hamburger.active .hamburger-line:nth-child(2) {
	opacity: 0;
}

.hamburger.active .hamburger-line:nth-child(3) {
	transform: translateY(-9px) rotate(-45deg);
}


/* ==============================================
   CTA BUTTON (used in hero and footer)
   ============================================== */
.cta-button {
	display: inline-block;
	padding: var(--space-3) var(--space-5);
	background: var(--color-accent);
	color: white;
	text-decoration: none;
	font-size: var(--text-sm);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--tracking-wide);
	border-radius: 4px;
	transition: all 0.2s ease;
	box-shadow: 0 2px 12px rgba(16, 195, 170, 0.3);
}

.cta-button:hover {
	background: var(--color-accent-hover);
	transform: translateY(-1px);
	box-shadow: 0 4px 20px rgba(16, 195, 170, 0.35);
}

.cta-button:focus {
	outline: 3px solid rgba(16, 195, 170, 0.4);
	outline-offset: 3px;
}


/* ==============================================
   FOOTER
   ============================================== */
footer {
	background: var(--color-footer);
	color: var(--color-text-light);
	padding: var(--space-10) var(--section-padding-x) var(--space-8);
	position: relative;
}

/* Gradient accent stripe */
footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg,
		var(--color-primary),
		var(--color-accent));
}

/* --- Footer CTA Block --- */
.footer-cta {
	max-width: 520px;
	margin-bottom: var(--space-9);
}

.footer-cta h3 {
	font-family: var(--font-display);
	font-size: var(--text-4xl);
	font-weight: var(--weight-light);
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-tight);
	margin-bottom: var(--space-4);
}

.footer-cta p {
	font-size: var(--text-base);
	opacity: 0.75;
	line-height: var(--leading-relaxed);
	margin-bottom: var(--space-6);
}

/* Ghost button variant */
.footer-cta .cta-button {
	background: transparent;
	border: 1px solid var(--color-accent);
	color: var(--color-accent);
	box-shadow: none;
}

.footer-cta .cta-button:hover {
	background: var(--color-accent);
	color: white;
	box-shadow: 0 4px 20px rgba(16, 195, 170, 0.25);
}

/* --- Footer Bottom Bar --- */
.footer-bottom {
	padding-top: var(--space-6);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--text-sm);
	opacity: 0.5;
}

.footer-bottom a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s;
}

.footer-bottom a:hover {
	opacity: 1;
}

.footer-bottom a:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
	opacity: 1;
}