/*
 * FootClaw — Base styles
 * Reset + global typography + layout primitives
 */

/* ====== Reset ====== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-base);
  min-height: 100vh;
  position: relative;
  transition: background-color var(--duration-default) var(--easing-default),
              color var(--duration-default) var(--easing-default);
}

/* ====== Background pattern: subtle grid + radial brand glow ====== */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  background-position: 0 0, 0 0;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Soft brand atmosphere — pushed below the sticky header band so the
     nav keeps a clean opaque background, then a gentle low bloom for depth. */
  background:
    radial-gradient(ellipse 75% 45% at 50% 140px, rgba(220, 38, 38, 0.13) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% bottom, rgba(220, 38, 38, 0.08) 0%, transparent 70%);
}

/* Light theme */
:root[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
}

input, textarea, select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* ====== Typography ====== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--font-bold);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h1 { font-size: var(--text-5xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

.tabular {
  font-variant-numeric: tabular-nums;
}

.mono {
  font-family: var(--font-mono);
}

.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-brand { color: var(--brand-primary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }

/* ====== Layout ====== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* Safe-area handling for Capacitor native (notch, dynamic island) */
html.fc-native body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
html.fc-native .site-header { padding-top: env(safe-area-inset-top); }
html.fc-native .mobile-bottom-nav {
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
}
html.fc-native .ticker-bar { top: calc(72px + env(safe-area-inset-top)); }
html.fc-native .live-strip { top: calc(72px + env(safe-area-inset-top)); }

/* Hide PWA install banner on native — already installed */
html.fc-native .fc-pwa-banner { display: none !important; }

/* Keyboard space — pushed up when keyboard shown on iOS */
html.fc-native body { padding-bottom: max(env(safe-area-inset-bottom), var(--keyboard-h, 0px)); }

@media (max-width: 768px) {
  .container { padding-inline: var(--space-4); }
}

/* ====== Utilities ====== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Hide visually but keep for screen readers */
.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;
}