/* ================================================================
   PIGANISFM — DESIGN TOKENS (Web Edition)
   ----------------------------------------------------------------
   Mirrors the in-game design system. Self-hosted fonts (DSGVO-safe).
   Replace .ttf with .woff2 for production — see README.md.
   ================================================================ */

/* ----- FONTS (self-hosted, OFL 1.1) ------------------------------ */
@font-face { font-family: 'Bebas Neue';       src: url('../fonts/BebasNeue-Regular.ttf')        format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow';           src: url('../fonts/Barlow-Regular.ttf')           format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow';           src: url('../fonts/Barlow-Medium.ttf')            format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow';           src: url('../fonts/Barlow-SemiBold.ttf')          format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow';           src: url('../fonts/Barlow-Bold.ttf')              format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/BarlowCondensed-Medium.ttf')   format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/BarlowCondensed-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url('../fonts/BarlowCondensed-Bold.ttf')     format('truetype'); font-weight: 700; font-display: swap; }

:root {
  /* === COLORS — GRASS (primary) === */
  --pfm-grass-900: #0d261a;
  --pfm-grass-800: #143d2a;
  --pfm-grass-700: #1a5038;
  --pfm-grass-600: #1f6344;
  --pfm-grass-500: #257750;
  --pfm-grass-400: #2d8a5c;
  --pfm-grass-300: #4aa876;
  --pfm-grass-200: #7ac49e;
  --pfm-grass-100: #b5e0c8;
  --pfm-grass-50:  #e5f5ec;

  /* === COLORS — GOLD (accent) === */
  --pfm-gold-700: #9a7d1a;
  --pfm-gold-600: #b8951f;
  --pfm-gold-500: #d4af37;
  --pfm-gold-400: #e0c255;
  --pfm-gold-300: #ebd477;
  --pfm-gold-200: #f3e4a3;
  --pfm-gold-100: #f9f0cc;

  /* === SEMANTIC === */
  --pfm-success: #34d058;
  --pfm-warning: #f0a020;
  --pfm-danger:  #e54545;
  --pfm-info:    #4a9eff;

  /* === BACKGROUNDS === */
  --pfm-bg-base:    #2a5a40;
  --pfm-bg-darker:  #224a35;
  --pfm-bg-lighter: #356b4d;

  /* === SURFACES (translucent on grass) === */
  --pfm-surface-card:     rgba(255, 255, 255, 0.09);
  --pfm-surface-elevated: rgba(255, 255, 255, 0.12);
  --pfm-surface-sunken:   rgba(0, 0, 0, 0.15);
  --pfm-surface-overlay:  rgba(0, 0, 0, 0.40);

  /* === TEXT === */
  --pfm-text-primary:   #f5f5f5;
  --pfm-text-secondary: rgba(255, 255, 255, 0.80);
  --pfm-text-muted:     rgba(255, 255, 255, 0.55);
  --pfm-text-on-light:  #1a3d2a;
  --pfm-text-on-gold:   #3d3010;

  /* === BORDERS === */
  --pfm-border-subtle:  rgba(255, 255, 255, 0.08);
  --pfm-border-default: rgba(255, 255, 255, 0.12);
  --pfm-border-strong:  rgba(255, 255, 255, 0.20);
  --pfm-border-accent:  var(--pfm-gold-500);

  /* === TYPOGRAPHY === */
  --pfm-font-display: 'Bebas Neue', 'Barlow Condensed', sans-serif;
  --pfm-font-heading: 'Barlow Condensed', 'Barlow', sans-serif;
  --pfm-font-body:    'Barlow', system-ui, sans-serif;

  --pfm-text-xs:  0.75rem;
  --pfm-text-sm:  0.875rem;
  --pfm-text-base:1rem;
  --pfm-text-lg:  1.125rem;
  --pfm-text-xl:  1.25rem;
  --pfm-text-2xl: 1.5rem;
  --pfm-text-3xl: 2rem;
  --pfm-text-4xl: 2.5rem;
  --pfm-text-5xl: 3.5rem;
  --pfm-text-6xl: 4.5rem;   /* web-only: hero scale */
  --pfm-text-7xl: 6rem;     /* web-only: hero scale */

  /* === SPACING === */
  --pfm-space-1: 0.25rem;
  --pfm-space-2: 0.5rem;
  --pfm-space-3: 0.75rem;
  --pfm-space-4: 1rem;
  --pfm-space-5: 1.25rem;
  --pfm-space-6: 1.5rem;
  --pfm-space-8: 2rem;
  --pfm-space-10:2.5rem;
  --pfm-space-12:3rem;
  --pfm-space-16:4rem;
  --pfm-space-20:5rem;
  --pfm-space-24:6rem;

  /* === RADII === */
  --pfm-radius-sm: 4px;
  --pfm-radius-md: 8px;
  --pfm-radius-lg: 12px;
  --pfm-radius-xl: 16px;
  --pfm-radius-2xl:20px;
  --pfm-radius-full: 9999px;

  /* === SHADOWS === */
  --pfm-shadow-sm: 0 1px 3px rgba(0,0,0,0.20);
  --pfm-shadow-md: 0 4px 8px rgba(0,0,0,0.20);
  --pfm-shadow-lg: 0 8px 20px rgba(0,0,0,0.25);
  --pfm-shadow-xl: 0 16px 32px rgba(0,0,0,0.30);
  --pfm-shadow-glow-gold: 0 4px 20px rgba(212,175,55,0.35);
  --pfm-shadow-inner: inset 0 1px 3px rgba(0,0,0,0.20);

  /* === TRANSITIONS === */
  --pfm-transition-fast: 150ms ease;
  --pfm-transition-base: 250ms ease;
  --pfm-transition-slow: 400ms ease;

  /* === LAYOUT === */
  --pfm-container-max: 1200px;
  --pfm-container-narrow: 760px;
}