/*
 * Platform Utilities - Font Loading
 * Google Fonts and typography configuration
 * Version: 1.0.0
 */

/* Modern Font Stack - Inter Variable Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Font Display Optimization */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyeMZhrib2Bg-4.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Typography Scale */
:root {
  /* Modern type scale (1.250 - Major Third) */
  --type-scale-ratio: 1.250;
  
  /* Base font settings */
  --base-font-size: 16px;
  --base-line-height: 1.5;
  
  /* Responsive font scaling */
  --font-scale-sm: 0.875;  /* 14px */
  --font-scale-md: 1;      /* 16px */
  --font-scale-lg: 1.125;  /* 18px */
  --font-scale-xl: 1.25;   /* 20px */
}

/* Modern Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-sans);
  line-height: 1.2;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--color-text-primary);
  font-weight: var(--font-semibold);
}

h1 {
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  letter-spacing: -0.05em;
}

h2 {
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
}

h3 {
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
}

h4 {
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
}

h5 {
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
}

h6 {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text-secondary);
}

/* Body Text */
p {
  font-family: var(--font-family-sans);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Links */
a {
  color: var(--color-brand);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

a:hover:not(.btn):not(button) {
  color: var(--color-brand-dark);
  text-decoration: none;
  transform: translateY(-1px);
}

/* Ensure buttons never get link styles */
button,
.btn,
button:hover,
.btn:hover {
  text-decoration: none !important;
}

/* Ensure primary buttons have white text */
.btn-primary,
.btn-primary:hover,
.btn-danger,
.btn-danger:hover,
.btn-destructive,
.btn-destructive:hover {
  color: white !important;
}

a:focus {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Code and preformatted text */
code, kbd, samp {
  font-family: var(--font-family-mono);
  font-size: 0.875em;
  background-color: var(--color-surface-subtle);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-weight: var(--font-weight-medium);
}

pre {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
  background-color: var(--color-text-primary);
  color: var(--color-text-inverse);
  padding: 1rem;
  border-radius: var(--radius-lg);
  overflow-x: auto;
  line-height: var(--line-height-relaxed);
}

pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* Lists */
ul, ol {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  margin: 0 0 1rem 0;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.25rem;
}

/* Blockquotes */
blockquote {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-lg);
  font-style: italic;
  line-height: var(--line-height-relaxed);
  color: var(--color-text-secondary);
  border-left: 4px solid var(--color-brand);
  padding-left: 1rem;
  margin: 1.5rem 0;
}

/* Small text */
small {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

/* Strong and emphasis */
strong, b {
  font-weight: var(--font-weight-bold);
}

em, i {
  font-style: italic;
}

/* Mark/highlight */
mark {
  background-color: var(--color-warning-muted);
  color: var(--color-warning-dark);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
}

/* Responsive Typography */
@media (max-width: 640px) {
  h1 { font-size: var(--font-size-3xl); }
  h2 { font-size: var(--font-size-2xl); }
  h3 { font-size: var(--font-size-xl); }
  h4 { font-size: var(--font-size-lg); }
}

@media (min-width: 1024px) {
  h1 { font-size: var(--font-size-5xl); }
  h2 { font-size: var(--font-size-4xl); }
}