/* Shared colour finish. Preserve each discipline's hue and the artwork itself;
   richer light, saturated midtones and clean shadows connect the page surfaces. */
:root {
  --discipline-blue: #086aff;
  --discipline-orange: #ff660a;
  --discipline-emerald: #00c67a;
  --discipline-yellow: #ffd23f;
  --studio-blue: var(--discipline-blue);
  --studio-orange: var(--discipline-orange);
  --studio-emerald: var(--discipline-emerald);
  --studio-yellow: var(--discipline-yellow);
  --sc-blue: var(--discipline-blue);
  --sc-orange: var(--discipline-orange);
  --flippd-electric-blue: var(--discipline-blue);
  --flippd-signal-orange: var(--discipline-orange);
  --flippd-spark-yellow: var(--discipline-yellow);
  --discipline-web-field: #074bd2 url('assets/discipline-rich-blue.svg') center / 100% 100% no-repeat;
  --discipline-campaign-field: #f04a06 url('assets/discipline-rich-orange.svg') center / 100% 100% no-repeat;
  --discipline-tools-field: #00975d url('assets/discipline-rich-emerald.svg') center / 100% 100% no-repeat;
  --discipline-logo-field: #ffd23f url('assets/discipline-rich-yellow.svg') center / 100% 100% no-repeat;
  --finish-ink: #101118;
  --finish-paper: #f8f5f0;
  --finish-card: linear-gradient(140deg,#272a34,#191c25 55%,#12141c);
  --finish-blue-button: linear-gradient(125deg,#1264ef,#0755db 60%,#074bc0);
  --finish-orange-button: linear-gradient(125deg,#ff8738,#ff660a 60%,#f45a0b);
  --finish-emerald-button: linear-gradient(125deg,#00dc8b,#00c67a 60%,#00b571);
  --finish-yellow-button: linear-gradient(125deg,#ffdf65,#ffd23f 60%,#ffc62b);
}

/* The folded fields also feed service previews, shortcuts and pricing. */
.discipline-web { --panel-shadow: #03265c; }
.discipline-campaigns { --panel-shadow: #521b09; }
.discipline-tools { --panel-shadow: #003c29; }
.discipline-panel:not(.discipline-logos) .discipline-shade {
  background: linear-gradient(180deg,transparent 36%,var(--panel-shadow) 100%);
}
.discipline-panel:not(.discipline-logos):not(.is-active) .discipline-shade {
  background: linear-gradient(180deg,#1011180a 20%,var(--panel-shadow) 100%);
}
.discipline-panel.discipline-logos .discipline-shade {
  background: linear-gradient(180deg,#ffd23f00 30%,#ffc92ee8 100%);
}
.discipline-panel::after { border-color: #ffffff36; box-shadow: inset 0 1px #ffffff30; }
.home-page .studio-package:not(.studio-package-complete) { background: var(--finish-card); }
.home-page .studio-package-complete {
  background: linear-gradient(#03276724,#03276766),var(--discipline-web-field);
  border-color: #4a95ff;
}
.home-page .audience-chapter { background: #f2ece2; }
.home-page .why-inner {
  background: radial-gradient(ellipse at 90% 0%,#e7bb8770,transparent 62%),linear-gradient(135deg,#fffaf3,#f2e8da 70%,#e5d3bb);
}
.hero-disciplines a { --hero-icon-colour: var(--discipline-blue); }
.hero-disciplines .hero-discipline-brand { --hero-icon-colour: var(--discipline-yellow); }
.hero-disciplines .hero-discipline-campaign { --hero-icon-colour: var(--discipline-orange); }
.hero-disciplines .hero-discipline-tools { --hero-icon-colour: var(--discipline-emerald); }
.studio-navigation a[data-discipline="web"] { --nav-accent: var(--discipline-blue); }
.studio-navigation a[data-discipline="campaigns"] { --nav-accent: var(--discipline-orange); }
.studio-navigation a[data-discipline="tools"] { --nav-accent: var(--discipline-emerald); }
.studio-navigation::after { background: var(--discipline-orange); }

/* Colour remains in the material, rather than a grey overlay over each tab. */
body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a::before {
  background: linear-gradient(90deg,#07142640,#07142610),var(--destination-field);
}
body:is(.websites-page,.logo-gallery-page,.campaigns-page,.tools-page) .work-switcher a[data-discipline="logos"]::before {
  background: var(--discipline-logo-field);
}

/* Quiet paper and ink keep the richer colours legible throughout long pages. */
.tools-chapter-ink { --tools-card-surface: #1b1e27; --tools-media-surround: var(--finish-ink); background: var(--finish-ink); }
.tools-interlude,.tools-next,body.campaigns-page .section.dark,body.campaigns-page .cta-band { background: var(--finish-ink); }
.tools-chapter-ink .tools-preview-card { background: var(--finish-card); }
.tools-chapter-index a:hover { background: #c5f0db; }
.tools-preview-card:is(:hover,:focus-within) { border-color: #008353a6; }
.tools-chapter-ink .tools-preview-card:is(:hover,:focus-within) { border-color: var(--discipline-emerald); }
.campaigns-page .campaign-path:first-child { background: linear-gradient(135deg,#fff4e9,#f7ddc5); border-color: #bd430a59; }
.campaigns-page .campaign-path:last-child { background: var(--finish-card); }

/* Logo collections keep their own established atmospheres, with less grey in
   the lights. The motion renderer reads these same tokens as its CSS fallback. */
.logo-collection.collection-bold {
  --collection-bg: #141019; --collection-accent: #ff7845;
  --atmosphere-a: #87472f; --atmosphere-b: #373166;
}
.logo-collection.collection-refined {
  --collection-bg: #0d2d24; --collection-accent: #e7c17a;
  --atmosphere-a: #817442; --atmosphere-b: #276b4f;
}
.logo-collection.collection-warm {
  --collection-bg: #f5d4b2; --collection-accent: #a53619;
  --atmosphere-a: #edab71; --atmosphere-b: #d87856;
}
.logo-collection.collection-clear {
  --collection-bg: #dceafb; --collection-accent: #1559cb;
  --atmosphere-a: #8ebcec; --atmosphere-b: #98ace7;
}

/* Opened website directions now carry the same finish as their covers.
   The already approved covers, linework and hover treatment stay untouched. */
[data-active-direction="warm"] { --heading-surface: url('assets/discipline-light-orange.svg'); }
[data-active-direction="bold"] { --heading-surface: url('assets/direction-surface-bold.svg'); }
[data-active-direction="refined"] { --heading-surface: url('assets/direction-surface-refined.svg'); }
[data-active-direction="clear"] { --heading-surface: url('assets/direction-surface-clear.svg'); }
[data-active-direction="natural"] { --heading-surface: url('assets/direction-surface-natural.svg'); }
.direction-heading {
  background: linear-gradient(90deg,var(--direction-field) 30%,transparent 100%),var(--heading-surface,linear-gradient(transparent,transparent)) center / 100% 100%,var(--direction-field);
}

/* Short, solid colour ramps on actions: no gradients across text or artwork. */
.home-page .home-flow-primary,
body .studio-navigation :is(.n-cta,.nav-cta):hover,
body.campaigns-page .cta-band .button {
  color: #19140f; background: #ff660a var(--finish-orange-button); border-color: #ff8b47;
  box-shadow: inset 0 1px #ffffff30;
}
.website-next .button.primary { background: #086aff var(--finish-blue-button); color: #fffaf4; box-shadow: inset 0 1px #ffffff30; }
.tools-next .button.primary { background: #00c67a var(--finish-emerald-button); color: #062c22; box-shadow: inset 0 1px #ffffff30; }
body.logo-gallery-page .logo-cta .button { background: #ffd23f var(--finish-yellow-button); color: #282116; box-shadow: inset 0 1px #ffffff40; }
/* Keep an opaque colour beneath each gradient while it switches on hover.
   A gradient-only background resets background-color to transparent, briefly
   exposing the dark section during the background transition (notably Safari). */
body.campaigns-page .cta-band .button,
.website-next .button.primary,
.tools-next .button.primary,
body.logo-gallery-page .logo-cta .button {
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s;
}
body:is(.campaigns-page,.logo-gallery-page) :is(.cta-band,.logo-cta) .button:hover {
  transform: none;
}
.home-page .home-flow-primary:hover,body.campaigns-page .cta-band .button:hover { background: #ff8738; }
.website-next .button.primary:hover { background: #0755db; }
.tools-next .button.primary:hover { background: #00dc8b; }
body.logo-gallery-page .logo-cta .button:hover { background: #ffdf65; }

/* Legacy library stays compatible and uses the same warm paper/ink family. */
.library-page {
  --bg: var(--finish-paper); --bg2: #eee6da; --cream: #fff8ed;
  --dark: var(--finish-ink); --dark2: #191c25;
  --text: #171920; --red: #cc410c; --red2: #ff8738;
  --teal: #087e5d; --gold: #d3a12c; --rose: #ad3e65;
}
.library-page .cta { background: var(--finish-ink); }
/* On phones, shade within each hue instead of washing the field with grey. */
@media (max-width:980px) {
  .studio-navigation .site-links a[data-discipline="web"][aria-current="page"] { color: #3888ff; }
  .websites-page .showcase-hero {
    background: linear-gradient(180deg,#03216580,#03216570 56%,transparent 80%),var(--discipline-web-field);
  }
  .campaigns-page .showcase-hero {
    background: linear-gradient(180deg,#54190799,#54190780 56%,transparent 80%),var(--discipline-campaign-field);
  }
}
@media (forced-colors:active) {
  .direction-heading { background: Canvas; color: CanvasText; }
}

/* One restrained silver highlight per deliberate hover; no idle animation.
   This overlay never replaces the opaque button fill beneath it. */
:is(.studio-navigation .n-cta,.studio-navigation .nav-cta,.hero-actions .button,
    .home-flow-primary,.website-next .button,.tools-next .button,
    .cta-band .button,.logo-cta .button,.studio-button) {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
:is(.studio-navigation .n-cta,.studio-navigation .nav-cta,.hero-actions .button,
    .home-flow-primary,.website-next .button,.tools-next .button,
    .cta-band .button,.logo-cta .button,.studio-button)::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg,transparent 27%,#c5ced51a 40%,#ffffff80 49%,#dbe2e738 57%,transparent 70%);
  transform: translateX(-125%);
  opacity: 0;
}
@keyframes studio-button-sheen {
  0% { transform: translateX(-125%); opacity: 0; }
  18%,75% { opacity: .85; }
  100% { transform: translateX(125%); opacity: 0; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  :is(.studio-navigation .n-cta,.studio-navigation .nav-cta,.hero-actions .button,
      .home-flow-primary,.website-next .button,.tools-next .button,
      .cta-band .button,.logo-cta .button,.studio-button):hover::before {
    animation: studio-button-sheen .65s ease-out both;
  }
}
@media (prefers-reduced-motion:reduce) {
  :is(.studio-navigation .n-cta,.studio-navigation .nav-cta,.hero-actions .button,
      .home-flow-primary,.website-next .button,.tools-next .button,
      .cta-band .button,.logo-cta .button,.studio-button):hover::before {
    transform: none; opacity: .18;
  }
}