/* Sam & Gary 3D Prints — brand tokens
   Adapted from the brand pack's css/brand-tokens.css.

   Two deliberate differences from the supplied file:

   1. Fonts are self-hosted rather than pulled from Google's CDN. The public
      site sets no cookies and makes no third-party requests, which is why it
      needs no cookie banner; a webfont CDN would hand every visitor's IP to a
      third party. Self-hosting is also faster — all four faces are 48 KB.

   2. Measured with _tools/check_contrast.php, brand red is the one colour that
      cannot carry white text — #FFFFFF on #FF1E1E is 3.85:1, below the 4.5:1
      AA needs. So solid red buttons use #C81111 (5.93:1) while the bright red
      stays exactly as supplied for fills, outlines and artwork. Brand blue is
      fine as it is (4.83:1); --sg-blue-ink simply gives links more headroom.
*/

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/baloo2-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700.woff2') format('woff2');
}

/* --------------------------------------------------------------- tokens */
:root {
  /* palette exactly as supplied */
  --sg-blue:   #0066FF;
  --sg-red:    #FF1E1E;
  --sg-orange: #FF8C00;
  --sg-yellow: #FFD200;
  --sg-green:  #39B54A;
  --sg-purple: #8A2BE2;
  --sg-cyan:   #00C7E6;
  --sg-black:  #111111;
  --sg-white:  #FFFFFF;

  /* accessible variants — see note at the top of this file */
  --sg-blue-ink:   #0047D1;  /* links and body-size text on white */
  --sg-red-ink:    #C81111;  /* white text on a red fill */
  --sg-green-ink:  #237A2F;
  --sg-purple-ink: #6B1FB1;

  /* neutrals for body copy and rules */
  --sg-ink-soft: #43474e;
  --sg-line:     #e5e7eb;
  --sg-tint:     #f6f7f9;

  --sg-font-display: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --sg-font-body:    'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --sg-radius-sm: 10px;
  --sg-radius-md: 18px;
  --sg-radius-lg: 28px;
  --sg-outline: 3px solid var(--sg-black);
  --sg-shadow-card:   0 8px 22px rgba(17,17,17,.12);
  --sg-shadow-button: 0 5px 0 var(--sg-black);
  --sg-content-width: 1180px;
}

/* --------------------------------------------------------- components */
.sg-container { width: min(100% - 32px, var(--sg-content-width)); margin-inline: auto; }

/* Rainbow burst. Used for hero and call-to-action panels only — never as a
   general page background, and never directly behind body text. */
.sg-rainbow-burst {
  position: relative;
  background:
    conic-gradient(from 205deg at 50% 100%,
      var(--sg-blue), var(--sg-cyan), var(--sg-green),
      var(--sg-yellow), var(--sg-orange), var(--sg-red),
      var(--sg-purple), var(--sg-blue));
}
/* The burst pattern itself. */
.sg-rainbow-burst::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-conic-gradient(from 205deg at 50% 100%,
    rgba(255,255,255,.92) 0deg 8deg, transparent 8deg 18deg);
  pointer-events: none;
}
/* A white wash over the top, per the brand rule: vivid on desktop, softer on
   the larger areas a phone gives it. */
.sg-rainbow-burst::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.18);
  pointer-events: none;
}
@media (max-width: 700px) {
  .sg-rainbow-burst::after { background: rgba(255,255,255,.28); }
}
.sg-rainbow-burst > * { position: relative; z-index: 1; }

.sg-card {
  background: var(--sg-white);
  border: var(--sg-outline);
  border-radius: var(--sg-radius-md);
  box-shadow: var(--sg-shadow-card);
}

.sg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .75rem 1.3rem;
  border: var(--sg-outline);
  border-radius: var(--sg-radius-sm);
  background: var(--sg-yellow);
  color: var(--sg-black);
  font: 700 1rem/1.15 var(--sg-font-body);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--sg-shadow-button);
  transition: transform .12s ease, box-shadow .12s ease;
}
.sg-button:hover { transform: translateY(2px); box-shadow: 0 3px 0 var(--sg-black); text-decoration: none; }
.sg-button:active { transform: translateY(5px); box-shadow: 0 0 0 var(--sg-black); }
.sg-button--blue { background: var(--sg-blue); color: var(--sg-white); }
.sg-button--red  { background: var(--sg-red-ink); color: var(--sg-white); }
.sg-button--white{ background: var(--sg-white); color: var(--sg-black); }

.sg-section-title { margin: 0 0 1rem; font-size: clamp(1.9rem, 4.4vw, 3rem); }
.sg-kicker {
  color: var(--sg-blue-ink);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: .06em;
  font-size: .82rem;
}

.sg-mascot { max-width: 100%; height: auto; object-fit: contain; }

.sg-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.sg-product-card {
  overflow: hidden;
  background: var(--sg-white);
  border: var(--sg-outline);
  border-radius: var(--sg-radius-md);
  box-shadow: var(--sg-shadow-card);
}
.sg-product-card img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.sg-product-card__body { padding: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}