/*
 * Design tokens, transcribed from godot/autoload/theme_tokens.gd.
 *
 * That file is the game's single source of truth for colour, radius, spacing
 * and motion, and it is unusually explicit about where each value came from.
 * This is a transcription, not a reinterpretation: if a value needs to change
 * it changes there first, then here. Do not introduce a web-only palette.
 *
 * The app has one committed look and no dark theme, so neither does the site.
 */

:root {
  color-scheme: light;

  /* --- Sky ---------------------------------------------------------------
     The screen background, verbatim including stop positions, from the
     commissioned design file's own
     linear-gradient(180deg,#1E8FE8 0%,#4FB0F5 32%,#A6DBFF 66%,#EEF9FF 100%). */
  --sky-0: #1e8fe8;
  --sky-1: #4fb0f5;
  --sky-2: #a6dbff;
  --sky-3: #eef9ff;
  --sky: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 32%, var(--sky-2) 66%, var(--sky-3) 100%);

  /* --- Card surfaces ----------------------------------------------------- */
  --card: #ffffff;
  --card-cream: #fffdf6;
  --card-sunken: #eaf6ff;
  --card-rim: #d8effb;
  /* Solid, unblurred lift band under a card (the design file's
     `box-shadow: 0 Npx 0 #C4D6E4`) - NOT a soft blur. */
  --card-bevel: #c4d6e4;
  --card-bevel-hero: #bfd4e4;
  /* Blue-tinted ambient shadow. Never pure black: tinting the shadow to the
     background hue is what makes a cream card read as lifted off a blue sky
     rather than pasted flat onto it. */
  --card-shadow: rgba(15, 61, 107, 0.22);

  /* --- Accents: one meaning each ----------------------------------------- */
  --play-blue: #2e9cff;  /* the ONE primary-action colour */
  --sun: #ffc53d;        /* streak / warmth */
  --leaf: #3dd65c;       /* success / solved */
  --grape: #9b5fff;      /* collection */
  --berry: #ff4d6a;      /* destructive / error */

  /* --- Ink --------------------------------------------------------------- */
  --ink-hi: #1b2a3a;
  --ink: #425466;
  --ink-lo: #536a80;
  --ink-card-title: #1d3d5c;
  --ink-card-body: #26496b;
  --ink-card-meta: #31567a;
  --ink-card-muted: #5c7b99;
  --ink-glyph-muted: #7e9cb8;
  /* Label on a PLAY_BLUE fill. Counter-intuitively the DARK ink wins here:
     #1B2A3A on #2E9CFF is 5.08:1, white on the same blue is only 2.87:1. */
  --ink-on-blue: #1b2a3a;

  /* --- Display title strokes (paint-order: stroke fill) ------------------ */
  --stroke-wordmark: #17538f;
  --stroke-section: #2a72b8;
  --display-outline: #08131f;

  /* --- Gummy buttons ----------------------------------------------------- */
  --gummy-blue-top: #59b6ff;
  --gummy-blue-bottom: #2b8df5;
  --gummy-blue-lift: #1464be;
  --gummy-blue-inset: rgba(9, 64, 124, 0.32);
  --gem-gold-0: #ffd86b;
  --gem-gold-1: #ffb92e;
  --gem-shadow: #ce8500;
  --gem-ink: #7a4300;
  --gummy-gold-inset: rgba(150, 88, 0, 0.28);
  --cta-green-0: #7be08f;
  --cta-green-1: #3fbf52;

  /* --- Co-op purple ------------------------------------------------------ */
  --coop-0: #8e4bf0;
  --coop-1: #b87bff;
  --coop-shadow: #5d26ae;
  --coop-link-ink: #6a2fc0;

  /* --- Wood: the "Sunlit Puzzle Workshop" material ----------------------- */
  --wood-honey: #d89438;
  --wood-light: #f4c873;
  --wood-dark: #8a4b1f;
  --brass: #f4b62e;

  /* --- Odds and ends used by more than one component --------------------- */
  --progress-track: #e3edf5;
  --gold-chip-bg: #fff0c9;
  --gold-chip-ink: #8a5b00;
  --gold-chip-diamond: #e39a00;
  --warning-bg: #ffe8ec;
  --warning-ink: #a32d42;
  --upload-well-bg: #f2f9ff;
  --upload-well-border: #b9d2e6;
  --tab-inactive: #9db6cc;
  --chip-scrim: rgba(11, 50, 90, 0.55);

  /* --- Spacing scale: 4 8 12 16 24 32 48 64 ------------------------------ */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;

  /* --- Radii ------------------------------------------------------------- */
  --r-card: 20px;
  --r-tile: 16px;
  --r-thumb: 14px;
  --r-pill: 999px;

  /* --- Motion -----------------------------------------------------------
     The game's four named motion classes (theme_tokens.gd "Motion - spec
     3.4"), reused verbatim so the site moves the way the app does. */
  --settle-duration: 220ms;   /* SETTLE_DURATION 0.22 */
  --settle-stagger: 40ms;     /* SETTLE_STAGGER 0.04 */
  --settle-rise: 12px;        /* SETTLE_RISE_DP 12.0 */
  --react-down: 90ms;         /* REACT_DOWN 0.09 */
  --react-up: 180ms;          /* REACT_UP 0.18 */
  --react-scale: 0.97;        /* REACT_SCALE */
  --bloom-duration: 600ms;    /* BLOOM_DURATION 0.6 */
  --breathe-slow: 7s;         /* BREATHE_MAX */
  --breathe-fast: 4s;         /* BREATHE_MIN */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-gummy: cubic-bezier(0.34, 1.56, 0.64, 1); /* slight overshoot */

  /* --- Layout ------------------------------------------------------------ */
  --measure: 68ch;
  --page-max: 1180px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 68px;

  /* --- Elevation --------------------------------------------------------- */
  --z-bg: 0;
  --z-content: 10;
  --z-sticky: 40;
  --z-overlay: 100;
}