/* ─────────────────────────────────────────────────────────────
   BARKR Global Styles
   Requires: variables.css, reset.css
───────────────────────────────────────────────────────────── */

/* ── Base ── */

body {
  font-family: var(--font-body);
  background-color: var(--c-bg);
  color: var(--c-text);
}

/* ── Typography ── */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--c-text);
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

p  { color: var(--c-text-2); line-height: 1.65; }

.display-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* ── Layout ── */

.container {
  width: 100%;
  max-width: var(--max-wide);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

.container-sm {
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

/* Authenticated app shell */
.app-shell {
  min-height: 100dvh;
  padding-top: var(--nav-top-h);
  padding-bottom: calc(var(--nav-bot-h) + env(safe-area-inset-bottom, 0px));
  background: var(--c-bg);
}

.page-content {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--s-6) var(--s-5) var(--s-10);
}

/* ── Utility classes ── */

.text-center  { text-align: center; }
.text-muted   { color: var(--c-text-3); font-size: .875rem; }
.text-small   { font-size: .8rem; }
.text-label   {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--c-primary);
}

.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2        { gap: var(--s-2); }
.gap-3        { gap: var(--s-3); }
.gap-4        { gap: var(--s-4); }

.mt-2  { margin-top: var(--s-2); }
.mt-3  { margin-top: var(--s-3); }
.mt-4  { margin-top: var(--s-4); }
.mt-6  { margin-top: var(--s-6); }
.mt-8  { margin-top: var(--s-8); }
.mb-4  { margin-bottom: var(--s-4); }
.mb-6  { margin-bottom: var(--s-6); }

.w-full { width: 100%; }

/* Prevent flash of unauthenticated content */
.auth-guard { visibility: hidden; }

/* ── Animations ── */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.anim-fade-in  { animation: fadeIn  var(--t-slow) var(--ease-out) both; }
.anim-fade-up  { animation: fadeUp  var(--t-slow) var(--ease-out) both; }
.anim-scale-in { animation: scaleIn var(--t-slow) var(--ease-bounce) both; }

/* Staggered children */
.anim-children > * { animation: fadeUp var(--t-slow) var(--ease-out) both; }
.anim-children > *:nth-child(1) { animation-delay: .05s; }
.anim-children > *:nth-child(2) { animation-delay: .10s; }
.anim-children > *:nth-child(3) { animation-delay: .15s; }
.anim-children > *:nth-child(4) { animation-delay: .20s; }
.anim-children > *:nth-child(5) { animation-delay: .25s; }