/* Meeple Corp colour system — supplied brand guide, October 2026.
   Cream leads, Cocoa anchors, Orange highlights; Latte and Walnut support. */
:root {
  --orange: #FF5C00;
  --cocoa: #2A1A12;
  --cream: #F5ECDD;
  --black: #141414;
  --white: #FFFFFF;
  --latte: #E7D7BF;
  --walnut: #6B4A36;
  /* Compatibility with the existing component and motion styles. */
  --slate: var(--cocoa);
  --slate-dark: var(--cocoa);
  --slate-light: var(--walnut);
  --muted: var(--walnut);
  --line: var(--latte);
  --focus: var(--cocoa);
  --button-clip: polygon(1.4% 13%, 100% 0, 98.6% 100%, 0 87%);
}

/* The top rises slightly; the bottom-right corner sits below the bottom-left.
   Shape the face itself so the label remains level without distortion. */
.button {
  --button-fill: var(--orange);
  isolation: isolate;
  overflow: visible;
  border-radius: 0;
  transform: none;
  transition: color .25s, filter .3s, transform .3s var(--ease);
}
.button::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--button-fill);
  clip-path: var(--button-clip);
  transition: background .25s;
}
.button > span { display: inline-block; transform: none; }
.button > svg { transform: none; }
.button:is(:hover, :focus-visible) { transform: translateY(-2px); }
.button:is(:hover, :focus-visible) > svg { transform: translate(3px, -3px); }
.button:active { transform: scale(.985); }
.motion-paused .button:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .button:active { transform: none; }
}
@media (forced-colors: active) {
  .button, .button:is(:hover, :focus-visible) { background: ButtonFace; color: ButtonText; border: 1px solid ButtonText; }
  .button::before { display: none; }
}

/* White on Orange is reserved for large, bold rotator labels (3.10:1).
   Keep the requested white sweep label, including at mobile breakpoints. */
.hero-slide .button.button-sweep { font-size: 20px; font-weight: 700; }

/* Leave system high-contrast colours in charge when forced colours are on. */
@media not (forced-colors: active) {
  :root { color-scheme: light; }
  body { background: var(--cream); color: var(--cocoa); }
  ::selection { background: var(--orange); color: var(--black); }
  :is(button, a, summary, dialog):focus-visible {
    outline-color: var(--focus);
  }

  /* Immersive video surfaces and the warm, opaque navigation state. */
  .landing-page, .site-header, .mobile-menu, .hero, .partner-hero,
  .game-panel, .partner-work-card, .partner-studio, .site-footer {
    --muted: var(--latte);
    --line: #E7D7BF38;
    --focus: var(--orange);
    color: var(--cream);
    color-scheme: dark;
  }
  .landing-page, .portal-preview { background: var(--cocoa); }
  .gateway-bottom { color: var(--latte); }
  .gateway-path:focus-visible .path-title { text-decoration-color: var(--cream); }
  .site-header { background: transparent; }
  .site-header.is-scrolled, .menu-open .site-header, .mobile-menu {
    background: var(--cocoa);
  }
  .site-header.is-scrolled .desktop-nav a,
  .site-header.is-scrolled .desktop-nav button { text-shadow: none; }
  .mobile-menu p { color: var(--latte); }
  .menu-toggle span { background: var(--cream); }
  .hero, .partner-hero { background-color: var(--cocoa); }
  .hero { --focus: var(--cream); }
  .hero-blurb { color: var(--cream); }
  .hero-platforms { color: var(--latte); }
  .hero-platforms i { background: var(--latte); }
  .hero-arrow { color: var(--white); }
  .hero-arrow:hover { color: var(--orange); }

  /* Cream editorial sections: dark titles and quiet, readable secondary copy. */
  .news-section, .games-section, .partner-approach, .partner-work,
  .partner-contact {
    --muted: var(--walnut);
    --line: var(--latte);
    --focus: var(--cocoa);
    background: var(--cream);
    color: var(--cocoa);
  }
  .games-section, .news-row + .news-row { border-color: var(--latte); }
  .news-story-link { color: var(--cocoa); }
  .news-row:hover .news-story-link, .news-story-link:focus-visible {
    color: var(--cocoa);
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
  }
  .news-story-link:focus-visible::after { outline-color: var(--cocoa); }
  .news-story-copy p, .news-trailer-external { color: var(--walnut); }
  .news-trailer-external:hover { color: var(--cocoa); }
  .news-trailer-screen { background: var(--cocoa); }
  .news-trailer-screen iframe:focus-visible { outline-color: var(--cocoa); }
  .news-trailer-play-icon {
    background: var(--white);
    color: var(--black);
    border-color: var(--white);
    backdrop-filter: none;
  }
  .news-trailer-play:hover .news-trailer-play-icon,
  .news-trailer-play:focus-visible .news-trailer-play-icon {
    background: var(--black);
    border-color: var(--black);
    color: var(--white);
  }
  .news-trailer-label { color: var(--white); }
  .news-thumb { background: var(--latte); }
  .news-thumb.brand-art { background: var(--orange); }
  .news-thumb .tile-back { background: var(--cocoa); }
  .news-thumb .tile-front { background: var(--cream); }
  .news-thumb .tile-front svg { fill: var(--cocoa); }
  .news-thumb.hiring-art { background: var(--latte); color: var(--cocoa); }
  .hiring-art-text > span { color: var(--cocoa); }

  /* The games keep their own artwork, with Cocoa shadows and Cream captions. */
  .game-panel { border-color: var(--latte); --focus: var(--cream); }
  .game-panel.sushi-panel { background: var(--cocoa); }
  .secret-panel { background: var(--cocoa); }
  .panel-reveal p, .panel-action { color: var(--cream); }
  .panel-platforms { color: var(--latte); }
  .panel-action { border-color: #E7D7BF59; }
  .status-badge, .status-badge.muted {
    background: #2A1A12D9;
    border-color: #E7D7BF59;
    color: var(--cream);
  }
  .placeholder-rings, .placeholder-rings::before, .placeholder-rings::after {
    border-color: #E7D7BF21;
  }

  /* Orange is a confident feature colour, paired with dark type. */
  .player-studio, .partner-careers {
    --focus: var(--cocoa);
    --line: #2A1A1259;
    background: var(--orange);
    color: var(--cocoa);
    border-color: var(--orange);
  }
  .player-studio p, .partner-careers p { color: var(--cocoa); }
  .player-studio .text-link .circle-arrow { border-color: var(--cocoa); }
  .player-studio .text-link:hover .circle-arrow,
  .player-studio .text-link:focus-visible .circle-arrow {
    background: var(--cocoa);
    border-color: var(--cocoa);
    color: var(--cream);
  }
  .button-orange, .button-orange:hover {
    --button-fill: var(--orange);
    background: transparent;
    color: var(--black);
  }
  .button-orange:hover { box-shadow: none; filter: drop-shadow(0 10px 18px #FF5C0029); }
  .button-dark { --button-fill: var(--cocoa); background: transparent; color: var(--cream); }
  .button-dark:hover { --button-fill: var(--black); background: transparent; }

  /* Partner page: editorial Cream, studio Cocoa, careers Orange. */
  .partner-hero {
    background: radial-gradient(ellipse at 78% 44%, #6B4A3666, transparent 50%), var(--cocoa);
  }
  .partner-intro, .partner-lede { color: var(--latte); }
  .partner-hero h1 .serif-accent { color: var(--orange); }
  .partner-art-tile { background: var(--cocoa); outline-color: #E7D7BF38; }
  .partner-art-orbit { border-color: #E7D7BF26; }
  .partner-art-orbit::after { border-color: #E7D7BF1A; }
  .approach-heading > p, .approach-answer { color: var(--walnut); }
  .approach-step { border-color: var(--latte); }
  .approach-step:last-child { border-color: var(--latte); }
  .approach-step summary:focus-visible { outline-color: var(--cocoa); }
  .detail-cross::before, .detail-cross::after { background: var(--cocoa); }
  .partner-work { border-top: 1px solid var(--latte); }
  .partner-work-card { border-color: var(--latte); --focus: var(--cocoa); }
  .work-caption { color: var(--cream); }
  .work-caption small { color: var(--latte); }
  .partner-studio { background: var(--cocoa); }
  .studio-statement p { color: var(--cream); }
  .studio-statement p + p, .studio-value p { color: var(--latte); }
  .careers-outline { stroke: #2A1A1222; }
  .partner-contact p, .contact-links small, .contact-destination { color: var(--walnut); }
  .contact-links a:hover {
    color: var(--cocoa);
    text-decoration: underline;
    text-decoration-color: var(--orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
  }
  .contact-links a:hover svg { color: var(--cocoa); }

  /* Footer, motion controls and social links sit on solid Cocoa. */
  .site-footer { background: var(--cocoa); }
  .footer-nav svg, .footer-bottom, .footer-motion, .social-note { color: var(--latte); }
  .footer-nav a:hover, .footer-nav button:hover { color: var(--orange); }
  .social-links button, .social-links a {
    background: var(--white);
    border-color: var(--white);
    color: var(--orange);
  }
  .social-links button:hover, .social-links a:hover {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--white);
  }
  .motion-paused .motion-dot { background: var(--latte); }

  /* Light dialogs continue the editorial palette across every content state. */
  .content-dialog {
    --muted: var(--walnut);
    --line: var(--latte);
    --focus: var(--cocoa);
    background: var(--cream);
    color: var(--cocoa);
    border-color: var(--latte);
    color-scheme: light;
    scrollbar-color: var(--walnut) var(--latte);
  }
  .content-dialog::backdrop { background: #2A1A12BB; }
  .dialog-body > .eyebrow, .dialog-body p { color: var(--walnut); }
  .dialog-body .inline-link {
    color: var(--cocoa);
    text-decoration-color: var(--orange);
    text-decoration-thickness: 2px;
  }
  .dialog-chips span { background: var(--latte); color: var(--cocoa); }
  .dialog-row, .dialog-row:hover { color: var(--cocoa); }
  .dialog-row:hover { text-decoration: underline; text-underline-offset: 4px; }
  .dialog-row span small { color: var(--walnut); }
  .placeholder-notice { background: var(--latte); border-color: var(--cocoa); }
  .dialog-close { background: var(--cocoa); border-color: var(--latte); }
  .dialog-close:hover { background: var(--orange); border-color: var(--orange); }
  .dialog-close:hover span { background: var(--black); }
  .noscript-note { background: var(--cream); color: var(--cocoa); }
}