/* Splanet product shell tokens.
   Source of truth for cross-app chrome: public home, loading splash, and
   runtime HUD should consume these variables before adding local layout rules. */

:root {
  --splanet-product-bg: #071120;
  --splanet-product-bg-deep: #050b14;
  --splanet-product-page-ink: #f4fbff;
  --splanet-product-page-muted: rgba(244, 251, 255, .72);
  --splanet-product-ink: #122638;
  --splanet-product-ink-strong: #071928;
  --splanet-product-muted: #586b7c;
  --splanet-product-panel: #f7fbff;
  --splanet-product-panel-soft: rgba(247, 251, 255, .88);
  --splanet-product-panel-raised: #edf6fb;
  --splanet-product-line: rgba(18, 38, 56, .18);
  --splanet-product-line-strong: rgba(21, 39, 58, .64);
  --splanet-product-shadow: 0 18px 38px rgba(4, 13, 24, .34);
  --splanet-product-system: #9b8ddb;
  --splanet-product-system-soft: rgba(155, 141, 219, .24);
  --splanet-product-teal: #54cfc7;
  --splanet-product-team-0: #ff3fa8;
  --splanet-product-team-1: #2aa8ff;
  --splanet-product-team-2: #ff9b2b;
  --splanet-product-team-3: #7dff42;
  --splanet-product-radius-panel: 18px;
  --splanet-product-radius-control: 14px;
  --splanet-product-font: "IBM Plex Sans KR", "Apple SD Gothic Neo", system-ui, -apple-system, sans-serif;
}

.splanet-product-page-bg {
  background:
    radial-gradient(circle at 18% 0%, rgba(42, 168, 255, .18) 0%, transparent 34%),
    radial-gradient(circle at 83% 14%, rgba(255, 63, 168, .16) 0%, transparent 30%),
    radial-gradient(circle at 68% 95%, rgba(125, 255, 66, .10) 0%, transparent 36%),
    linear-gradient(180deg, #0b1729 0%, var(--splanet-product-bg) 58%, var(--splanet-product-bg-deep) 100%);
}

.splanet-product-panel {
  color: var(--splanet-product-ink);
  background:
    linear-gradient(90deg, rgba(155, 141, 219, .18), transparent 72px, rgba(84, 207, 199, .12)),
    linear-gradient(180deg, #ffffff, var(--splanet-product-panel));
  border: 2px solid var(--splanet-product-line-strong);
  border-radius: var(--splanet-product-radius-panel);
  box-shadow: var(--splanet-product-shadow);
}

.splanet-product-command {
  color: var(--splanet-product-ink-strong);
  background: linear-gradient(180deg, #76fff2, var(--splanet-product-teal));
  border: 2px solid rgba(21, 39, 58, .58);
  border-radius: var(--splanet-product-radius-control);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    inset 0 -5px 0 rgba(18, 38, 56, .07),
    0 10px 18px rgba(16, 36, 56, .18);
}