/* =============================================================================
 *  DESIGN TOKENS — the single source of truth for the visual language.
 *  Palette is drawn straight from the game: forest green, sunset ember,
 *  night violet, earthen brown, parchment light.
 * ===========================================================================*/
:root {
  /* ---- Brand / accent ---- */
  --c-ember:        #ff8a3d;   /* torch & sunset — primary accent */
  --c-ember-deep:   #e8551f;
  --c-ember-glow:   #ffb15c;
  --c-amber:        #ffd27a;

  --c-forest:       #6fbf3f;   /* grass — secondary accent */
  --c-forest-deep:  #3c7a28;
  --c-moss:         #2c4a1f;

  --c-sky:          #8fc7e8;
  --c-violet:       #4a3a6b;   /* night sky */
  --c-violet-deep:  #2a2140;

  /* ---- Surfaces (deep forest night) ---- */
  --c-bg:           #0a0f0c;
  --c-bg-2:         #0d130e;
  --c-surface:      #121a14;
  --c-surface-2:    #18211a;
  --c-surface-3:    #1f2a20;
  --c-line:         rgba(255, 255, 255, 0.08);
  --c-line-strong:  rgba(255, 255, 255, 0.16);

  /* ---- Text ---- */
  --c-text:         #eef2e8;
  --c-text-soft:    #b9c4b4;
  --c-text-mute:    #7e8c79;
  --c-text-ink:     #0a0f0c;

  /* ---- Gradients ---- */
  --grad-ember:     linear-gradient(135deg, var(--c-ember-glow), var(--c-ember-deep));
  --grad-forest:    linear-gradient(135deg, var(--c-forest), var(--c-forest-deep));
  --grad-dawn:      linear-gradient(120deg, var(--c-amber) 0%, var(--c-ember) 40%, var(--c-violet) 100%);
  --grad-surface:   linear-gradient(180deg, var(--c-surface-2), var(--c-surface));
  --grad-text:      linear-gradient(180deg, #fff 0%, #d6e0cf 100%);

  /* ---- Typography ---- */
  --font-display: "Segoe UI", "SF Pro Display", system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  /* fluid type scale (clamp: min, vw, max) */
  --fs-hero:   clamp(2.7rem, 7.8vw, 7.4rem);
  --fs-h1:     clamp(2.4rem, 5.5vw, 4.6rem);
  --fs-h2:     clamp(2rem, 4vw, 3.4rem);
  --fs-h3:     clamp(1.25rem, 2vw, 1.6rem);
  --fs-lead:   clamp(1.05rem, 1.6vw, 1.35rem);
  --fs-body:   1rem;
  --fs-sm:     0.875rem;
  --fs-xs:     0.78rem;

  --tracking-wide: 0.22em;

  /* ---- Spacing / layout ---- */
  --container:  1240px;
  --container-narrow: 880px;
  --gutter:     clamp(1.25rem, 4vw, 3rem);
  --section-y:  clamp(4.5rem, 10vw, 9rem);

  /* ---- Radius / shadow ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  --sh-sm:  0 2px 10px rgba(0,0,0,.35);
  --sh-md:  0 12px 40px rgba(0,0,0,.45);
  --sh-lg:  0 30px 80px rgba(0,0,0,.55);
  --sh-ember: 0 10px 40px rgba(255, 110, 40, .35);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: .2s;
  --t-med:  .4s;
  --t-slow: .8s;

  --nav-h: 76px;
  --z-nav: 100;
  --z-overlay: 200;
  --z-preloader: 300;
}