/* ==========================================================================
   HOMEBEACH — Design Tokens
   Retro Surf Culture palette — sun-bleached, warm, vintage
   Typography: Bangers (headlines) · Nunito (body) · Space Mono (UI)
   ========================================================================== */

:root {
  /* ---- Brand Colours — sun-bleached palette ---- */
  --blue:    #2E86AB;
  --navy:    #1B4F6B;
  --sand:    #E8C84A;
  --coral:   #D4694A;
  --green:   #4CAF50;
  --cream:   #F2EDD7;
  --ink:     #1A1209;

  /* ---- Derived / utility ---- */
  --navy-dark:   #0F3347;
  --coral-dark:  #A8442A;
  --green-dark:  #2e7a32;
  --sand-dark:   #C9941F;
  --white:       #FEFBF3;
  --text:        #1A1209;
  --text-light:  #6B5B45;

  /* ---- Retro Surf additions ---- */
  --paper:        #EDE4C8;
  --paper-dark:   #D4C9A5;
  --rust:         #B85C38;
  --faded-blue:   #5B8EA6;
  --warm-dark:    #0F0A05;
  --stamp-green:  #3D6B45;

  /* ---- Gradients ---- */
  --grad-hero:      linear-gradient(160deg, #D4782A 0%, #B84820 30%, #1B4F6B 68%, #060E18 100%);
  --grad-hero-tint: linear-gradient(180deg, rgba(255,200,80,0.12) 0%, rgba(180,110,40,0.04) 50%, transparent 100%);
  --grad-quotes:    linear-gradient(170deg, #1B4F6B 0%, #0F3347 100%);
  --grad-games:     linear-gradient(165deg, #0a1208 0%, #040805 100%);
  --grad-amber:     linear-gradient(135deg, #D4A820 0%, #B07818 100%);
  --grad-coral:     linear-gradient(135deg, #D4694A 0%, #A8442A 100%);
  --grad-sky:       linear-gradient(135deg, #2E86AB 0%, #1B4F6B 100%);
  --grad-lime:      linear-gradient(135deg, #4a8f3f 0%, #2d5c28 100%);
  --grad-pink:      linear-gradient(135deg, #c4607a, #8a3050);
  --grad-teal:      linear-gradient(135deg, #2a9d8f, #1a6b60);

  /* ---- Spacing ---- */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  3.5rem;
  --space-xl:  5rem;

  /* ---- Border Radius ---- */
  --radius-sm:   4px;
  --radius-md:   4px;
  --radius-lg:   6px;
  --radius-pill: 50px;

  /* ---- Shadows ---- */
  --shadow-sm:    0 3px 16px rgba(26,18,9,0.09);
  --shadow-md:    0 6px 28px rgba(26,18,9,0.14);
  --shadow-lg:    0 14px 44px rgba(26,18,9,0.20);
  --shadow-ink:   4px 4px 0 var(--ink);
  --shadow-ink-lg: 6px 6px 0 var(--ink);

  /* ---- Borders ---- */
  --border-ink:    2.5px solid var(--ink);
  --border-stamp:  2px solid var(--rust);
  --border-double: 3px double var(--ink);
}