/* ============================================================
   🌊  TOKENS.CSS  —  NEW WAVE TATTOO  —  YOUR COLORS & FONTS
   ============================================================

   This one file controls the whole look of your site — every color
   and font. You do NOT need to know code. Just change the values
   after the colons, keep the semicolons (;), and save.

   These colors were pulled straight from the New Wave logo, so the
   whole site matches the artwork. Change them only if you want a
   different look.

   HOW A LINE WORKS:
       --pink:   #fa0c6b;   (MAIN COLOR)
          |          |              |
          |          |              +- note: what this color does
          |          +- the VALUE you change (a color code)
          +- the name (leave this part alone)

   A "color code" (hex) starts with # . Need one? htmlcolorcodes.com
   ============================================================ */

:root {

  /* ---------- YOUR BRAND COLORS (from the logo) ---------- */

  --pink:     #fa0c6b;   /* MAIN ACCENT - buttons, highlights, links     */
  --pink-hot: #fd1a53;   /* a brighter pink, used in gradients           */
  --orange:   #fb672c;   /* SUNSET ORANGE - gradients, warm accents      */
  --red:      #f54844;   /* the red from the logo's script lettering     */
  --ice:      #7fd4f5;   /* ICE BLUE - small accents, labels, the wave   */
  --magenta:  #d706b2;   /* deep magenta from the sunset bands           */


  /* ---------- BACKGROUND & TEXT (the dark synthwave base) ----------
     These make the colors above "glow" against the dark. Usually
     leave them - only change if you want a lighter or different base. */

  --bg:     #0a0612;   /* page background - deep indigo-black (from logo) */
  --panel:  #120a22;   /* slightly lifted panels/sections                */
  --ink:    #f3eef7;   /* main text - soft white                         */
  --muted:  #9d93b4;   /* dimmer text - subtitles, captions              */
  --line:   #241733;   /* thin borders and dividers                      */


  /* ---------- YOUR FONTS ----------
     Loaded free from Google Fonts in the <head> of each page.
     - Fredoka   = the soft, rounded headings (matches the logo's vibe)
     - Rajdhani  = the uppercase labels (nav, buttons, tags)
     - Inter     = normal paragraph text (clean + readable)
     To change a font you'd also swap the <link> in each page's <head>
     - ask us, or see CUSTOMIZE.md Step 3. Easiest: leave these. */

  --font-head:  'Fredoka', system-ui, sans-serif;     /* headings */
  --font-label: 'Rajdhani', system-ui, sans-serif;    /* labels/buttons */
  --font-body:  'Inter', system-ui, sans-serif;       /* body text */


  /* ---------- THE SUNSET GRADIENT (the signature look) ----------
     Used on section titles, the trust strip, and accents. It recreates
     the logo's sunset. Change the colors inside if you want a different
     gradient - but these match your logo. */

  --sunset: linear-gradient(90deg, var(--pink), var(--orange));


  /* ---------- LAYOUT (advanced - usually leave alone) ---------- */

  --maxw:      1180px;   /* max content width on big screens */
  --radius:    4px;      /* corner roundness                 */
  --section-y: 74px;     /* space above/below each section   */
}


/* ============================================================
   WANT A DIFFERENT VIBE?  (optional)
   ------------------------------------------------------------
   The look above is "synthwave" - neon on dark, pulled from the
   logo. If you ever want to shift it, the three colors that change
   everything are --pink, --orange, and --ice. Swap those three and
   the whole site re-tones. Try it, refresh, and see.
   ============================================================ */