/*
  Shared visual theme for the Mini Games hub.
  Mirrors the design tokens used by the cbh-mobile-app "redesign" system
  (Stone/Lemon palette, Lato/Lora type, pill buttons, 24px cards) so this
  app reads as part of the same product if it is ever framed inside it.
*/

:root {
  --cbh-font-body: "Lato", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, sans-serif;
  --cbh-font-heading: "Lora", Georgia, "Times New Roman", serif;

  --cbh-bg: #f6f5f3;
  --cbh-bg-secondary: #f4f2ec;
  --cbh-surface: #ffffff;
  --cbh-surface-alt: #fffefc;

  --cbh-text: #37171a;
  --cbh-text-secondary: rgba(55, 23, 26, .7);
  --cbh-text-tertiary: rgba(55, 23, 26, .6);
  --cbh-text-disabled: rgba(55, 23, 26, .4);
  --cbh-text-invert: #ffffff;

  --cbh-border: rgba(55, 23, 26, .16);
  --cbh-border-strong: rgba(55, 23, 26, .28);

  --cbh-accent: #f8f831;
  --cbh-accent-dark: #e6e610;
  --cbh-accent-light: #ffff80;
  --cbh-accent-text: #37171a;

  --cbh-success: #249a34;
  --cbh-warning: #ca7236;
  --cbh-danger: #a82a44;

  --cbh-radius-large: 32px;
  --cbh-radius-card: 24px;
  --cbh-radius-small: 12px;
  --cbh-radius-xsmall: 8px;
  --cbh-radius-pill: 999px;

  --cbh-shadow-card: 0 4px 24px rgba(55, 23, 26, .06);
  --cbh-shadow-raised: 0 18px 50px rgba(55, 23, 26, .10);

  /* Readable-on-light stand-in for the brand yellow when it's used as text
     (the accent itself is only legible as a fill, per the cbh palette). */
  --cbh-eyebrow: #8a6d10;
}

/* Circular back-navigation button, styled after cbh-mobile-app's
   PageHeaderTopRow back button (outlined icon button, chevron-left). */
.cbh-back-button {
  position: fixed;
  z-index: 1000;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--cbh-border-strong);
  background: var(--cbh-surface);
  color: var(--cbh-text);
  box-shadow: var(--cbh-shadow-card);
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.cbh-back-button svg {
  width: 20px;
  height: 20px;
  display: block;
}

.cbh-back-button:hover {
  background: var(--cbh-bg-secondary);
}

.cbh-back-button:focus-visible {
  outline: 2px solid var(--cbh-text);
  outline-offset: 2px;
}

.cbh-back-button:active {
  transform: scale(.96);
}

/* For placing the back control inline within an existing header/nav bar
   instead of floating it over the page. */
.cbh-back-button--inline {
  position: static;
  flex: none;
  width: 40px;
  height: 40px;
  box-shadow: none;
}