/* ============================================================
   WILDZOS — base.css
   Tokens · Reset · Typography · Utilities
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Outfit:wght@500;600;700&display=swap');

/* ── Color Tokens ──────────────────────────────────────────── */
:root {
  /* Light mode (default) */
  --bg:        #F5F5F7;
  --surface:   #FFFFFF;
  --text:      #1D1D1F;
  --muted:     #6E6E73;
  --accent:    #0052cc;
  --accent-hover: #0047b3;
  --accent-active: #003d99;
  --accent-muted: rgba(0, 82, 204, 0.10);
  --border:    #E5E5EA;
  --sidebar:   #F5F5F7;

  --danger:    #FF3B30;
  --danger-muted: rgba(255, 59, 48, 0.10);
  --success:   #34C759;
  --success-muted: rgba(52, 199, 89, 0.10);
  --warning:   #FF9500;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.05);

  /* Radii */
  --radius-xs:  4px;
  --radius-sm:  6px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 28px;

  /* Spacing scale */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* Typography */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Outfit', 'Inter', sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* Transitions */
  --ease-ui:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-page: 300ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index scale */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal-backdrop: 300;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}

/* Dark mode */
html.dark {
  --bg:        #010409;
  --surface:   #0D1117;
  --text:      #E6EDF3;
  --muted:     #7D8590;
  --accent:    #0052cc;
  --accent-hover: #0047b3;
  --accent-active: #003d99;
  --accent-muted: rgba(0, 82, 204, 0.14);
  --border:    #30363D;
  --sidebar:   #0D1117;

  --danger:    #FF453A;
  --danger-muted: rgba(255, 69, 58, 0.12);
  --success:   #30D158;
  --success-muted: rgba(48, 209, 88, 0.12);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.20);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.40), 0 4px 8px rgba(0,0,0,0.20);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.50), 0 8px 16px rgba(0,0,0,0.30);
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
  min-height: 100vh;
}

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

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--leading-tight);
  color: var(--text);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* ── Typography scale ──────────────────────────────────────── */
.text-xs    { font-size: var(--text-xs); }
.text-sm    { font-size: var(--text-sm); }
.text-base  { font-size: var(--text-base); }
.text-md    { font-size: var(--text-md); }
.text-lg    { font-size: var(--text-lg); }
.text-xl    { font-size: var(--text-xl); }
.text-2xl   { font-size: var(--text-2xl); }
.text-3xl   { font-size: var(--text-3xl); }
.text-4xl   { font-size: var(--text-4xl); }
.text-5xl   { font-size: var(--text-5xl); }

.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }

.leading-tight   { line-height: var(--leading-tight); }
.leading-snug    { line-height: var(--leading-snug); }
.leading-normal  { line-height: var(--leading-normal); }
.leading-relaxed { line-height: var(--leading-relaxed); }

/* ── Color utilities ───────────────────────────────────────── */
.text-primary  { color: var(--text); }
.text-muted    { color: var(--muted); }
.text-accent   { color: var(--accent); }
.text-danger   { color: var(--danger); }
.text-success  { color: var(--success); }

.bg-base       { background-color: var(--bg); }
.bg-surface    { background-color: var(--surface); }
.bg-accent     { background-color: var(--accent); }

/* ── Spacing utilities ─────────────────────────────────────── */
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }

.px-2 { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3 { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-6 { padding-left: var(--space-6); padding-right: var(--space-6); }

.py-2 { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3 { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }

.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* ── Flex utilities ────────────────────────────────────────── */
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-row     { flex-direction: row; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.flex-shrink-0{ flex-shrink: 0; }

.items-start  { align-items: flex-start; }
.items-center { align-items: center; }
.items-end    { align-items: flex-end; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* ── Grid utilities ────────────────────────────────────────── */
.grid         { display: grid; }
.grid-2       { grid-template-columns: repeat(2, 1fr); }
.grid-3       { grid-template-columns: repeat(3, 1fr); }
.grid-auto    { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* ── Display utilities ─────────────────────────────────────── */
.block   { display: block; }
.inline  { display: inline; }
.inline-flex { display: inline-flex; }
.hidden  { display: none; }

/* ── Width / sizing ────────────────────────────────────────── */
.w-full  { width: 100%; }
.h-full  { height: 100%; }
.min-h-screen { min-height: 100dvh; min-height: 100vh; }

.max-w-sm  { max-width: 24rem; }
.max-w-md  { max-width: 28rem; }
.max-w-lg  { max-width: 32rem; }
.max-w-xl  { max-width: 36rem; }

/* ── Borders & radius ──────────────────────────────────────── */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-pill { border-radius: var(--radius-pill); }
.rounded-full { border-radius: 9999px; }

.border        { border: 1px solid var(--border); }
.border-accent { border-color: var(--accent); }
.border-danger { border-color: var(--danger); }

/* ── Overflow ──────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }

/* ── Position ──────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; }

.inset-0  { inset: 0; }
.top-0    { top: 0; }
.bottom-0 { bottom: 0; }
.left-0   { left: 0; }
.right-0  { right: 0; }

/* ── Opacity & visibility ──────────────────────────────────── */
.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-100 { opacity: 1; }

.pointer-events-none { pointer-events: none; }

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

/* ── Focus ring ────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--muted);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ── Selection ─────────────────────────────────────────────── */
::selection {
  background-color: var(--accent-muted);
  color: var(--text);
}

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

/* ── Safe area insets (mobile) ─────────────────────────────── */
.safe-top    { padding-top: env(safe-area-inset-top); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
.safe-left   { padding-left: env(safe-area-inset-left); }
.safe-right  { padding-right: env(safe-area-inset-right); }

/* ── MPA View Transitions ──────────────────────────────────── */
@view-transition {
  navigation: auto;
}

/* Sidebar stays put — browser treats it as a persistent element */
::view-transition-old(sidebar),
::view-transition-new(sidebar) {
  animation: none;
}

/* Main content fades and slides */
::view-transition-old(main-content) {
  animation: 160ms ease both vt-out;
}
::view-transition-new(main-content) {
  animation: 220ms ease both vt-in;
}

@keyframes vt-out {
  to { opacity: 0; transform: translateY(6px); }
}
@keyframes vt-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* Progress bar during navigation */
::view-transition-old(progress-bar),
::view-transition-new(progress-bar) {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(main-content),
  ::view-transition-new(main-content) { animation: none; }
}