/* ============================================================
   HOT POTATO GAMES — design tokens
   Generated from DESIGN.md (the SSOT). Components read these;
   nothing re-declares a brand value.
   Provenance: values marked [context] were extracted from
   hpg/hotpotatogames/frontend/src/styles/_variables.scss and
   potatuhs-design/DESIGN.md; [derived] are computed from them;
   [proposed] are this run's draft, awaiting lock.
   ============================================================ */

:root {
  /* ---- Palette — the Potatuhs tri-orange [context] ---- */
  --brand-orange: #E16416;   /* Fiery Orange — CTAs, energy */
  --brand-sienna: #E19816;   /* Morning Sienna — warmth, buttons */
  --brand-gold:   #E1C916;   /* Golden Shade — hover, emphasis, the coin ring */

  /* ---- Palette — the HPG gameworld tones [context] ---- */
  --field-olive:  #1E1811;   /* dark earth — logo field, containers, depth */
  --burrow-brown: #0F0C07;   /* deepest soot — contrast floors */

  /* ---- Structural [context] ---- */
  --ink:          #1A1A1A;
  --surface:      #F5F0E6;   /* HPG cream (parent umbrella uses #FDF5EB) */
  --surface-warm: #EFE3CD;   /* [derived] cream stepped toward sienna */
  --paper:        #FFFFFF;
  --muted:        #666666;
  --subtle:       #999999;

  /* ---- Orange tint ramp [derived from #E16416] ---- */
  --orange-100: #FBE7DA;
  --orange-300: #F2A879;
  --orange-500: #E16416;
  --orange-700: #B04D0F;
  --orange-900: #7A350A;

  /* ---- Gradients [context: potatuhs-design/DESIGN.md] ---- */
  --gradient-brand: linear-gradient(135deg, var(--brand-orange), var(--brand-sienna) 50%, var(--brand-gold));
  --gradient-cta:   linear-gradient(90deg, var(--brand-orange), var(--brand-sienna));

  /* ---- Typography [context] ---- */
  --font-display: 'Bungee', 'Arial Black', sans-serif;          /* fixed titles, plaques, scores */
  --font-mark:    'Bowlby One SC', 'Arial Black', sans-serif;   /* ONE sanctioned use: the brand-mark title */
  --font-accent:  'Alfa Slab One', Georgia, serif;              /* per-game accent roster */
  --font-body:    'Outfit', 'Helvetica Neue', sans-serif;       /* all dynamic content */
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-hero:    clamp(3rem, 2rem + 5vw, 6rem);        /* [context] */
  --text-h1:      clamp(2rem, 1.5rem + 2.5vw, 3rem);    /* [context] */
  --text-h2:      clamp(1.5rem, 1.2rem + 1.5vw, 2.1rem);/* [derived] */
  --text-h3:      clamp(1.2rem, 1.05rem + 0.75vw, 1.5rem);
  --text-h4:      1.1rem;
  --text-body-lg: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  --text-body:    clamp(1rem, 0.9rem + 0.5vw, 1.125rem);/* [context] */
  --text-body-sm: 0.9rem;
  --text-caption: 0.8rem;
  --text-label:   0.72rem;

  /* ---- Spacing [proposed: 8px-base scale] ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4rem;
  --sp-8: 6rem;
  --section-pad: clamp(4rem, 8vw, 7rem);

  /* ---- Radii [proposed] ---- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Borders & shadows [context: parent card language, 3px opaque] ---- */
  --border-w: 3px;
  --border: var(--border-w) solid var(--ink);
  --sh-card: 4px 4px 0 var(--ink);
  --sh-pop:  7px 7px 0 var(--ink);

  /* ---- Motion [context: frontend _animations.scss + _variables.scss] ---- */
  --dur-fast: 150ms;      /* hover, micro feedback */
  --dur-normal: 300ms;    /* standard transitions */
  --dur-slow: 500ms;      /* entrances */
  --dur-slower: 800ms;    /* emphasis, attention */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);  /* bouncy, playful */
  --ease-squash: cubic-bezier(0.34, 1.56, 0.64, 1);       /* squash & stretch */
  --ease-elastic: cubic-bezier(0.68, -0.6, 0.32, 1.6);    /* elastic rebound */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);            /* smooth standard */
  --ease-out-back: cubic-bezier(0.34, 1.4, 0.64, 1);      /* back-swing exit */
  --ease-out: var(--ease-smooth);                          /* [derived] document machinery alias */
  --stagger: 100ms;       /* list-reveal increment */

  /* ---- Layout [proposed] ---- */
  --max-w: 72rem;
  --max-w-narrow: 46rem;
  --max-w-wide: 88rem;
  --nav-w: 232px;
}