/**
 * Boyd's Bright — design tokens
 * ─────────────────────────────
 * Change colours here only; layout.css consumes var(--*).
 * Energy modes: html[data-energy="vivid"] | html[data-energy="soft"]
 * See docs/DESIGN_TOKENS.md
 */
:root {
  /* Brand */
  --brand-red: #e31837;
  --brand-red-dark: #b91229;
  --brand-red-light: #fde8ec;
  --brand-blue: #0072ce;
  --brand-blue-dark: #004a8f;
  --brand-blue-light: #e8f2fa;
  --brand-green: #00a651;
  --brand-green-dark: #047857;
  --brand-gold: #ffc72c;

  /* Boyd's logo brush stroke (left → right under "Boyd's") */
  --logo-brush-magenta: #e91e7a;
  --logo-brush-purple: #7a2da8;
  --logo-brush-blue: #1a6fd4;
  --logo-brush-cyan: #00b4c8;
  --logo-brush-yellow: #ffd100;
  --logo-brush-gradient: linear-gradient(
    90deg,
    var(--logo-brush-magenta) 0%,
    var(--logo-brush-purple) 22%,
    var(--logo-brush-blue) 44%,
    var(--logo-brush-cyan) 66%,
    var(--logo-brush-yellow) 100%
  );

  /* Neutrals */
  --ink: #0f1419;
  --ink-soft: #334155;
  --muted: #64748b;
  --surface: #ffffff;
  --surface-alt: #f8fafc;
  --border: rgba(15, 20, 25, 0.09);

  /* Layout */
  --max: 1200px;
  --header-h: 72px;
  --announce-h: 0px;
  --site-chrome-h: var(--header-h);
  --banner-h: 300px; /* matches supplier hero 1200×300 (4:1) */
  /* Home rhythm — mobile-first; bump at 1024px */
  --section-y: 32px;
  --band-visual: 200px; /* Colour Studio visual cap ≈ hero height */
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --font: "Plus Jakarta Sans", system-ui, sans-serif;

  /* Effects */
  --shadow: 0 4px 24px rgba(15, 20, 25, 0.07);
  --shadow-lg: 0 16px 48px rgba(15, 20, 25, 0.1);
  --ai-gradient: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-green) 50%, var(--brand-red) 100%);
  --text-gradient: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-green) 45%, var(--brand-red) 100%);

  /* Hero — vivid (default) */
  --hero-bg: linear-gradient(135deg, #c8e4f8 0%, #b8efd4 35%, #fff0a8 70%, #ffd0d8 100%);
  --hero-mesh:
    radial-gradient(ellipse 70% 80% at 8% 30%, rgba(227, 24, 55, 0.28), transparent 55%),
    radial-gradient(ellipse 60% 70% at 92% 20%, rgba(0, 114, 206, 0.32), transparent 50%),
    radial-gradient(ellipse 55% 60% at 50% 100%, rgba(0, 166, 81, 0.26), transparent 55%),
    radial-gradient(ellipse 40% 50% at 75% 75%, rgba(255, 199, 44, 0.35), transparent 50%);
  --hero-text-overlay: linear-gradient(90deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.25) 60%, transparent 100%);
  --hero-border-glow: 0 0 0 1px rgba(0,114,206,0.12), 0 8px 32px rgba(0,114,206,0.15);

  /* CTA tile accents */
  --tile-1: var(--brand-green);
  --tile-2: var(--brand-blue);
  --tile-3: var(--brand-red);
  --tile-4: #5c4d7a;

  /* Carousel */
  --carousel-interval: 6s;
}

@media (min-width: 1024px) {
  :root {
    --section-y: 56px;
    --band-visual: 300px; /* match hero at --max (1200×300) */
  }
}

/* Soft energy — calmer mesh, lighter saturation (compare via bottom-left toggle) */
html[data-energy="soft"] {
  --hero-bg: linear-gradient(135deg, #e8f2fa 0%, #f0fdf4 45%, #fff8e6 100%);
  --hero-mesh:
    radial-gradient(ellipse 70% 80% at 8% 30%, rgba(227, 24, 55, 0.10), transparent 55%),
    radial-gradient(ellipse 60% 70% at 92% 20%, rgba(0, 114, 206, 0.12), transparent 50%),
    radial-gradient(ellipse 55% 60% at 50% 100%, rgba(0, 166, 81, 0.10), transparent 55%);
  --hero-text-overlay: linear-gradient(90deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.65) 55%, rgba(255,255,255,0.3) 100%);
  --hero-border-glow: 0 4px 24px rgba(15, 20, 25, 0.07);
}