/* breadtoasting brand layer — from the 2026-10 workshop sheet
 * (toast-slice mark drawn as three nested crust lines, Space Grotesk), on the
 * site's original dark-navy surfaces.
 * Loaded last on every site page. Each page's own :root block already carries the
 * same token values; this file adds the named brand colours, the wordmark, the
 * five-colour stripe and the pattern backdrops.
 */
:root {
  --cocoa:     #3A2419;
  --tangerine: #FF8A3D;
  --raspberry: #E8366F;
  --cobalt:    #2F5BE0;
  --breeze:    #8ED6F2;
  --sprout:    #7BC950;
  --cream:     #FFF3E2;
}


/* ─── Wordmark: "bread" + "toasting" (tangerine on dark, raspberry on light) ─── */
.bt-word { font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.bt-word > span { color: var(--tangerine); }
.bt-light .bt-word { color: var(--cocoa); }
.bt-light .bt-word > span { color: var(--raspberry); }
.bt-tagline {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 10px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--breeze);
}

/* ─── Five-colour stripe across the top of every page ─── */
body::before {
  /* fixed, so it never becomes a flex/grid item of a page's body */
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; pointer-events: none;
  background: linear-gradient(90deg,
    var(--tangerine) 0 20%, var(--raspberry) 20% 40%, var(--cobalt) 40% 60%,
    var(--breeze) 60% 80%, var(--sprout) 80% 100%);
}

/* ─── Pattern backdrops ───
 * The pattern art sits on the right of a 1600×900 navy (#0A0D12) canvas, so use these only
 * on sections whose background is --bg (cocoa) and whose content leans left.
 */
.bt-pattern { position: relative; isolation: isolate; }
.bt-pattern::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  width: auto; height: auto; transform: none;   /* beat any ::after a page already styles (e.g. .page-glow) */
  background: var(--bt-pattern) var(--bt-pattern-pos, right center) / auto var(--bt-pattern-size, 100%) no-repeat;
  opacity: var(--bt-pattern-opacity, 1);
}
.bt-pattern-halftone { --bt-pattern: url(/assets/patterns/halftone-toast.svg?v=2); }
.bt-pattern-repeat   { --bt-pattern: url(/assets/patterns/repeat-toast.svg?v=2); }
.bt-pattern-bend     { --bt-pattern: url(/assets/patterns/bend-blocky.svg?v=2); }
.bt-pattern-seigaiha { --bt-pattern: url(/assets/patterns/seigaiha-fade.svg?v=2); }
/* adapted from the Palmetto Packet Group pattern set, redrawn in breadtoasting colours on a
   transparent ground (so these two work on --bg-elev panels too) */
.bt-pattern-fibre    { --bt-pattern: url(/assets/patterns/fibre-lines.svg?v=1); }
.bt-pattern-network  { --bt-pattern: url(/assets/patterns/network-paths.svg?v=1); }
/* On narrow screens the art would sit behind the text — keep it as a faint wash. */
@media (max-width: 900px) {
  .bt-pattern::after { opacity: calc(var(--bt-pattern-opacity, 1) * 0.3); }
}

/* ─── Accent choices offered by the Tweaks panel ─── */
html[data-accent="raspberry"] { --accent: #E8366F; --accent-2: #F0628E; --accent-3: #C81F55; }
html[data-accent="breeze"]    { --accent: #8ED6F2; --accent-2: #B5E5F7; --accent-3: #5BBFE6; }
html[data-accent="sprout"]    { --accent: #7BC950; --accent-2: #9AD776; --accent-3: #5FAE35; }

/* keep the tagline on one line on phones */
@media (max-width: 480px) {
  .bt-tagline { letter-spacing: 0.14em; font-size: 10px !important; white-space: nowrap; }
}

/* ═══ Colour play ═══
 * Every interactive thing takes one of the five brand hues, rotating by position,
 * so the palette shows up as you move around the page. Cobalt is lifted for use as
 * text/borders on navy (the mark's #2F5BE0 is too dark to read there).
 */
:root { --cobalt-lit: #6F8FF5; }
nav a:nth-child(5n+1), footer a:nth-child(5n+1), .svc-tile:nth-child(5n+1), .card:nth-child(5n+1), section:nth-of-type(5n+1) { --hue: var(--tangerine); }
nav a:nth-child(5n+2), footer a:nth-child(5n+2), .svc-tile:nth-child(5n+2), .card:nth-child(5n+2), section:nth-of-type(5n+2) { --hue: var(--raspberry); }
nav a:nth-child(5n+3), footer a:nth-child(5n+3), .svc-tile:nth-child(5n+3), .card:nth-child(5n+3), section:nth-of-type(5n+3) { --hue: var(--breeze); }
nav a:nth-child(5n+4), footer a:nth-child(5n+4), .svc-tile:nth-child(5n+4), .card:nth-child(5n+4), section:nth-of-type(5n+4) { --hue: var(--sprout); }
nav a:nth-child(5n+5), footer a:nth-child(5n+5), .svc-tile:nth-child(5n+5), .card:nth-child(5n+5), section:nth-of-type(5n+5) { --hue: var(--cobalt-lit); }

/* Text links in the nav and footer: own colour + a five-colour underline that draws in.
   (!important beats the inline colour the subpages set on their nav links.) */
nav a:not(:has(.bt-word)):not([class*="border"]):not([style*="border"]):not(.inline-flex),
footer a:not(:has(.bt-word)) {
  background: linear-gradient(90deg, var(--tangerine), var(--raspberry), var(--cobalt-lit), var(--breeze), var(--sprout))
              left 100% / 0 2px no-repeat;
  padding-bottom: 3px;
  transition: color .2s ease, background-size .35s ease;
}
nav a:not(:has(.bt-word)):not([class*="border"]):not([style*="border"]):not(.inline-flex):hover,
nav a:not(:has(.bt-word)):not([class*="border"]):not([style*="border"]):not(.inline-flex):focus-visible,
footer a:not(:has(.bt-word)):hover, footer a:not(:has(.bt-word)):focus-visible {
  color: var(--hue, var(--accent)) !important;
  background-size: 100% 2px;
}

/* Section eyebrows take their section's hue instead of all-tangerine. */
section .eyebrow { color: var(--hue, var(--accent)); }
section .eyebrow::before { background: var(--hue, var(--accent)); }
#home .eyebrow { color: var(--accent); }
#home .eyebrow::before { background: var(--accent); }

/* Cards: border glows in the card's hue and a corner of halftone toast fades in. */
.svc-tile, .card, .card-highlight { isolation: isolate; position: relative; }
.svc-tile::before, .card::before, .card-highlight::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: url(/assets/patterns/halftone-toast-clear.svg) right -40px bottom -30px / auto 150% no-repeat;
  opacity: 0; transition: opacity .35s ease;
}
.svc-tile:hover, .card:hover, a.card:hover, .card-highlight:hover {
  border-color: color-mix(in oklab, var(--hue, var(--accent)) 70%, transparent) !important;
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--hue, var(--accent)) 25%, transparent),
              0 14px 40px -18px color-mix(in oklab, var(--hue, var(--accent)) 55%, transparent);
}
.svc-tile:hover::before, .card:hover::before, .card-highlight:hover::before { opacity: .22; }
/* the card's own accent text (its "open →" link, badges) follows the card's hue */
.svc-tile:hover .text-accent, .card:hover .text-accent, .card:hover .go { color: var(--hue, var(--accent)); transition: color .2s ease; }

/* Wordmark: "toasting" runs through the palette while you hover the logo. */
@keyframes bt-cycle {
  0%, 100% { color: var(--tangerine); } 20% { color: var(--raspberry); } 40% { color: var(--cobalt-lit); }
  60% { color: var(--breeze); } 80% { color: var(--sprout); }
}
a:hover > .bt-word > span, a:focus-visible > .bt-word > span { animation: bt-cycle 2s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  a:hover > .bt-word > span, a:focus-visible > .bt-word > span { animation: none; }
  nav a, footer a, .svc-tile::before, .card::before, .card-highlight::before { transition: none; }
}