/* =============================================================
 * 2high.games · design tokens
 * Color, type, spacing, radius, shadow, motion.
 * Plus semantic class helpers (.h1, .body, .mono, etc).
 * ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700;9..144,800&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600&family=Press+Start+2P&display=swap');

:root {
  /* -------- COLORS -------- */

  /* Earth greens · primary brand */
  --leaf-50:  #F1F4EC;
  --leaf-100: #E2E9D6;
  --leaf-200: #C4D2AC;
  --leaf-300: #9DB47E;
  --leaf-400: #76935A;
  --leaf-500: #557342;   /* primary */
  --leaf-600: #425C34;
  --leaf-700: #344828;
  --leaf-800: #26341D;
  --leaf-900: #182212;   /* near-black ink for borders */

  /* Smoke neutrals · warm-cool grays */
  --smoke-50:  #F8F5EC;
  --smoke-100: #EFEADC;
  --smoke-200: #E1DBC9;
  --smoke-300: #C7C0AE;
  --smoke-400: #97907E;
  --smoke-500: #6E6857;
  --smoke-600: #4D4839;
  --smoke-700: #34302A;
  --smoke-800: #211E1A;
  --smoke-900: #12100D;

  /* Paper · page background tints */
  --paper:      #F4EFE2;
  --paper-deep: #EBE3CD;
  --paper-cream: #FBF7EB;

  /* Accent · single high-energy hit */
  --ember:      #D9602B;
  --ember-soft: #F2A075;
  --ember-deep: #A8431B;

  /* Semantic */
  --success:    #4F8C4A;
  --warn:       #C99524;
  --danger:     #B23E2E;
  --info:       #4F7A8C;

  /* Functional aliases (foreground/background semantic) */
  --bg:        var(--paper);
  --bg-deep:   var(--paper-deep);
  --bg-inverse: var(--leaf-900);
  --fg-1:      var(--smoke-900);    /* primary text */
  --fg-2:      var(--smoke-700);    /* secondary text */
  --fg-3:      var(--smoke-500);    /* meta / quiet */
  --fg-4:      var(--smoke-400);    /* placeholder */
  --fg-on-leaf: var(--paper-cream); /* text on leaf backgrounds */
  --line:      var(--smoke-200);
  --line-strong: var(--smoke-300);
  --line-pixel: var(--leaf-900);

  /* -------- TYPE -------- */
  --font-display: 'Fraunces', 'Recoleta', Georgia, serif;       /* hero, big headings */
  --font-body:    'DM Sans', 'General Sans', system-ui, sans-serif; /* default UI */
  --font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace; /* IPs, code */
  --font-pixel:   'Press Start 2P', monospace;                  /* tiny pixel labels only */

  /* Type scale */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;

  /* Line heights */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-body:  1.55;
  --lh-loose: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-pixel:  0.08em;  /* uppercase tiny labels */

  /* -------- SPACING -------- (8-px base, 4-px half) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* -------- RADII -------- */
  --radius-none: 0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* -------- SHADOWS -------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(40,30,20,0.06), 0 4px 12px rgba(40,30,20,0.05);
  --shadow-2: 0 4px 8px rgba(40,30,20,0.08), 0 16px 32px rgba(40,30,20,0.08);
  --shadow-3: 0 8px 16px rgba(40,30,20,0.10), 0 32px 64px rgba(40,30,20,0.12);
  /* Hard pixel-block shadow · paired with .pixel-* components only */
  --shadow-pixel:    4px 4px 0 0 var(--leaf-900);
  --shadow-pixel-sm: 2px 2px 0 0 var(--leaf-900);

  /* -------- MOTION -------- */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-pixel: steps(2, end);  /* chunky stepped feel for pixel toggles */
  --dur-fast: 180ms;
  --dur-mid:  320ms;
  --dur-slow: 600ms;

  /* -------- BORDERS (named widths) -------- */
  --bw-hair:  1px;
  --bw-card:  2px;
  --bw-pixel: 3px;

  /* -------- ICON -------- */
  --icon-stroke: 1.75;
  --icon-size: 20px;
}

/* =============================================================
 * Reset-ish + base
 * ============================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }

/* =============================================================
 * Semantic type tags / classes
 * Use as: <h1 class="display"> or just <h1>: both work.
 * ============================================================= */

/* Display headlines (hero) */
h1, .h1, .display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(var(--fs-40), 6vw + 1rem, var(--fs-72));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(var(--fs-32), 3vw + 0.8rem, var(--fs-56));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  margin: 0 0 var(--space-2);
}

p, .body { font-size: var(--fs-16); line-height: var(--lh-body); margin: 0 0 var(--space-4); }
.body-lg { font-size: var(--fs-18); line-height: var(--lh-body); }
.body-sm { font-size: var(--fs-14); line-height: var(--lh-body); }
.meta    { font-size: var(--fs-12); line-height: var(--lh-snug); color: var(--fg-3); }

/* Eyebrow · tiny uppercase label over headings */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--leaf-600);
  margin: 0 0 var(--space-2);
}

/* Pixel label · sparingly */
.pixel-label {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: var(--tracking-pixel);
  text-transform: uppercase;
  line-height: 1.4;
}

code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
}

a {
  color: var(--leaf-600);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}
a:hover { color: var(--leaf-700); text-decoration: underline; text-underline-offset: 4px; }

hr.rule { border: 0; border-top: 1px solid var(--line); margin: var(--space-7) 0; }
hr.rule-strong { border: 0; border-top: 2px solid var(--line-strong); margin: var(--space-7) 0; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* Pixelated image rendering for sprites */
.pixelated, [data-pixel] { image-rendering: pixelated; image-rendering: crisp-edges; }