/* Cajun Craft 3D Print Lab — permanent brand layer.
   Tokens + shared brand pieces used by the storefront, Coming Soon page and admin.
   Seasonal decoration lives separately in seasons.css and can be switched off without touching this. */
:root {
  /* Palette (from the canopy artwork: metallic gold lettering, Mardi Gras purple, emerald) */
  --cc-royal: #4B168C;        /* primary brand purple — headings, selected states, prices */
  --cc-royal-2: #3A1070;      /* hover/pressed */
  --cc-deep: #240B42;         /* header, footer, navigation, Coming Soon background */
  --cc-deep-2: #33105F;       /* gradient mid-tone */
  --cc-gold: #D4AF37;         /* metallic gold — buttons and accents on dark or as fills */
  --cc-gold-light: #F1D77A;   /* highlight in the metallic gradient; headline gold on purple */
  --cc-gold-dark: #8A6A0E;    /* gold for TEXT on light backgrounds (AA contrast on ivory) */
  --cc-emerald: #00843D;      /* secondary accent */
  --cc-emerald-dark: #006631; /* emerald text on light backgrounds */
  --cc-ivory: #FFF9ED;        /* page/product background */
  --cc-paper: #FFFDF8;        /* cards */
  --cc-charcoal: #242424;     /* body text */
  --cc-muted: #5E5868;        /* secondary text (≥ 6:1 on ivory) */
  --cc-line: #E7DFEF;         /* hairlines, card borders (lavender-tinted) */
  --cc-danger: #B3122E;       /* errors and destructive actions only — never decoration */
  --cc-danger-dark: #8E0E24;

  --cc-metal: linear-gradient(180deg, #F6E39A 0%, #E2C25A 38%, #D4AF37 55%, #B8921F 100%);
  --cc-purple-glow: radial-gradient(ellipse 120% 90% at 50% 18%, #5A1DA6 0%, #4B168C 22%, #33105F 55%, #240B42 100%);

  --cc-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --cc-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cc-radius: 14px;
  --cc-shadow: 0 1px 2px rgba(36,11,66,.06), 0 8px 24px rgba(36,11,66,.09);
  --cc-focus: 0 0 0 3px var(--cc-gold), 0 0 0 5px var(--cc-deep);
}

/* Official artwork. Never restyled: only sized. Width/height attributes on the <img> reserve space
   (no layout shift); max-width keeps it inside narrow phones. */
.cc-logo, .cc-tagline { display: block; height: auto; max-width: 100%; margin: 0 auto; }
.cc-logo img, .cc-tagline img { display: block; width: 100%; height: auto; }

/* Environment banners (shared by every page) */
.sandbox-flag { background: #fff6dd; color: #6b5310; text-align: center; font: 600 13px var(--cc-body); padding: 6px; }
.sandbox-flag.test-env { background: var(--cc-royal); color: #fff; position: sticky; top: 0; z-index: 30; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }