/*
 * Design tokens — Stryder
 * Single source of truth for the sketchy + emoji visual language.
 * See docs/04-design-system.md for usage guide.
 */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Caveat:wght@600;700&display=swap');

:root {
  /* ---------- Color palette ---------- */
  --ink: #2e2e2e;
  --paper: #f4ede0;
  --muted: #6b6b6b;
  --hairline: #ccc;
  --hairline-soft: #ddd;

  /* ---------- Atmospheric soft-contrast (v1 evolution) ---------- */
  --ink-soft: #5a5249;
  --paper-warm: #ebe2d3;
  --mist: #a8a098;
  --whisper: #d4ccbe;

  --accent: #d63a2f;          /* warning, opponent HP, red annotations */
  --good: #2f8f3a;            /* player HP, success */
  --gold: #c8941a;            /* currency, meetup multiplier */
  --gold-bg: #fff8e0;         /* gold-tinted card backgrounds */
  --energy: #4a8fd1;          /* energy bars */
  --shield-bg: #d8e8ff;       /* shield button background */
  --sprite-bg: #f4ede0;       /* emoji-sprite container background */
  --surface: white;           /* card / control surface on paper */
  --paper-stripe: #f0e8d8;    /* alternating map stripe, inline code bg */
  --disabled: #aaa;           /* disabled text, dim controls */
  --battle-bg-warm: #ffe8e8;  /* battle atmosphere gradient top */
  --battle-bg-cool: #e8f0ff;  /* battle atmosphere gradient bottom */
  --surface-translucent: rgba(255, 255, 255, 0.5); /* semi-opaque battle scene overlay */
  --shadow: #6f4ea3;          /* Shadow Pokémon highlight — muted purple */
  --shadow-bg: rgba(111, 78, 163, 0.10); /* Shadow Pokémon row tint (10% opacity) */
  --backdrop-bg: rgba(46, 46, 46, 0.60); /* modal overlay scrim (--ink at 60%) */

  /* ---------- House palette (v1 evolution — 4 houses × primary/accent/deep) ---------- */
  --house-elemental-primary: #c97b5a;
  --house-elemental-accent:  #5a8b7e;
  --house-elemental-deep:    #3d3530;
  --house-aether-primary:    #b9c5cd;
  --house-aether-accent:     #6c7984;
  --house-aether-deep:       #1f2a35;
  --house-verdant-primary:   #7a8a5a;
  --house-verdant-accent:    #a07845;
  --house-verdant-deep:      #2d3520;
  --house-eldritch-primary:  #4a4565;
  --house-eldritch-accent:   #8a5a3a;
  --house-eldritch-deep:     #1a1525;

  /* Battle overlay layout (action bar + switch modal) */
  --action-bar-h: 100px;           /* battle action bar height (thumb zone) */
  --action-bar-side-btn-w: 90px;   /* switch / charged button column width */

  /* ---------- Typography ---------- */
  --font-body: 'Patrick Hand', system-ui, sans-serif;
  --font-heading: 'Caveat', cursive;
  --fs-tiny: 12px;    /* pin labels, compact badges */
  --fs-small: 13px;
  --fs-pill: 14px;    /* pills, move rows, ladder rows */
  --fs-body: 16px;
  --fs-medium: 18px;
  --fs-h3: 22px;      /* h3 heading */
  --fs-large: 24px;
  --fs-sprite: 26px;      /* sprite emoji glyph (normal) */
  --fs-sprite-lg: 40px;   /* sprite emoji glyph (large) */
  --fs-h2: 28px;      /* h2 heading */
  --fs-h2-alt: 30px;  /* larger section heading */
  --fs-big: 36px;
  --fs-h1: 42px;
  --fs-huge: 56px;
  --fs-emoji-xl: 64px;    /* oversized emoji glyphs (Phaser battle scene) */
  --tracking-caps: 0.03em; /* uppercase label letter-spacing */

  /* ---------- Borders ---------- */
  --border-real: 1.5px solid var(--ink);
  --border-rough: 1.5px dashed var(--disabled);
  --border-soft: 1px solid var(--ink-soft);
  --border-hairline: 1px solid var(--mist);
  --border-house-elemental: 2px solid var(--house-elemental-accent);
  --border-house-aether:    2px solid var(--house-aether-accent);
  --border-house-verdant:   2px solid var(--house-verdant-accent);
  --border-house-eldritch:  2px solid var(--house-eldritch-accent);
  --border-accent: 1.5px solid var(--accent);
  --border-gold: 1.5px solid var(--gold);
  --border-frame: 2px solid var(--ink);              /* outer phone / notes frame */
  --border-hair: 1px solid var(--ink);               /* hairline ink border (bars, pin labels) */
  --border-divider: 1px dashed var(--hairline-soft); /* list row divider */
  --border-section: 2px dashed var(--hairline);      /* heavier section separator (legend) */
  --border-flow-frame: 2px dashed var(--disabled);   /* flow-diagram outer frame */
  --border-accent-hair: 1px solid var(--accent);     /* 1px hairline accent (badges, pills) */
  --border-accent-chunky: 4px solid var(--accent);   /* row-level accent indicator */

  --radius-xs: 4px;        /* tiny radius (inline code, pin labels) */
  --radius-small: 6px;
  --radius-nav: 8px;       /* nav tab active indicator */
  --radius-md: 10px;
  --radius-sprite: 12px;   /* sprite containers, notes, map */
  --radius-flow: 16px;     /* flow diagram container */
  --radius-lg: 18px;
  --radius-phone: 32px;
  --radius-pill: 999px;

  /* The "offset paper shadow" — top-level cards only */
  --shadow-paper: 4px 4px 0 var(--ink);

  /* ---------- Spacing ---------- */
  --space-2xs: 2px;    /* micro gap (tight stat rows) */
  --space-xs: 4px;
  --space-sm: 6px;
  --space-xs2: 8px;    /* compact gap */
  --space-md: 10px;
  --space-sm2: 12px;   /* small-medium gap / inner padding */
  --space-lg: 14px;
  --space-lg2: 16px;   /* medium-large gap */
  --space-xl2: 20px;   /* section padding */
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 80px;   /* page bottom clearance */
}

/* ---------- Base ---------- */
html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  margin: 0 0 var(--space-md);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); color: var(--muted); }
h3 { font-size: var(--fs-h3); }

.muted { color: var(--muted); font-size: var(--fs-small); }
.small { font-size: var(--fs-small); }
.big { font-size: var(--fs-big); font-family: var(--font-heading); line-height: 1; }
.huge { font-size: var(--fs-huge); font-family: var(--font-heading); line-height: 1; }
.center { text-align: center; }

.row { display: flex; gap: var(--space-md); align-items: center; }
.col { display: flex; flex-direction: column; gap: var(--space-sm); }
.between { display: flex; justify-content: space-between; align-items: center; }

/* ---------- Phone frame (top-level prototype card) ---------- */
.phone {
  border: var(--border-frame);
  border-radius: var(--radius-phone);
  padding: var(--space-lg) var(--space-sm2) var(--space-lg);
  background: var(--surface);
  box-shadow: var(--shadow-paper);
  position: relative;
}
.phone::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  background: var(--ink);
  border-radius: 3px;
}

.screen {
  border: var(--border-rough);
  border-radius: var(--radius-lg);
  min-height: 560px;
  padding: var(--space-lg) var(--space-sm2);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

.screen-name {
  font-family: var(--font-heading);
  font-size: var(--fs-large);
  text-align: center;
  color: var(--muted);
  margin-top: -6px;
}

/* ---------- Pills, boxes, badges ---------- */
.pill {
  display: inline-block;
  border: var(--border-real);
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: var(--fs-pill);
}

.box {
  border: var(--border-real);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.box.rough { border-style: dashed; }
.box.gold { border-color: var(--gold); background: var(--gold-bg); }
.box.accent { border-color: var(--accent); }

/* ---------- Bars (HP, energy) ---------- */
.bar {
  height: 10px;
  border: var(--border-hair);
  border-radius: var(--radius-small);
  overflow: hidden;
  background: var(--surface);
}
.bar > span { display: block; height: 100%; }
.bar.hp > span { background: var(--good); }
.bar.energy > span { background: var(--energy); }
.bar.opp-hp > span { background: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  border: var(--border-real);
  border-radius: var(--radius-md);
  padding: var(--space-xs2) var(--space-md);
  text-align: center;
  background: var(--surface);
  cursor: pointer;
  user-select: none;
}
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.lit { background: var(--gold-bg); box-shadow: 0 0 0 2px var(--gold) inset; }
.btn.dim { color: var(--disabled); border-style: dashed; cursor: not-allowed; }
.btn.shield { background: var(--shield-bg); }

/* ---------- Sprites (emoji-as-icon) ---------- */
.sprite {
  width: 56px;
  height: 56px;
  border: var(--border-real);
  border-radius: var(--radius-sprite);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sprite);
  background: var(--sprite-bg);
  flex-shrink: 0;
}
.sprite.lg { width: 84px; height: 84px; font-size: var(--fs-sprite-lg); }

/* ---------- Cards ---------- */
.character-card { display: flex; align-items: center; gap: var(--space-md); }

/* ---------- Annotations ---------- */
.annotation {
  font-family: var(--font-heading);
  color: var(--accent);
  font-size: var(--fs-medium);
  line-height: 1.2;
}

/* ---------- Nav (bottom tab bar) ---------- */
.nav-tab {
  text-align: center;
  font-size: var(--fs-small);
  padding: var(--space-xs) 2px;
  border-radius: var(--radius-nav);
}
.nav-tab.active { background: var(--ink); color: var(--paper); }

.screen-foot {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-xs);
  padding-top: var(--space-md);
  border-top: var(--border-soft);
}