/* ==========================================================================
   DC TapConnect Design Tokens & Core Theme Styles
   Schema: 1.0.0
   ========================================================================== */

:root {
	/* ----------------------------------------------------------------------
	   Color Tokens
	   ---------------------------------------------------------------------- */
	/* Primary Brand Accent */
	--color-primary-accent: #FF6B00;
	--color-primary-accent-hover: #E05E00;
	--color-primary-accent-gradient-start: #FF7A00;
	--color-primary-accent-gradient-end: #FF4D00;

	/* Secondary Accents */
	--color-secondary-amber: #FFA800;
	--color-secondary-cyan-accent: #00D2FF;

	/* Surface - Dark Theme */
	--color-surface-dark-hero-bg: #080C16;
	--color-surface-dark-footer-bg: #070B14;
	--color-surface-dark-card-bg: #111827;
	--color-surface-dark-card-border: #1F2937;

	/* Surface - Light Theme */
	--color-surface-light-body-bg: #FFFFFF;
	--color-surface-light-subtle-card-bg: #F9FAFB;
	--color-surface-light-card-border: #E5E7EB;
	--color-surface-light-accent-border: #FED7AA;

	/* Text - Light on Dark Canvas */
	--color-text-light-primary: #FFFFFF;
	--color-text-light-secondary: #9CA3AF;
	--color-text-light-muted: #6B7280;

	/* Text - Dark on Light Canvas */
	--color-text-dark-primary: #111827;
	--color-text-dark-secondary: #4B5563;
	--color-text-dark-muted: #6B7280;

	/* Text - Brand Accent */
	--color-text-accent: #FF6B00;

	/* Active Theme Defaults (Light Mode default canvas) */
	--color-bg: var(--color-surface-light-body-bg);
	--color-text-primary: var(--color-text-dark-primary);
	--color-text-secondary: var(--color-text-dark-secondary);
	--color-text-muted: var(--color-text-dark-muted);
	--color-border: var(--color-surface-light-card-border);

	/* ----------------------------------------------------------------------
	   Typography Tokens
	   ---------------------------------------------------------------------- */
	--font-family-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	/* Font Weights */
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-extrabold: 800;

	/* Display Typography Token Range */
	--font-size-display-mobile: 32px;
	--line-height-display-mobile: 1.25;
	--letter-spacing-display-mobile: -0.01em;

	--font-size-display-tablet: 38px;
	--line-height-display-tablet: 1.2;
	--letter-spacing-display-tablet: -0.02em;

	--font-size-display-desktop: 58px;
	--line-height-display-desktop: 1.15;
	--letter-spacing-display-desktop: -0.02em;

	/* Display Active Fluid */
	--font-size-display: clamp(32px, 4vw + 1rem, 58px);
	--line-height-display: 1.15;
	--letter-spacing-display: -0.02em;

	/* Heading 1 (H1) */
	--font-size-h1-mobile: 28px;
	--line-height-h1-mobile: 1.25;
	--letter-spacing-h1-mobile: -0.01em;

	--font-size-h1-desktop: 36px;
	--line-height-h1-desktop: 1.2;
	--letter-spacing-h1-desktop: -0.02em;

	--font-size-h1: clamp(28px, 2.5vw + 1rem, 36px);
	--line-height-h1: 1.2;
	--letter-spacing-h1: -0.02em;

	/* Heading 2 (H2) */
	--font-size-h2-mobile: 24px;
	--line-height-h2-mobile: 1.3;
	--letter-spacing-h2-mobile: 0em;

	--font-size-h2-desktop: 30px;
	--line-height-h2-desktop: 1.25;
	--letter-spacing-h2-desktop: -0.01em;

	--font-size-h2: clamp(24px, 1.8vw + 1rem, 30px);
	--line-height-h2: 1.25;
	--letter-spacing-h2: -0.01em;

	/* Heading 3 (H3) */
	--font-size-h3-mobile: 18px;
	--line-height-h3-mobile: 1.4;
	--letter-spacing-h3-mobile: 0em;

	--font-size-h3-desktop: 20px;
	--line-height-h3-desktop: 1.35;
	--letter-spacing-h3-desktop: 0em;

	--font-size-h3: clamp(18px, 0.6vw + 1rem, 20px);
	--line-height-h3: 1.35;
	--letter-spacing-h3: 0em;

	/* Body Large */
	--font-size-body-large-mobile: 16px;
	--line-height-body-large-mobile: 1.5;

	--font-size-body-large-desktop: 22px;
	--line-height-body-large-desktop: 1.6;

	--font-size-body-large: clamp(16px, 0.5vw + 0.9rem, 22px);
	--line-height-body-large: 1.6;

	/* Body Standard */
	--font-size-body-mobile: 14px;
	--line-height-body-mobile: 1.55;

	--font-size-body-desktop: 15px;
	--line-height-body-desktop: 1.6;

	--font-size-body: clamp(14px, 0.3vw + 0.85rem, 15px);
	--line-height-body: 1.6;

	/* Caption */
	--font-size-caption-mobile: 12px;
	--line-height-caption-mobile: 1.4;

	--font-size-caption-desktop: 13px;
	--line-height-caption-desktop: 1.45;

	--font-size-caption: clamp(12px, 0.3vw + 0.7rem, 13px);
	--line-height-caption: 1.45;

	/* ----------------------------------------------------------------------
	   Spacing Scale & Grid Tokens
	   ---------------------------------------------------------------------- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;

	/* Responsive Section Vertical Padding */
	--section-padding-y-mobile: 48px;
	--section-padding-y-tablet: 72px;
	--section-padding-y-desktop: 96px;
	--section-padding-y: clamp(48px, 6vw, 96px);

	/* Container Max Widths */
	--container-max-width-narrow: 960px;
	--container-max-width-default: 1200px;
	--container-max-width-wide: 1320px;
	--container-gutter: clamp(16px, 4vw, 32px);

	/* Grid Gaps */
	--grid-gap-mobile: 16px;
	--grid-gap-tablet: 24px;
	--grid-gap-desktop: 32px;
	--grid-gap: clamp(16px, 2.5vw, 32px);

	/* ----------------------------------------------------------------------
	   Border Radius Tokens
	   ---------------------------------------------------------------------- */
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-xl: 20px;
	--radius-2xl: 24px;
	--radius-full: 9999px;

	/* ----------------------------------------------------------------------
	   Shadow Tokens
	   ---------------------------------------------------------------------- */
	--shadow-card: 0 4px 20px -2px rgba(0, 0, 0, 0.05);
	--shadow-card-hover: 0 10px 30px -4px rgba(255, 107, 0, 0.12);
	--shadow-badge-glow: 0 0 15px rgba(255, 107, 0, 0.35);
	--shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

	/* ----------------------------------------------------------------------
	   Breakpoint Reference Variables (Used in media queries below & JS)
	   ---------------------------------------------------------------------- */
	--breakpoint-sm: 640px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 1024px;
	--breakpoint-xl: 1280px;
	--breakpoint-2xl: 1536px;
}

/* ==========================================================================
   Semantic HTML Resets
   ========================================================================== */

/* 1. Box-sizing reset on all elements & pseudo-elements */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* 2. Remove default margins and set smooth behavior */
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* 3. Base Body Setup */
body {
	min-height: 100vh;
	font-family: var(--font-family-sans);
	font-size: var(--font-size-body);
	line-height: var(--line-height-body);
	color: var(--color-text-primary);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* 4. Media & Graphic Elements Reset */
img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* 5. Typography Headings Reset */
h1,
.h1 {
	font-size: var(--font-size-h1);
	line-height: var(--line-height-h1);
	letter-spacing: var(--letter-spacing-h1);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-dark-primary);
}

h2,
.h2 {
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
	letter-spacing: var(--letter-spacing-h2);
	font-weight: var(--font-weight-bold);
	color: var(--color-text-dark-primary);
}

h3,
.h3 {
	font-size: var(--font-size-h3);
	line-height: var(--line-height-h3);
	letter-spacing: var(--letter-spacing-h3);
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-dark-primary);
}

.text-display {
	font-size: var(--font-size-display);
	line-height: var(--line-height-display);
	letter-spacing: var(--letter-spacing-display);
	font-weight: var(--font-weight-extrabold);
}

.text-body-large {
	font-size: var(--font-size-body-large);
	line-height: var(--line-height-body-large);
}

.text-caption {
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
}

/* 6. Form Controls & Buttons Inheritance Reset */
input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
}

button {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

/* 7. Remove list styles on lists with class attributes */
ul[class],
ol[class] {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* 8. Links reset */
a {
	color: inherit;
	text-decoration: none;
}

/* 9. Accessible Focus Styles */
:focus-visible {
	outline: 2px solid var(--color-primary-accent);
	outline-offset: 3px;
}

/* 10. Screen Reader Accessibility Utilities */
.screen-reader-text,
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(1px, 1px, 1px, 1px) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.skip-link:focus {
	position: fixed;
	top: var(--space-4);
	left: var(--space-4);
	width: auto;
	height: auto;
	clip: auto;
	z-index: 9999;
	background: var(--color-surface-light-body-bg);
	color: var(--color-text-dark-primary);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-modal);
}

/* ==========================================================================
   Responsive Container & Layout Rules
   ========================================================================== */

/* Default Container (1200px max width) */
.container {
	width: 100%;
	max-width: var(--container-max-width-default);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

/* Narrow Container (960px max width) */
.container-narrow {
	width: 100%;
	max-width: var(--container-max-width-narrow);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

/* Wide Container (1320px max width) */
.container-wide {
	width: 100%;
	max-width: var(--container-max-width-wide);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}

/* Fluid Section Vertical Padding */
.section-padding {
	padding-block: var(--section-padding-y);
}

/* Responsive Grid Utility */
.grid-responsive {
	display: grid;
	gap: var(--grid-gap);
}

/* Dark Canvas Utility Block (e.g. Hero / Footer) */
.theme-dark {
	background-color: var(--color-surface-dark-hero-bg);
	color: var(--color-text-light-primary);

	--color-text-primary: var(--color-text-light-primary);
	--color-text-secondary: var(--color-text-light-secondary);
	--color-text-muted: var(--color-text-light-muted);
	--color-border: var(--color-surface-dark-card-border);
}

.theme-dark h1,
.theme-dark h2,
.theme-dark h3 {
	color: var(--color-text-light-primary);
}

/* Tablet Media Query Overrides (≥ 768px) */
@media (min-width: 768px) {
	:root {
		--section-padding-y: var(--section-padding-y-tablet);
		--grid-gap: var(--grid-gap-tablet);
	}
}

/* Desktop Media Query Overrides (≥ 1024px) */
@media (min-width: 1024px) {
	:root {
		--section-padding-y: var(--section-padding-y-desktop);
		--grid-gap: var(--grid-gap-desktop);
	}
}