/* ============================================================================
   OceanBite design tokens — the canonical copy.
   ----------------------------------------------------------------------------
   Source of truth for the web client's visual language. The brand tokens are
   lifted verbatim from docs/site.css so the marketing site and the player web
   client read as one product; everything below the brand block is the utility
   layer a document theme never needed (dense data, rarity, state).

   The ui-kit/*.html preview cards inline a copy of this block so each card
   renders standalone in Claude Design. If you change a value here, change it
   there too — `npm run ui-kit:check` (see README) diffs them.
   ========================================================================== */

:root {
  /* --- Brand: verbatim from docs/site.css -------------------------------- */
  --abyss: #04121f;
  --deep: #082338;
  --mid: #0d3350;
  --ink: #dcebf5;
  --ink-dim: #8fb3c7;
  --foam: #5eead4;
  --foam-dim: #2dd4bf33;
  --gold: #f4c45c;
  --card: #07203399;
  --line: #1d4a6b;

  /* --- Depth: elevation named for the water column ----------------------- *
   * The game's own vocabulary is depth — biomes descend, rarity descends.
   * So surfaces are named for where they sit in the column rather than
   * panel-1/2/3. Higher in the list = closer to the surface = lighter.      */
  --depth-foam: #10405f;   /* raised: hover, active tab, selected row        */
  --depth-shallow: #0d3350; /* alias of --mid: inputs, secondary buttons     */
  --depth-deep: #082338;   /* alias of --deep: panels, cards, table body     */
  --depth-abyss: #04121f;  /* alias of --abyss: page ground                  */

  /* Page ground. The radial layers are the site's, minus the fixed
     attachment — inside a scrolling app pane that causes repaint jank.      */
  --ground:
    radial-gradient(1200px 600px at 80% -10%, #11486b66, transparent 60%),
    radial-gradient(900px 500px at -10% 30%, #0a3a5a55, transparent 55%),
    linear-gradient(180deg, var(--deep) 0%, var(--abyss) 45%, #020a12 100%);

  /* --- Rarity ------------------------------------------------------------ *
   * Discord signals rarity with emoji circles (src/data/fish.js RARITY_META):
   *   ⚪ common  🟢 uncommon  🔵 rare  🟣 epic  🟠 legendary  🔴 mythic
   * These are the web equivalents of those Twemoji circles, with two
   * deliberate departures — see ui-kit/foundations-color.html for the
   * reasoning and the measured contrast ratios.                             */
  --rarity-common: #c8d8e4;
  --rarity-uncommon: #7fc35f;
  --rarity-rare: #5aa9e6;
  --rarity-epic: #b78aea;
  --rarity-legendary: #f4a03a;
  --rarity-mythic: #ff5d6c;

  /* Overlays that stack on top of a rarity, never replace it. */
  --shiny: #fff3a8;
  --shiny-glow: #fff3a866;

  /* --- State ------------------------------------------------------------- */
  --good: #4ade80;
  --warn: var(--gold);
  --bad: #ff6b6b;

  /* --- Type -------------------------------------------------------------- *
   * Two families, three roles. Fraunces carries the brand voice and is used
   * with restraint — headings and hero numbers only. Atkinson Hyperlegible
   * does the reading work; it was drawn for legibility and disambiguates
   * 0/O and 1/l/I, which is worth real money on a screen full of weights and
   * balances. The data role is Atkinson with tabular figures rather than a
   * third family.                                                           */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, sans-serif;
  --font-data: var(--font-body);

  /* The marketing site sets body at 1.75 for long-form reading. UI is denser:
     prose 1.5, data rows 1.35. */
  --lh-prose: 1.5;
  --lh-data: 1.35;
  --lh-tight: 1.15;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.35rem;
  --text-2xl: clamp(1.6rem, 3vw, 2.1rem);
  --text-hero: clamp(2.1rem, 6vw, 3.1rem);

  /* --- Space ------------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;

  /* --- Shape ------------------------------------------------------------- *
   * Two radii only, both inherited from the site: 10px for controls and
   * small tiles, 14px for panels. A third radius is how a system starts
   * looking arbitrary.                                                      */
  --r-control: 10px;
  --r-panel: 14px;
  --r-pill: 99px;

  --border: 1px solid var(--line);
  --shadow-panel: 0 12px 32px -16px #00000099;
  --shadow-raised: 0 12px 32px -16px var(--foam-dim);

  --focus: 2px solid var(--foam);
  --focus-offset: 2px;
}

/* The scalloped divider from docs/site.css:105 — the brand's own structural
   device, carried forward rather than replaced by a plain hairline. */
.wave-rule {
  border: none;
  height: 14px;
  width: 180px;
  margin: var(--s-6) auto;
  background: radial-gradient(circle at 8px -4px, transparent 9px, var(--line) 10px, transparent 11px);
  background-size: 16px 14px;
  background-repeat: repeat-x;
  opacity: 0.8;
}

/* Quality floor. Every preview and every consuming app inherits these. */
*, *::before, *::after { box-sizing: border-box; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--focus);
  outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}