/* soPerlage — Custom Styles + Tailwind v3 Arbitrary Value Polyfill */
/* Tailwind v2 pre-built CSS handles standard utilities (flex, grid, py-4, etc.) */
/* This file adds: custom design tokens, v3 arbitrary-value classes, typography */

/* ══════════ Font Families ══════════ */
.font-heading {
  font-family: 'Playfair Display', Georgia, serif;
}
.font-body {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
}
body {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.75;
}

/* ══════════ Background Colors ══════════ */
.bg-\[\#1B1F3B\] { background-color: #1B1F3B; }
.bg-\[\#C49A6C\] { background-color: #C49A6C; }
.bg-\[\#F5EDE4\] { background-color: #F5EDE4; }
.bg-\[\#FAF8F5\] { background-color: #FAF8F5; }
.hover\:bg-\[\#8B6F4E\]:hover { background-color: #8B6F4E; }
.hover\:bg-\[\#F5EDE4\]:hover { background-color: #F5EDE4; }
.focus\:bg-\[\#C49A6C\]:focus { background-color: #C49A6C; }
.group:hover .group-hover\:bg-\[\#F5EDE4\] { background-color: #F5EDE4; }

/* ══════════ Text Colors ══════════ */
.text-\[\#1B1F3B\] { color: #1B1F3B; }
.text-\[\#2C2C2C\] { color: #2C2C2C; }
.text-\[\#7A7A7A\] { color: #7A7A7A; }
.text-\[\#C49A6C\] { color: #C49A6C; }
.text-\[\#E8E4DF\] { color: #E8E4DF; }
.text-\[\#FAF8F5\] { color: #FAF8F5; }
.hover\:text-\[\#8B6F4E\]:hover { color: #8B6F4E; }
.hover\:text-\[\#C49A6C\]:hover { color: #C49A6C; }
.hover\:text-\[\#FAF8F5\]:hover { color: #FAF8F5; }
.group:hover .group-hover\:text-\[\#C49A6C\] { color: #C49A6C; }
.focus\:text-\[\#FAF8F5\]:focus { color: #FAF8F5; }

/* ══════════ Border Colors ══════════ */
.border-\[\#2D3250\] { border-color: #2D3250; }
.border-\[\#C49A6C\] { border-color: #C49A6C; }
.border-\[\#E8E4DF\] { border-color: #E8E4DF; }
.hover\:border-\[\#C49A6C\]:hover { border-color: #C49A6C; }

/* ══════════ Max Width / Min Width ══════════ */
.max-w-\[1200px\] { max-width: 1200px; }
.max-w-\[300px\] { max-width: 300px; }
.max-w-\[600px\] { max-width: 600px; }
.max-w-\[800px\] { max-width: 800px; }
.max-w-\[900px\] { max-width: 900px; }
.min-w-\[200px\] { min-width: 200px; }

/* ══════════ Aspect Ratio ══════════ */
.aspect-\[16\/10\] { aspect-ratio: 16/10; }
.aspect-\[4\/3\] { aspect-ratio: 4/3; }

/* ══════════ Text Size ══════════ */
.text-\[1\.0625rem\] { font-size: 1.0625rem; }

/* ══════════ Line Height ══════════ */
.leading-\[1\.75\] { line-height: 1.75; }

/* ══════════ Border Width ══════════ */
.border-l-\[3px\] { border-left-width: 3px; }

/* ══════════ Focus States ══════════ */
.focus\:outline-\[\#C49A6C\]:focus { outline-color: #C49A6C; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #C49A6C;
  outline-offset: 2px;
}

/* ══════════ Line Clamp ══════════ */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ══════════ Transitions (Tailwind v2 lacks duration-400) ══════════ */
.duration-400 { transition-duration: 400ms; }

/* ══════════ Card Hover Effects ══════════ */
.group:hover .group-hover\:scale-105 {
  transform: scale(1.05);
}
img {
  max-width: 100%;
  height: auto;
  transition: transform 0.4s ease;
}

/* ══════════ Article Typography ══════════ */
article p { margin-bottom: 1.5rem; }
article h2 { margin-top: 2.5rem; }
article h3 { margin-top: 2rem; }
blockquote p { margin: 0; }

/* ══════════ Code ══════════ */
pre code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.875rem;
}

/* ══════════ Responsive Overrides ══════════ */
@media (max-width: 767px) {
  .md\:float-right { float: none; }
  .md\:max-w-\[33\%\] { max-width: 100%; }
}

/* ══════════ Reduced Motion ══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ══════════ Print ══════════ */
@media print {
  header, footer, nav, .no-print { display: none !important; }
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
}