/**
 * Habbend — dark theme tokens (default).
 * Loaded before habbend.css. Light overrides live in habbend-theme-light.css.
 */

:root {
  color-scheme: dark;

  /* Page */
  --bg: #0f1419;
  --bg-elevated: #151b22;
  --fg: #e8eef4;
  --muted: #8b9aab;
  --accent: #3d8bfd;
  --accent-soft: rgba(61, 139, 253, 0.18);
  --success: #34d399;
  --danger: #f87171;
  --warn: #f59e0b;
  --com: #39bb9a;
  --es: #f7b84b;
  --br: #e14d2a;

  /* Translucent panels / hairlines */
  --panel: rgba(255, 255, 255, 0.04);
  --panel-border: rgba(255, 255, 255, 0.08);
  --panel-hover: rgba(255, 255, 255, 0.07);
  --hairline: rgba(255, 255, 255, 0.12);
  --hairline-strong: rgba(255, 255, 255, 0.18);
  --hairline-focus: rgba(255, 255, 255, 0.28);

  /* Content boxes */
  --content-box-bg: #1a1f26;
  --content-box-border: rgba(255, 255, 255, 0.16);
  --content-box-radius: 6px;
  --content-box-shadow: 0 3px 0 1px rgba(0, 0, 0, 0.55);
  --content-box-padding: 0.85rem 1rem;

  /* Controls (buttons, toggles) */
  --control-bg: #2a323c;
  --control-bg-hover: #363f4a;
  --control-border: rgba(255, 255, 255, 0.22);
  --control-border-hover: rgba(255, 255, 255, 0.32);
  --control-shadow: 0 3px 0 1px rgba(0, 0, 0, 0.4);
  --control-shadow-active: 0 1px 0 1px rgba(0, 0, 0, 0.4);
  --control-shadow-soft: 0 2px 0 1px rgba(0, 0, 0, 0.35);

  /* Inset surfaces (menu rows, avatar wells) */
  --surface-inset: #1a1f26;
  --surface-inset-hover: #222932;
  --surface-raised: #242b34;
  --surface-raised-hover: #323b47;

  /* Deep wells under pixel art / tables */
  --well-bg: #0c1016;
  --well-deep: #060910;
  --table-row: #232a33;
  --table-row-hover: #2b333e;

  /* Header sheets / dropdowns / bottom nav */
  --chrome-sheet: #2a323c;
  --chrome-sheet-border: rgba(255, 255, 255, 0.22);
  --bottom-nav-bg: rgba(15, 20, 25, 0.96);
  --bottom-nav-border: rgba(255, 255, 255, 0.12);
  --nav-hover-bg: rgba(255, 255, 255, 0.06);
  --nav-current-bg: rgba(255, 255, 255, 0.1);
  --nav-strong: #fff;

  /* Floating glass chips (generic UI) */
  --chip-bg: rgba(8, 12, 18, 0.72);
  --chip-bg-strong: rgba(8, 12, 18, 0.96);
  --chip-border: rgba(255, 255, 255, 0.18);
  --chip-shadow: 0 2px 0 1px rgba(0, 0, 0, 0.35);

  /* Recessed fields / fact chips / ledger wells */
  --field-bg: rgba(0, 0, 0, 0.28);
  --inset-bg: rgba(0, 0, 0, 0.22);
  --inset-bg-soft: rgba(0, 0, 0, 0.18);
  --inset-row-border: rgba(255, 255, 255, 0.06);
  --chart-baseline: rgba(255, 255, 255, 0.12);
  --chart-dot-last: #fff;

  /*
   * Habbo stage chrome.
   * Floor is an SVG iso pattern on rare detail; noco still uses tile image.
   */
  --stage-floor: #0b0f16;
  --stage-tile-image: url("/assets/tile_bg-dark.png");
  --stage-tile-filter: brightness(1.85) contrast(1.35);
  --stage-tile-fill: #141b26;
  --stage-tile-stroke: rgba(120, 145, 180, 0.28);
  --stage-tile-pulse: rgba(140, 175, 220, 0.4);
  /* Seamless 64×32 iso diamond for catalogue thumbs (CSS background). */
  --stage-tile-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Cpolygon points='32,0 64,16 32,32 0,16' fill='%23141b26' stroke='%237891b447' stroke-width='1'/%3E%3C/svg%3E");
  --stage-pad-fill: rgba(78, 98, 128, 0.92);
  --stage-pad-stroke: rgba(210, 225, 245, 0.55);
  --stage-chip-bg: rgba(8, 12, 18, 0.72);
  --stage-chip-bg-hover: rgba(16, 22, 32, 0.88);
  --stage-chip-border: rgba(255, 255, 255, 0.18);
  --stage-chip-border-hover: rgba(255, 255, 255, 0.3);
  --stage-chip-shadow: 0 2px 0 1px rgba(0, 0, 0, 0.35);
  --stage-chip-shadow-active: 0 1px 0 1px rgba(0, 0, 0, 0.35);
  --stage-chip-fg: rgba(255, 255, 255, 0.88);
  --stage-chip-fg-strong: #fff;

  /* Photo / banner scrims (stay dark over imagery in both themes) */
  --scrim-00: rgba(8, 12, 18, 0);
  --scrim-18: rgba(8, 12, 18, 0.18);
  --scrim-35: rgba(8, 12, 18, 0.35);
  --scrim-55: rgba(8, 12, 18, 0.55);
  --scrim-72: rgba(8, 12, 18, 0.72);
  --scrim-82: rgba(8, 12, 18, 0.82);

  /* Body atmosphere */
  --body-glow-a: var(--accent-soft);
  --body-glow-b: rgba(255, 255, 255, 0.05);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  --type-emboss: rgba(0, 0, 0, 0.55);
  --title-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  --icon-fg: var(--muted);
  --habbo-bevel: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.2) 0 50%,
    transparent 50% 100%
  );

  /* Typography / radius (shared across themes) */
  --radius: 14px;
  --radius-sm: 10px;
  --font: "Volter", "Segoe UI", system-ui, -apple-system, "Noto Sans", "DejaVu Sans", sans-serif;
  --font-pixel: "Volter", "Segoe UI", system-ui, -apple-system, "Noto Sans", "DejaVu Sans", sans-serif;
  --font-emdash: "Segoe UI", system-ui, -apple-system, "Noto Sans", "DejaVu Sans", sans-serif;
}