/* ======================================================
   GLOBAL
   ====================================================== */

body {
  margin: 0;
  font-family: Inter, system-ui, sans-serif;

  /* Responsive Breakpoints */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1025px;

  /* Core palette */
  --ink: #111;
  --paper: #fff;
  --surface: #f5f5f5;
  --hairline: #e5e5e5;
  --hairline-2: #eee;
  --muted: #555;
  --muted-2: #999;

  /* Shadow system (replaces old shadow-soft / shadow-lift) */
  --shadow-color: 0, 0, 0;
  --shadow-elev-1:
    0 1px 3px rgba(var(--shadow-color), 0.12),
    0 1px 2px rgba(var(--shadow-color), 0.08);
  --shadow-elev-2:
    0 6px 14px rgba(var(--shadow-color), 0.16),
    0 2px 4px rgba(var(--shadow-color), 0.10);

  /* Card tokens */
  --card-width: min(85vw, 350px);
  --card-padding: 1rem 1.05rem 1.25rem;
  --card-border: 1px solid var(--hairline-2);
  --card-top-rule: 2px solid var(--ink);
  --card-shadow: var(--shadow-elev-1);
  --card-shadow-hover: var(--shadow-elev-2);
  --card-media-border: 1px solid #e8e8e8;
  --card-media-bg: #fafafa;
  --card-media-padding: 0.45rem;

  /* Existing globals */
  background: var(--surface);
  color: var(--ink);
  --site-header-height: 64px;
  --nav-bg-alpha: 0;
  --carousel-gutter: 15px;
  --controls-right: 1rem;
  --controls-bottom: 3rem;
  --caption-bottom: 0.85rem;
  --controls-hit: 56px;
  --controls-icon: 50px;
  --controls-stroke: 3.25px;
  --controls-shadow: 0 10px 24px rgba(0,0,0,0.0);
  --controls-sphere-bg: rgba(255, 255, 255, 0.0);
  --controls-sphere-border: rgba(255, 255, 255, 0.8);
  --controls-glyph: rgba(255, 255, 255, 0.8);

  /* Mobile-First Responsive Variables */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  
  /* Mobile-first container and layout */
  --container-padding: var(--spacing-sm);
  --content-max-width: 100%;
  --touch-target-min: 44px;
}

main {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: block;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--site-header-height);
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-200%);
  padding: 0.85rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  border-radius: 4px;
  z-index: 40000000;
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

main:focus {
  outline: none;
}

/* Optional: subtly soften media background with your mix */
@supports (background: color-mix(in srgb, #fff, #000)) {
  body {
    --card-media-bg: color-mix(in srgb, var(--paper), var(--surface) 55%);
  }
}

/* =========================
   TEXT-ONLY MODE
   ========================= */

body.text-only img,
body.text-only figure,
body.text-only .carousel,
body.text-only .card-media,
body.text-only .post-hero,
body.text-only .lightbox-main {
  display: none !important;
}

/* =========================
   RESPONSIVE ARCHITECTURE
   ========================= */

/* Tablet and up */
@media (min-width: 769px) {
  body {
    --container-padding: var(--spacing-md);
    --spacing-lg: 2.5rem;
    --spacing-xl: 4rem;
  }
}

/* Desktop and up */
@media (min-width: 1025px) {
  body {
    --container-padding: var(--spacing-lg);
    --content-max-width: 1200px;
    --spacing-xl: 5rem;
  }
}

/* Mobile-first utility classes */
.container {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.touch-target {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
}

/* Responsive text sizing */
.text-responsive {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

.heading-responsive {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

/* Hide/show utilities for responsive design */
.mobile-only {
  display: block;
}

.tablet-up {
  display: none;
}

.desktop-only {
  display: none;
}

@media (min-width: 769px) {
  .mobile-only {
    display: none;
  }
  
  .tablet-up {
    display: block;
  }
}

@media (min-width: 1025px) {
  .desktop-only {
    display: block;
  }
}