/* ============================================================
   THEME: Red, Royal Blue & Gold (Great Canadian Pizza logo)
   Logo colours: red #ed1c26 (crown, maple leaf, ring),
   royal blue #2e3192 (roundel), gold #f6ca00 (inner ring).
   Swap this file to change the entire visual appearance.
   DO NOT add layout, grid, flexbox, or spacing here.
   ONLY define CSS custom property tokens and decorative CSS.
   ============================================================ */

/* Load this theme's fonts in the HTML <head> — NOT via @import */

:root {
  /* ===== BRAND COLORS ===== */
  --gs-red:          #d71920;                    /* Primary brand red (logo, deepened) - 5.2:1 on white */
  --gs-red-dark:     #ed1c26;                    /* Bright logo red (hover, highlights) */
  --gs-red-light:    rgba(215, 25, 32, 0.1);     /* Red light tint (icon circles, hover fills) */
  --gs-blue:         #2e3192;                    /* Logo royal blue (roundel) */
  --gs-blue-deep:    #1d1f66;                    /* Deep royal blue (footer, dark banners) */
  --gs-gold:         #f6ca00;                    /* Logo gold ring (accents on dark backgrounds only) */

  /* ===== UI COLORS ===== */
  --gs-dark:         #1a1c4f;     /* Navy-black: headings, dark banners (from logo blue) */
  --gs-text:         #333333;     /* Body text */
  --gs-text-light:   #6b7280;     /* Muted/secondary text, subtitles */
  --gs-white:        #ffffff;
  --gs-bg:           #fafafa;     /* Primary page background */
  --gs-bg-alt:       #f3f4fa;     /* Alternate section background (cool blue tint) */
  --gs-cream:        #f6f6fc;     /* Card backgrounds (cool blue tint) */
  --gs-border:       #e5e7eb;     /* Borders, dividers */
  --gs-border-light: #eeeff7;     /* Very subtle borders (FAQ items) */

  /* ===== SHADOWS ===== */
  --gs-shadow:       0 4px 20px rgba(29, 31, 102, 0.08);
  --gs-shadow-hover: 0 8px 30px rgba(29, 31, 102, 0.14);

  /* ===== TYPOGRAPHY ===== */
  --gs-font-heading:    'Playfair Display', serif;
  --gs-font-body:       'Source Sans 3', sans-serif;
  --gs-heading-style:   italic;
  --gs-heading-weight:  500;

  /* ===== HERO ===== */
  /* Neutral darkening over background image: darkest behind the centred text, lighter at the edges */
  --gs-hero-overlay: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.62) 55%, rgba(0, 0, 0, 0.45) 100%);

  /* ===== LAYOUT ===== */
  --max-width: 1200px;

  /* ===== NAVBAR ===== */
  --gs-nav-height:        120px;
  --gs-nav-height-mobile: 85px;
  --gs-nav-bg:            #2e3192;                /* Desktop nav background (logo blue) */
  --gs-nav-open-bg:       rgba(29, 31, 102, 0.97); /* Mobile nav open state (deep blue) */

  /* ===== BUTTONS ===== */
  --gs-btn-radius: 4px;

  /* ===== FOOTER ===== */
  --gs-footer-bg:     #1d1f66;
  --gs-footer-bar-bg: #15174d;
  --gs-footer-text:   #c9cbec;

  /* ===== BRAND GLOW (shadow using primary color) ===== */
  --gs-glow:      rgba(215, 25, 32, 0.4);
  --gs-glow-dark: rgba(215, 25, 32, 0.5);
  --gs-glow-soft: rgba(215, 25, 32, 0.3);

  /* ===== DECORATIVE ===== */
  --gs-star-color:          #f6ca00;   /* Review/rating stars (logo gold) */
  --gs-faq-section-bg:      #f3f4fa;   /* FAQ outer section background */
  --gs-faq-container-bg:    #f8f8fd;   /* FAQ inner container background */

  /* ===== SEMANTIC ALIASES (shared gs- system tokens) ===== */
  --gs-primary:       #d71920;
  --gs-primary-dark:  #b5121b;
  --gs-primary-light: rgba(215, 25, 32, 0.1);
  --gs-accent:        #2e3192;
  --gs-accent-dark:   #1d1f66;
  --gs-accent-light:  rgba(46, 49, 146, 0.12);

  /* ===== BACKWARD COMPATIBILITY ===== */
  /* Old variable names still referenced in the legacy portion of style.css */
  --primary-color:        #d71920;
  --primary-color-light:  #fff6f6;
  --primary-color-dark:   #2e3192;
  --text-dark:            #1a1c4f;
  --text-light:           #6b7280;
  --white:                #ffffff;
  --main-color:           #d71920;
  --bg-shade:             #f3f4fa;
}

/* ===== DECORATIVE: logo gold accents (dark backgrounds only) ===== */
/* "body" prefix: theme.css loads before style.css, so these must out-rank it */
body .gs-hero .gs-divider-icon,
body .gs-hero .gs-hero-stat-value,
body .gs-cta .gs-section-label,
body .footer__company a span {
  color: var(--gs-gold);
}

/* Hero red line: dark halo so the logo red stays crisp over the food photo */
body .gs-hero h1 .accent {
  color: var(--gs-red-dark);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.9), 0 0 22px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 1);
}
body .gs-hero h1 { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); }

/* About + Our Food page headers: same photo and overlay as the home hero */
body .gs-about-hero,
body .gs-gallery-header {
  background: var(--gs-hero-overlay), url('assets/backgrounds/4.webp') center / cover no-repeat !important;
}
body .gs-about-hero h1,
body .gs-gallery-header .gs-gallery-title {
  color: var(--gs-white);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
body .gs-about-hero p,
body .gs-gallery-header .gs-gallery-subtitle {
  color: rgba(255, 255, 255, 0.9);
}
body .gs-about-hero .gs-section-label,
body .gs-gallery-header .gs-section-label {
  color: var(--gs-red-dark);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.8);
}

/* Photo banners: neutral dark base so food photos carry no blue tint */
body .gs-cta,
body .gs-location-card-image { background: #111111; }

/* Header "Order Now": legacy style.css sets dark-brown text on the blue button */
body .nav__btn .btn { color: var(--gs-white); }
body .nav__btn .btn:hover { color: var(--gs-blue); }

/* Gold + blue trim echoing the logo's rings */
.gs-achievements { box-shadow: inset 0 4px 0 var(--gs-gold), inset 0 -4px 0 var(--gs-blue); }
.footer { box-shadow: inset 0 3px 0 var(--gs-gold); }