/* base.css — Reset, typography, and CSS custom property definitions
   All theme-specific values are overridden in themes/expedition.css       */

/* ── Reset ──────────────────────────────────────────────────────────────── */

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

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  height: 100%;
  overflow: hidden;            /* Each screen scrolls internally */
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  -webkit-tap-highlight-color: transparent;
}

input, label {
  cursor: pointer;
}

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

ul, ol {
  list-style: none;
}

/* ── CSS Custom Properties — Default Values ──────────────────────────────
   All properties defined here. Theme files override only what they need.  */

:root {
  /* Colors — background */
  --color-bg:             #1a1a1a;
  --color-bg-surface:     #2a2a2a;
  --color-bg-raised:      #333333;

  /* Colors — text */
  --color-text:           #f0ece0;
  --color-text-muted:     #a09880;
  --color-text-inverse:   #1a1a1a;

  /* Colors — card box types */
  --color-event:          #d4a843;    /* yellow */
  --color-event-bg:       rgba(212, 168, 67, 0.12);
  --color-choice:         #c0392b;    /* red */
  --color-choice-bg:      rgba(192, 57, 43, 0.12);
  --color-option:         #5b8dd9;    /* blue */
  --color-option-bg:      rgba(91, 141, 217, 0.12);

  /* Colors — resources */
  --color-food:           #6aaa5c;
  --color-ammo:           #c0a050;
  --color-health:         #e05050;

  /* Colors — expertise */
  --color-jungle:         #4a9a4a;
  --color-navigation:     #4a7ab5;
  --color-camping:        #8a6a30;

  /* Colors — UI accents */
  --color-accent:         #d4a843;
  --color-border:         rgba(255,255,255,0.12);
  --color-border-strong:  rgba(255,255,255,0.25);

  /* Colors — state */
  --color-pawn:           #f5e9c8;
  --color-dead:           #444444;

  /* Typography */
  --font-display:         Georgia, 'Times New Roman', serif;
  --font-body:            -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:            'SF Mono', 'Fira Code', Consolas, monospace;

  --text-xs:              0.6875rem;   /* 11px */
  --text-sm:              0.75rem;     /* 12px */
  --text-base:            0.875rem;    /* 14px */
  --text-md:              1rem;        /* 16px */
  --text-lg:              1.125rem;    /* 18px */
  --text-xl:              1.375rem;    /* 22px */
  --text-2xl:             1.75rem;     /* 28px */
  --text-3xl:             2.25rem;     /* 36px */

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;

  /* Radii */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Card */
  --card-border-radius: var(--radius-lg);
  --card-bg:            #f5e9c8;
  --card-text:          #2a1a0a;
  --card-shadow:        0 4px 20px rgba(0,0,0,0.5);

  /* Transitions */
  --transition-fast:   120ms ease;
  --transition-normal: 220ms ease;
  --transition-slow:   380ms ease;

  /* Z-index layers */
  --z-base:    0;
  --z-card:    10;
  --z-overlay: 100;
  --z-modal:   200;
}

/* ── Utility: visually hidden (accessible) ─────────────────────────────── */
.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;
}

/* ── Icon helper ────────────────────────────────────────────────────────── */
.icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* SVG use-based icons */
.icon svg,
.icon use {
  width: 100%;
  height: 100%;
}