/**
 * CurrencyFlow - Main Stylesheet
 * Design tokens and base styles.
 *
 * @package CurrencyFlow
 */

/* ========================================
   CSS Custom Properties (Design Tokens)
   ======================================== */
:root {
	/* Colors */
	--cf-primary: #1a56db;
	--cf-primary-dark: #1443b0;
	--cf-primary-light: #e8f0fe;
	--cf-accent: #06b6d4;
	--cf-accent-dark: #0891b2;
	--cf-white: #ffffff;
	--cf-gray-50: #f8fafc;
	--cf-gray-100: #f1f5f9;
	--cf-gray-200: #e2e8f0;
	--cf-gray-300: #cbd5e1;
	--cf-gray-400: #94a3b8;
	--cf-gray-500: #64748b;
	--cf-gray-600: #475569;
	--cf-gray-700: #334155;
	--cf-gray-800: #1e293b;
	--cf-gray-900: #0f172a;
	--cf-success: #10b981;
	--cf-warning: #f59e0b;
	--cf-danger: #ef4444;

	/* Typography */
	--cf-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--cf-font-size-xs: 0.75rem;
	--cf-font-size-sm: 0.875rem;
	--cf-font-size-base: 1rem;
	--cf-font-size-lg: 1.125rem;
	--cf-font-size-xl: 1.25rem;
	--cf-font-size-2xl: 1.5rem;
	--cf-font-size-3xl: 1.875rem;
	--cf-font-size-4xl: 2.25rem;
	--cf-font-size-5xl: 3rem;
	--cf-font-size-6xl: 3.75rem;
	--cf-line-height-tight: 1.2;
	--cf-line-height-normal: 1.5;
	--cf-line-height-relaxed: 1.7;

	/* Spacing */
	--cf-space-xs: 0.25rem;
	--cf-space-sm: 0.5rem;
	--cf-space-md: 1rem;
	--cf-space-lg: 1.5rem;
	--cf-space-xl: 2rem;
	--cf-space-2xl: 3rem;
	--cf-space-3xl: 4rem;
	--cf-space-4xl: 6rem;
	--cf-space-5xl: 8rem;

	/* Layout */
	--cf-container-max: 1280px;
	--cf-container-padding: 1.5rem;

	/* Border Radius */
	--cf-radius-sm: 8px;
	--cf-radius-md: 12px;
	--cf-radius-lg: 16px;
	--cf-radius-xl: 20px;
	--cf-radius-full: 9999px;

	/* Shadows */
	--cf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
	--cf-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
	--cf-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
	--cf-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
	--cf-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);

	/* Transitions */
	--cf-transition-fast: 150ms ease;
	--cf-transition-base: 250ms ease;
	--cf-transition-slow: 350ms ease;
	--cf-transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================
   Reset & Base
   ======================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--cf-font-family);
	font-size: var(--cf-font-size-base);
	line-height: var(--cf-line-height-normal);
	color: var(--cf-gray-800);
	background-color: var(--cf-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
}

a {
	color: var(--cf-primary);
	text-decoration: none;
	transition: color var(--cf-transition-fast);
}

a:hover {
	color: var(--cf-primary-dark);
}

a:focus-visible {
	outline: 2px solid var(--cf-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

h1, h2, h3, h4, h5, h6 {
	line-height: var(--cf-line-height-tight);
	font-weight: 700;
	color: var(--cf-gray-900);
}

h1 { font-size: var(--cf-font-size-5xl); }
h2 { font-size: var(--cf-font-size-4xl); }
h3 { font-size: var(--cf-font-size-2xl); }
h4 { font-size: var(--cf-font-size-xl); }
h5 { font-size: var(--cf-font-size-lg); }
h6 { font-size: var(--cf-font-size-base); }

p {
	line-height: var(--cf-line-height-relaxed);
	color: var(--cf-gray-600);
}

ul, ol {
	list-style: none;
}

/* ========================================
   Layout
   ======================================== */
.container {
	width: 100%;
	max-width: var(--cf-container-max);
	margin-inline: auto;
	padding-inline: var(--cf-container-padding);
}

.section {
	padding-block: var(--cf-space-4xl);
}

.section--gray {
	background-color: var(--cf-gray-50);
}

.section__header {
	text-align: center;
	max-width: 700px;
	margin-inline: auto;
	margin-bottom: var(--cf-space-3xl);
}

.section__title {
	margin-bottom: var(--cf-space-md);
}

.section__subtitle {
	font-size: var(--cf-font-size-lg);
	color: var(--cf-gray-500);
}

/* ========================================
   Buttons
   ======================================== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.75rem;
	font-size: var(--cf-font-size-base);
	font-weight: 600;
	line-height: 1;
	border: 2px solid transparent;
	border-radius: var(--cf-radius-full);
	cursor: pointer;
	transition: all var(--cf-transition-base);
	white-space: nowrap;
	text-decoration: none;
}

.btn:focus-visible {
	outline: 2px solid var(--cf-primary);
	outline-offset: 2px;
}

.btn--primary {
	background-color: var(--cf-primary);
	color: var(--cf-white);
	border-color: var(--cf-primary);
}

.btn--primary:hover {
	background-color: var(--cf-primary-dark);
	border-color: var(--cf-primary-dark);
	color: var(--cf-white);
	transform: translateY(-1px);
	box-shadow: var(--cf-shadow-lg);
}

.btn--primary:active {
	transform: translateY(0);
}

.btn--secondary {
	background-color: transparent;
	color: var(--cf-primary);
	border-color: var(--cf-primary);
}

.btn--secondary:hover {
	background-color: var(--cf-primary);
	color: var(--cf-white);
	transform: translateY(-1px);
}

.btn--white {
	background-color: var(--cf-white);
	color: var(--cf-primary);
	border-color: var(--cf-white);
}

.btn--white:hover {
	background-color: var(--cf-gray-100);
	color: var(--cf-primary-dark);
	transform: translateY(-1px);
	box-shadow: var(--cf-shadow-lg);
}

.btn--sm {
	padding: 0.625rem 1.25rem;
	font-size: var(--cf-font-size-sm);
}

.btn--lg {
	padding: 1.125rem 2.25rem;
	font-size: var(--cf-font-size-lg);
}

/* ========================================
   Cards
   ======================================== */
.card {
	background-color: var(--cf-white);
	border-radius: var(--cf-radius-xl);
	padding: var(--cf-space-xl);
	box-shadow: var(--cf-shadow-md);
	transition: all var(--cf-transition-base);
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: var(--cf-shadow-xl);
}

.card__icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--cf-primary-light);
	border-radius: var(--cf-radius-md);
	margin-bottom: var(--cf-space-lg);
	color: var(--cf-primary);
}

.card__icon svg {
	width: 28px;
	height: 28px;
}

.card__title {
	font-size: var(--cf-font-size-xl);
	margin-bottom: var(--cf-space-sm);
}

.card__text {
	font-size: var(--cf-font-size-base);
	color: var(--cf-gray-500);
	line-height: var(--cf-line-height-relaxed);
}

/* ========================================
   Utility Classes
   ======================================== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--cf-white);
	clip: auto !important;
	clip-path: none;
	color: var(--cf-gray-900);
	display: block;
	font-size: var(--cf-font-size-sm);
	font-weight: 600;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
	box-shadow: var(--cf-shadow-lg);
	border-radius: var(--cf-radius-sm);
}

.skip-link:focus {
	z-index: 999999;
}

/* Animations */
.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.slide-up {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.slide-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}