/*
 * Voicy Games -- shared hypercasual style layer.
 *
 * WHAT THIS IS: a single set of CSS custom properties + small utility
 * classes that any game's own stylesheet can pull in with one @import,
 * instead of every game hand-rolling its own palette/type-scale/button
 * shapes from scratch (the gap flagged in memory: "no shared style/
 * framework across the games").
 *
 * WHAT THIS IS NOT: a theme that auto-restyles a game. Nothing here
 * targets a specific game's class names (.card, .hud, etc.) or ships
 * layout rules -- it only defines --tokens and a few opt-in .hc-*
 * utility classes. A game adopts pieces of it deliberately, at its own
 * pace, by referencing the variables / applying the utility classes
 * where it chooses to.
 *
 * ART DIRECTION (owner directive, see memory game-art-direction-
 * hypercasual): bright, colorful, chunky, juicy, playful; big/bold
 * readable type; soft depth (shadow/bevel), big tactile rounded
 * buttons, saturated candy palette, rewarding progression feel.
 * References: Gardenscapes / Clash Royale (level menus), MTG Arena
 * (card-game readability). Explicitly NOT the dark cyber-UI
 * (navy/slate + thin flat boxes + small text) that AI tooling defaults
 * to -- see e.g. www/games/sea-hunter-cards/style.css's --bg: #0a0e14
 * palette, which predates this file and is the "don't" example.
 *
 * USAGE
 * -----
 * In a game's own stylesheet:
 *
 *   @import url("../hypercasual.css");
 *
 *   .my-primary-button {
 *     background: var(--hc-candy-orange);
 *     color: var(--hc-ink);
 *     border-radius: var(--hc-radius-lg);
 *     box-shadow: var(--hc-shadow-pop);
 *     font-family: var(--hc-font-display);
 *     font-weight: 800;
 *   }
 *
 * Or use the ready-made utility classes directly in markup:
 *
 *   <button class="hc-btn hc-btn-primary">Play</button>
 *   <div class="hc-card">...</div>
 *
 * Adopt incrementally -- pulling in just the palette + font tokens for
 * one button is a valid, complete use of this file. See
 * www/games/README-hypercasual-style.md for the short adoption guide
 * and www/games/sea-hunter-cards/style.css's "hypercasual tokens" block
 * for a real (small, proof-of-concept) adoption.
 */

:root {
  /* ---- Type -------------------------------------------------------
     Baloo 2 / Nunito read as rounded, friendly, "casual mobile game"
     display faces (Baloo 2 for headlines/buttons, Nunito for body/UI
     text) -- both are Google Fonts. This file does NOT fetch them
     over the network (games ship as static files behind a strict-ish
     CSP-ish deploy and must keep working offline/self-contained), so
     the stack leads with the two names and falls back to rounded-ish
     system fonts that are already close in spirit if neither is
     locally installed. A game that wants the real webfont can add its
     own @font-face (woff2 asset) and keep using --hc-font-display /
     --hc-font-body as the variable it points at -- nothing else in
     this file needs to change. */
  --hc-font-display: "Baloo 2", "Nunito", "Segoe UI Rounded", "SF Pro Rounded",
    system-ui, sans-serif;
  --hc-font-body: "Nunito", "Baloo 2", "Segoe UI Rounded", "SF Pro Rounded",
    system-ui, sans-serif;

  /* Big-font scale (readability is the #1 owner ask). Treat these as
     a ladder, not fixed sizes -- pick the rung that fits the element. */
  --hc-text-xs: 0.8rem;
  --hc-text-sm: 0.95rem;
  --hc-text-md: 1.15rem;
  --hc-text-lg: 1.5rem;
  --hc-text-xl: 2rem;
  --hc-text-xxl: 2.75rem;

  /* ---- Candy palette ------------------------------------------------
     Saturated, warm, high-contrast -- the opposite of a navy/slate
     dark-cyber-UI palette. Named by hue, not by role, so games can
     assign them to whatever role fits (a "primary" button in one game
     might be the win-green, in another the candy-orange). */
  --hc-candy-orange: #ff8a3d;
  --hc-candy-orange-deep: #ee6c1f;
  --hc-candy-pink: #ff5d8f;
  --hc-candy-purple: #9b5de5;
  --hc-candy-blue: #3fb6ff;
  --hc-candy-teal: #2fd4c4;
  --hc-candy-yellow: #ffd23f;
  --hc-candy-green: #5bd86a;
  --hc-candy-red: #ff5252;

  /* Surfaces -- bright cream/paper, not dark navy. Cards/panels sit on
     a slightly darker cream so they read as "gummy" raised shapes. */
  --hc-bg: #fff3e0;
  --hc-bg-panel: #ffffff;
  --hc-bg-card: #fff8ef;
  --hc-border: #ffd8a8;

  /* Ink (text) -- warm near-black, not pure #000, and a softer dim
     tone for secondary text. Kept dark-on-light for the bright theme;
     a game rendering on a dark background can still borrow the
     candy/radius/shadow tokens and supply its own ink pair. */
  --hc-ink: #3a2a1a;
  --hc-ink-dim: #8a7458;

  /* Semantic aliases (win/loss/draw/etc.) so game logic can stay
     palette-agnostic -- point at a candy-* token, not a raw hex. */
  --hc-success: var(--hc-candy-green);
  --hc-danger: var(--hc-candy-red);
  --hc-warning: var(--hc-candy-yellow);
  --hc-info: var(--hc-candy-blue);

  /* ---- Shape --------------------------------------------------------
     Gummy/chunky rounded corners -- big radii, not the 8-10px "AI
     default" boxes. */
  --hc-radius-sm: 10px;
  --hc-radius-md: 16px;
  --hc-radius-lg: 24px;
  --hc-radius-pill: 999px;

  /* ---- Depth ----------------------------------------------------------
     Soft shadow + a bottom "bevel" edge for the tactile, poppable
     button feel (Gardenscapes/Clash-Royale style), plus a pressed
     state that flattens both. */
  --hc-shadow-pop: 0 6px 0 rgba(0, 0, 0, 0.18), 0 10px 18px rgba(0, 0, 0, 0.12);
  --hc-shadow-card: 0 4px 0 rgba(0, 0, 0, 0.12), 0 6px 12px rgba(0, 0, 0, 0.1);
  --hc-shadow-pressed: 0 2px 0 rgba(0, 0, 0, 0.18);

  /* Spacing ladder, for consistent chunky padding on buttons/cards. */
  --hc-space-xs: 4px;
  --hc-space-sm: 8px;
  --hc-space-md: 16px;
  --hc-space-lg: 24px;
  --hc-space-xl: 36px;
}

/* ---- Opt-in utility classes -------------------------------------------
   Small, self-contained, and namespaced under .hc- so they can never
   collide with a game's existing class names. Nothing here is
   auto-applied; a game opts in by adding the class. */

.hc-btn {
  font-family: var(--hc-font-display);
  font-weight: 800;
  font-size: var(--hc-text-md);
  border: none;
  border-radius: var(--hc-radius-lg);
  padding: var(--hc-space-md) var(--hc-space-xl);
  cursor: pointer;
  box-shadow: var(--hc-shadow-pop);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.hc-btn:active {
  transform: translateY(4px);
  box-shadow: var(--hc-shadow-pressed);
}
.hc-btn-primary {
  background: var(--hc-candy-orange);
  color: #ffffff;
}
.hc-btn-secondary {
  background: var(--hc-candy-blue);
  color: #ffffff;
}
.hc-btn-success {
  background: var(--hc-success);
  color: #ffffff;
}

.hc-card {
  background: var(--hc-bg-card);
  border: 2px solid var(--hc-border);
  border-radius: var(--hc-radius-md);
  box-shadow: var(--hc-shadow-card);
  color: var(--hc-ink);
  font-family: var(--hc-font-body);
}

.hc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--hc-space-xs);
  background: var(--hc-candy-yellow);
  color: var(--hc-ink);
  font-family: var(--hc-font-display);
  font-weight: 700;
  border-radius: var(--hc-radius-pill);
  padding: var(--hc-space-xs) var(--hc-space-md);
}