@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/buttons.min.css";
@import "https://unpkg.com/open-props/animations.min.css";
@import "https://unpkg.com/open-props/easings.min.css";
@import "https://unpkg.com/open-props/sizes.min.css";
@import "https://unpkg.com/open-props/gradients.min.css";

/* ===== CORE VARIABLES ===== */
:root {
  --font-sans: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Golden Ratio Typographic Scale */
  /* Base: 400, Golden Ratio: 1.618, Scale: 400, 500, 600, 700, 800, 900 */
  --font-weight-light: 300;      /* Light text, secondary content */
  --font-weight-normal: 400;     /* Body text, default */
  --font-weight-medium: 500;     /* Emphasis, buttons */
  --font-weight-semibold: 600;   /* Headings, important text */
  --font-weight-bold: 700;       /* Strong headings, CTAs */
  --font-weight-extrabold: 800;  /* Hero titles, maximum impact */
  --font-weight-black: 900;      /* Ultra bold, sparingly used */
  
  /* Semantic color tokens */
  --color-primary: var(--blue-6);
  --color-primary-hover: var(--blue-7);
  --color-secondary: var(--gray-6);
  --color-secondary-hover: var(--gray-7);
  
  --color-background: var(--white-0);
  --color-surface: var(--gray-1);
  --color-surface-hover: var(--gray-2);
  --color-border: var(--gray-3);
  --color-text: var(--gray-9);
  --color-text-secondary: var(--gray-7);
  
  /* Dark theme colors */
  --color-background-dark: var(--gray-9);
  --color-surface-dark: var(--gray-8);
  --color-surface-hover-dark: var(--gray-7);
  --color-border-dark: var(--gray-6);
  --color-text-dark: var(--gray-1);
  --color-text-secondary-dark: var(--gray-3);
  
  /* Animation tokens */
  --hover-lift: translateY(-2px);
  --hover-scale: scale(1.02);
  --hover-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --hover-smooth: cubic-bezier(0.4, 0.0, 0.2, 1);
  --hover-duration: 0.15s;
  --hover-duration-fast: 0.08s;
}

/* ===== THEME SWITCHING ===== */
[data-theme="dark"] {
  color-scheme: dark;
  --color-background: var(--color-background-dark);
  --color-surface: var(--color-surface-dark);
  --color-surface-hover: var(--color-surface-hover-dark);
  --color-border: var(--color-border-dark);
  --color-text: var(--color-text-dark);
  --color-text-secondary: var(--color-text-secondary-dark);
}

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

html {
  block-size: 100%;
  -webkit-text-size-adjust: none;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'pnum' 1, 'tnum' 0, 'onum' 1, 'lnum' 0, 'dlig' 0;
}

body {
  min-block-size: 100%;
  font-family: var(--font-sans);
  font-size: var(--font-size-3); /* Increased from font-size-2 */
  font-weight: var(--font-weight-normal);
  line-height: var(--font-lineheight-3);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:focus-visible {
  outline: var(--border-size-2) solid var(--color-primary);
  outline-offset: var(--size-1);
}

::selection {
  background-color: var(--color-primary);
  color: var(--gray-0);
}

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-bold);
  line-height: var(--font-lineheight-1);
  color: var(--color-text);
  text-wrap: balance;
  letter-spacing: -0.02em;
}

h1 { 
  font-size: var(--font-size-fluid-3); 
  font-weight: var(--font-weight-extrabold);
  margin-block-end: var(--size-5); 
}

h2 { 
  font-size: var(--font-size-fluid-2); 
  font-weight: var(--font-weight-bold);
  margin-block-end: var(--size-4); 
}

h3 { 
  font-size: var(--font-size-6); 
  font-weight: var(--font-weight-semibold);
  margin-block-end: var(--size-3); 
}

p {
  margin-block-end: var(--size-4);
  line-height: var(--font-lineheight-4);
  text-wrap: pretty;
  font-weight: var(--font-weight-normal);
  max-inline-size: 65ch;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: var(--size-1);
  text-decoration-thickness: var(--border-size-1);
  transition: all var(--hover-duration) var(--hover-smooth);
  font-weight: var(--font-weight-medium);
}

a:hover {
  color: var(--color-primary-hover);
  transform: var(--hover-scale);
}

/* ===== LAYOUT UTILITIES ===== */
.container {
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: 0; /* Remove horizontal padding for true full-width */
  max-inline-size: 100vw; /* Truly fluid - use full viewport width */
}

@media (width >= 640px) { .container { padding-inline: 0; } }
@media (width >= 1024px) { .container { padding-inline: 0; } }
@media (width >= 1440px) { .container { padding-inline: 0; } }

/* ===== GRID SYSTEM ===== */
.grid { display: grid; gap: var(--size-4); }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (width >= 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== ELEMENTAL COMPONENTS ===== */
/* 
 * Systematic sizing approach:
 * - sm: Small components (compact, minimal space)
 * - md: Medium components (standard, balanced)
 * - lg: Large components (prominent, spacious)
 */

/* ===== ICON COMPONENTS ===== */
.icon-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-4);
  block-size: var(--size-4);
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-1);
  color: var(--color-text-secondary);
  transition: color 0.08s ease, transform 0.08s ease;
}

.icon-sm svg {
  inline-size: var(--size-3);
  block-size: var(--size-3);
  transition: transform 0.08s ease;
}

.icon-md {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-5);
  block-size: var(--size-5);
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-2);
  color: var(--color-text-secondary);
  transition: color 0.08s ease, transform 0.08s ease;
}

.icon-md svg {
  inline-size: var(--size-4);
  block-size: var(--size-4);
  transition: transform 0.08s ease;
}

.icon-lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-6);
  block-size: var(--size-6);
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-3);
  color: var(--color-text-secondary);
  transition: color 0.08s ease, transform 0.08s ease;
}

.icon-lg svg {
  inline-size: var(--size-5);
  block-size: var(--size-5);
  transition: transform 0.08s ease;
}

.icon-sm:hover,
.icon-md:hover,
.icon-lg:hover {
  color: var(--color-primary);
  transform: scale(1.05);
}

.icon-sm:hover svg,
.icon-md:hover svg,
.icon-lg:hover svg {
  transform: scale(1.05);
}

.icon-sm:active,
.icon-md:active,
.icon-lg:active {
  transform: scale(0.98);
  transition-duration: 0.03s;
}

/* ===== BUTTON COMPONENTS ===== */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform var(--hover-duration) var(--hover-smooth), 
              box-shadow var(--hover-duration) var(--hover-smooth);
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  will-change: transform, box-shadow;
  cursor: pointer;
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.05) 100%);
  opacity: 0;
  transition: opacity var(--hover-duration) var(--hover-smooth);
  will-change: opacity;
}

.btn:hover {
  transform: var(--hover-lift);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.btn:hover::before { opacity: 1; }

.btn:active {
  transform: translateY(0px) scale(0.98);
  transition-duration: var(--hover-duration-fast);
}

.btn-sm {
  padding-block: var(--size-1);
  padding-inline: var(--size-3);
  font-size: var(--font-size-1);
  border-radius: var(--radius-2);
  cursor: pointer;
}

.btn-md {
  padding-block: var(--size-2);
  padding-inline: var(--size-4);
  font-size: var(--font-size-2);
  border-radius: var(--radius-2);
  cursor: pointer;
}

.btn-lg {
  padding-block: var(--size-3);
  padding-inline: var(--size-6);
  font-size: var(--font-size-3);
  border-radius: var(--radius-2);
  cursor: pointer;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--gray-0);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn-secondary::before {
  background: currentColor;
  opacity: 0;
}

.btn-secondary:hover::before { opacity: 0.08; }

/* Legacy support - will be deprecated */
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--size-5);
  block-size: var(--size-5);
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-2);
  color: var(--color-text-secondary);
  transition: color 0.08s ease, transform 0.08s ease;
}

.btn-icon svg {
  inline-size: var(--size-4);
  block-size: var(--size-4);
  transition: transform 0.08s ease;
}

.btn-icon:hover {
  color: var(--color-primary);
  transform: scale(1.05);
}

.btn-icon:hover svg { transform: scale(1.05); }

.btn-icon:active {
  transform: scale(0.98);
  transition-duration: 0.03s;
}

/* ===== CARD COMPONENT ===== */
.card {
  background-color: var(--color-surface);
  border: var(--border-size-1) solid var(--color-border);
  border-radius: var(--radius-3);
  padding: var(--size-6);
  position: relative;
  overflow: hidden;
  transition: transform var(--hover-duration) var(--hover-smooth), 
              box-shadow var(--hover-duration) var(--hover-smooth), 
              border-color var(--hover-duration) var(--hover-smooth);
  text-align: left;
  will-change: transform, box-shadow, border-color;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-primary);
  opacity: 0;
  transition: opacity var(--hover-duration) var(--hover-smooth);
  will-change: opacity;
}

.card:hover {
  transform: var(--hover-lift);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: var(--color-primary);
}

.card:hover::before { opacity: 0.02; }

.card-header { margin-block-end: var(--size-4); }
.card-title {
  font-size: var(--font-size-4);
  font-weight: var(--font-weight-semibold);
  margin-block-end: var(--size-2);
  color: var(--color-text);
}
.card-description {
  color: var(--color-text-secondary);
  line-height: var(--font-lineheight-4);
}
.card-content { margin-block-end: var(--size-4); }
.card-footer {
  display: flex;
  gap: var(--size-3);
  align-items: center;
}

/* ===== TEXT COMPONENTS ===== */
.text-sm {
  font-size: var(--font-size-1);
  line-height: var(--font-lineheight-3);
  font-weight: var(--font-weight-normal);
}

.text-md {
  font-size: var(--font-size-2);
  line-height: var(--font-lineheight-3);
  font-weight: var(--font-weight-normal);
}

.text-lg {
  font-size: var(--font-size-3);
  line-height: var(--font-lineheight-4);
  font-weight: var(--font-weight-medium);
}

/* ===== SPACING COMPONENTS ===== */
.space-sm {
  padding: var(--size-2);
  gap: var(--size-2);
}

.space-md {
  padding: var(--size-4);
  gap: var(--size-4);
}

.space-lg {
  padding: var(--size-6);
  gap: var(--size-6);
}

/* ===== CONTAINER COMPONENTS ===== */
.container-sm {
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: var(--size-2);
  max-inline-size: 640px;
}

.container-md {
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: var(--size-4);
  max-inline-size: 1024px;
}

.container-lg {
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: var(--size-6);
  max-inline-size: 1280px;
}

/* ===== UTILITY CLASSES ===== */
.text-center { text-align: center; }
.mb-8 { margin-block-end: var(--size-8); }
.gap-6 { gap: var(--size-6); }

/* ===== RESPONSIVE UTILITIES ===== */
@media (width <= 768px) {
  .card { padding: var(--size-5); }
}