/* =====================================================================
   GIFTIE BADGE MAKER — THEME
   ---------------------------------------------------------------------
   This is the ONLY file you need to touch to re-skin the whole app.
   Change a colour / font / texture here and it updates everywhere.
   ===================================================================== */

/* ---- FONTS -----------------------------------------------------------
   "Super Comic"   -> headings, nav buttons, big callouts
   "Hello Headline"-> body copy, paragraphs, form text
   Swap the src files in /fonts to change typefaces.                     */
@font-face {
  font-family: "Super Comic";
  src: url("../fonts/SuperComic.ttf") format("truetype");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hello Headline";
  src: url("../fonts/HelloHeadline.ttf") format("truetype");
  font-weight: normal;
  font-display: swap;
}

:root {
  /* ---- TYPEFACES ---------------------------------------------------
     --font-head  : page headers, hero copy, primary buttons (Hello Headline)
     --font-play  : playful editor UI bits (Super Comic)
     Swap a family here to restyle text site-wide.                       */
  --font-head: "Hello Headline", system-ui, sans-serif;
  --font-play: "Super Comic", "Hello Headline", cursive;
  --font-body: "Hello Headline", system-ui, sans-serif;
  /* plain system sans — used by the footer */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- BRAND COLOURS ------------------------------------------------ */
  --c-blue:          #1E50A2;   /* Giftie logo box, footer background     */
  --c-blue-dark:     #163d7e;
  --c-yellow:        #F7A81B;   /* header band, step pills, download btn  */
  --c-yellow-light:  #FBC04A;
  --c-pink:          #ED1C8E;   /* BADGE MAKER logo, primary buttons      */
  --c-pink-hot:      #EC008C;   /* slider handle, "READY?" accent         */
  --c-pink-deep:     #B0166C;   /* pink text outline / pressed state      */
  --c-pink-soft:     #F7A8D4;   /* light pink borders                     */
  --c-purple:        #7B2D8E;   /* body text, nav text                    */
  --c-purple-deep:   #5E2B80;   /* CREATE editor panel background         */
  --c-purple-btn:    #7E3F98;   /* round nav icons, pencil, download arrow*/
  --c-purple-dark:   #4A1F66;
  --c-template-pink: #EE3D90;   /* Templates page background              */
  --c-cream:         #FBF4E4;   /* dropdown / input backgrounds           */
  --c-white:         #FFFFFF;

  /* --- Footer palette (Character site) ---------------------------- */
  --c-footer-blue:   #009AE5;   /* footer background                      */
  --c-footer-ink:    #1F1F1F;   /* headings, links, social icons          */
  --c-footer-rule:   rgba(31,31,31,.45); /* underline beneath headings    */
  --c-footer-pink:   #E62577;   /* Sign up button                         */
  --c-ink:           #2A2433;   /* default dark text                      */
  --c-silver-1:      #e9e9ee;   /* metallic footer divider highlight      */
  --c-silver-2:      #b9bcc6;   /* metallic footer divider shadow         */

  /* ---- PAGE TITLE (double-stroke bubble lettering) ----------------- */
  --title-fill:  #F15191;       /* bright pink fill                       */
  --title-inner: #FFFFFF;       /* inner stroke                           */
  --title-outer: #822A81;       /* outer stroke                           */

  /* ---- GRADIENTS ---------------------------------------------------- */
  --grad-hero:    linear-gradient(180deg, #cdeafe 0%, #aedcfb 55%, #ffffff 100%);
  --grad-btn:     linear-gradient(180deg, var(--c-pink) 0%, var(--c-purple-btn) 100%);
  --grad-pink:    linear-gradient(180deg, #f64fae 0%, var(--c-pink) 100%);

  /* ---- TEXTURES / BACKGROUND IMAGES --------------------------------
     Drop replacement artwork into /assets/img using these same names
     and the whole site updates. Defaults are lightweight SVG patterns
     so nothing looks broken before you add the real PSD exports.        */
  --tex-header:  url("../assets/img/top-menu-banner-bg.png"); /* yellow band */
  --tex-scatter: url("../assets/img/texture-scatter.png");    /* CREATE page */
  --tex-divider: url("../assets/img/footer-divider.png");     /* footer 3D bar */
  --hero-bg:     url("../assets/img/header-bg.png");           /* sky behind hero */
  --hero-bg-mobile: url("../assets/img/header-bg-mobile.jpg");  /* sky behind hero (phones) */

  /* ---- TYPE SCALE (fluid) ------------------------------------------ */
  --fs-hero:  clamp(2.4rem, 6vw, 5rem);
  --fs-h1:    clamp(1.8rem, 4.2vw, 3.2rem);
  --fs-h2:    clamp(1.4rem, 3vw, 2.2rem);
  --fs-body:  clamp(1rem, 1.4vw, 1.25rem);
  --fs-btn:   clamp(1.1rem, 1.6vw, 1.6rem);

  /* ---- SHAPE & DEPTH ------------------------------------------------ */
  --radius-pill:   999px;
  --radius-card:   28px;
  --radius-panel:  34px;
  --shadow-soft:   0 8px 24px rgba(74, 31, 102, .18);
  --shadow-pop:    0 6px 0 rgba(0,0,0,.12);
  --ring:          0 0 0 4px rgba(255,255,255,.85);

  /* ---- LAYOUT ------------------------------------------------------- */
  --maxw:        1500px;
  --header-h:    110px;
  --mobile-nav-h: 84px;
}