@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --color-surface: #f7f9fb;
  --color-surface-dim: #d8dadc;
  --color-surface-bright: #f7f9fb;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f2f4f6;
  --color-surface-container: #eceef0;
  --color-surface-container-high: #e6e8ea;
  --color-surface-container-highest: #e0e3e5;
  --color-on-surface: #191c1e;
  --color-on-surface-variant: #45464d;
  --color-inverse-surface: #2d3133;
  --color-inverse-on-surface: #eff1f3;
  --color-outline: #76777d;
  --color-outline-variant: #c6c6cd;
  --color-surface-tint: #08677a;
  --color-primary: #000000;
  --color-on-primary: #ffffff;
  --color-primary-container: #04323c;
  --color-on-primary-container: #83a5ac;
  --color-inverse-primary: #bec6e0;
  --color-secondary: #08677a;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #064f5d;
  --color-on-secondary-container: #f9f7ff;
  --color-tertiary: #000000;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #001e2c;
  --color-on-tertiary-container: #008ebf;
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;
  --color-primary-fixed: #dae2fd;
  --color-primary-fixed-dim: #bec6e0;
  --color-on-primary-fixed: #131b2e;
  --color-on-primary-fixed-variant: #3f465c;
  --color-secondary-fixed: #dae1ff;
  --color-secondary-fixed-dim: #b3c5ff;
  --color-on-secondary-fixed: #001849;
  --color-on-secondary-fixed-variant: #003fa4;
  --color-tertiary-fixed: #c4e7ff;
  --color-tertiary-fixed-dim: #7bd0ff;
  --color-on-tertiary-fixed: #001e2c;
  --color-on-tertiary-fixed-variant: #004c69;
  --color-background: #f7f9fb;
  --color-on-background: #191c1e;
  --color-surface-variant: #e0e3e5;

  /* Typography */
  --font-family: 'Inter', sans-serif;
  
  --text-display-lg-size: 48px;
  --text-display-lg-weight: 700;
  --text-display-lg-line-height: 1.1;
  --text-display-lg-letter-spacing: -0.02em;

  --text-display-md-size: 36px;
  --text-display-md-weight: 700;
  --text-display-md-line-height: 1.2;
  --text-display-md-letter-spacing: -0.02em;

  --text-headline-lg-size: 30px;
  --text-headline-lg-weight: 600;
  --text-headline-lg-line-height: 1.3;
  --text-headline-lg-letter-spacing: -0.01em;

  --text-headline-md-size: 24px;
  --text-headline-md-weight: 600;
  --text-headline-md-line-height: 1.4;

  --text-body-lg-size: 18px;
  --text-body-lg-weight: 400;
  --text-body-lg-line-height: 1.6;

  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-line-height: 1.6;

  --text-label-lg-size: 14px;
  --text-label-lg-weight: 600;
  --text-label-lg-line-height: 1.2;
  --text-label-lg-letter-spacing: 0.01em;

  --text-label-md-size: 12px;
  --text-label-md-weight: 500;
  --text-label-md-line-height: 1.2;
  --text-label-md-letter-spacing: 0.02em;

  /* Rounded */
  --rounded-sm: 0.25rem;
  --rounded-DEFAULT: 0.5rem;
  --rounded-md: 0.75rem;
  --rounded-lg: 1rem;
  --rounded-xl: 1.5rem;
  --rounded-full: 9999px;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-gutter: 24px;
  --spacing-margin: 32px;
  --container-max-width: 1280px;
  --bento-gap: 16px;
  
  /* Shadow Elevation */
  --shadow-ambient: 0 4px 20px rgba(0, 0, 0, 0.04);
}

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

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  background-color: var(--color-background);
  color: var(--color-on-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* Typography Classes */
.display-lg { font-size: var(--text-display-lg-size); font-weight: var(--text-display-lg-weight); line-height: var(--text-display-lg-line-height); letter-spacing: var(--text-display-lg-letter-spacing); }
.display-md { font-size: var(--text-display-md-size); font-weight: var(--text-display-md-weight); line-height: var(--text-display-md-line-height); letter-spacing: var(--text-display-md-letter-spacing); }
.headline-lg { font-size: var(--text-headline-lg-size); font-weight: var(--text-headline-lg-weight); line-height: var(--text-headline-lg-line-height); letter-spacing: var(--text-headline-lg-letter-spacing); }
.headline-md { font-size: var(--text-headline-md-size); font-weight: var(--text-headline-md-weight); line-height: var(--text-headline-md-line-height); }
.body-lg { font-size: var(--text-body-lg-size); font-weight: var(--text-body-lg-weight); line-height: var(--text-body-lg-line-height); }
.body-md { font-size: var(--text-body-md-size); font-weight: var(--text-body-md-weight); line-height: var(--text-body-md-line-height); }
.label-lg { font-size: var(--text-label-lg-size); font-weight: var(--text-label-lg-weight); line-height: var(--text-label-lg-line-height); letter-spacing: var(--text-label-lg-letter-spacing); }
.label-md { font-size: var(--text-label-md-size); font-weight: var(--text-label-md-weight); line-height: var(--text-label-md-line-height); letter-spacing: var(--text-label-md-letter-spacing); }

/* Bento UI Utilities */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--bento-gap);
}

.bento-card {
  background-color: var(--color-surface-container-lowest);
  border-radius: var(--rounded-xl);
  padding: 24px;
  border: 1px solid var(--color-surface-variant);
  transition: box-shadow 0.3s ease;
  overflow: hidden;
}

.bento-card:hover {
  box-shadow: var(--shadow-ambient);
}

/* Button Classes */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: var(--rounded-full); /* Based on design reference */
  font-family: var(--font-family);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  font-size: var(--text-label-lg-size);
}

.btn-primary {
  background-color: var(--color-secondary);
  color: var(--color-on-secondary);
}

.btn-primary:hover {
  background-color: var(--color-secondary-container);
}

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

.btn-secondary:hover {
  background-color: var(--color-surface-container);
}

.btn-icon {
  background: var(--color-surface-container-lowest);
  border: 1px solid var(--color-surface-variant);
  border-radius: var(--rounded-md);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  font-size: 16px;
}

/* Base styles for anchors and lists */
a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Typography utilities */
.text-on-surface-variant { color: var(--color-on-surface-variant); }
.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
