/* Pineapple Willy's guest app theme, matching Jared's own "Pier Club
   Rewards" mockup: solid Ocean Blue header with a wavy cream-colored
   bottom edge, a two-tone "Pineapple Willy's" wordmark, a big serif
   "Pier Club" line, a script "Rewards," a white card with a vivid blue
   outline, and yellow/green paired buttons. Pairs with style-ww.css
   (Wicked Wheel's own theme) and style.css (the neutral staff panel) -
   all three share structure from style-base.css and only swap this
   variable set. */
@import url('style-base.css');

:root {
  --ink: #0d1922;          /* Velvet Black */
  --paper: #fffbe9;        /* warm, sun-bleached off-white */
  --card: #ffffff;
  --card-border: #00a7e2;  /* Ocean Blue - the vivid card outline in the mockup */
  --border: #c1d9e7;       /* Sky Blue - subtler dividers/progress track */
  --muted: #5b6b74;

  --btn-bg: #fcdc00;       /* Pineapple Yellow - "Join for free" */
  --btn-text: #0d1922;
  --btn-border: #0d1922;
  --btn-hover-bg: #ffc600; /* Sunset Yellow */
  --btn2-bg: #00ae44;      /* Leafy Green - "Existing member" */
  --btn2-text: #ffffff;
  --btn2-border: #ff5b5a;  /* Grapefruit Coral */
  --btn2-hover-bg: #00963b;
  --accent2: #007aa8;

  --success-bg: #e3f7e9;
  --success-text: #00ae44;
  --success-border: #b9e6c6;
  --error-bg: #ffeceb;
  --error-text: #d93e3d;   /* darkened Grapefruit Coral, for readable contrast */
  --error-border: #ffb3b0;
  --pending-bg: #fff3c4;
  --pending-text: #8a6d00;
  --pending-border: #ffc600;

  --tier-badge-bg: #00a7e2;
  --progress-from: #00a7e2;
  --progress-to: #ffdf00;
  --header-from: #00a7e2;  /* Ocean Blue, flat (no gradient) */
  --header-to: #00a7e2;
  --link-color: #007aa8;
  --checkbox-accent: #00a7e2;

  --body-font: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --subtitle-font: 'Open Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* The actual "Pier Club Rewards" wave graphic, from Jared's own
     brand artwork - fills the header full-bleed, wavy bottom edge
     and all, in place of a flat color. */
  --header-bg-img: url('/img/pw-wave.svg');
}

header.top { border-bottom: none; }