/* Sheepdog design tokens.
   Shared by the landing page, the in-game lobby and the phone controller.
   Everything is a custom property on :root; the few .sd-* primitives at the
   bottom are optional and only read these tokens. */

:root {
  color-scheme: dark;

  /* Palette */
  --sd-night: #07061a;      /* the sky; page background */
  --sd-deep: #160f38;       /* clouds, raised surfaces */
  --sd-haze: #7a6cb8;       /* quiet text, unlit dots, borders at rest */
  --sd-wool: #f2eeff;       /* text, lit dots, primary fill */
  --sd-cyan: #2ef2ff;       /* chromatic split, right channel; focus */
  --sd-magenta: #ff2daa;    /* chromatic split, left channel */

  --sd-wool-dim: rgb(242 238 255 / 0.14);
  --sd-haze-dim: rgb(122 108 184 / 0.22);

  /* Type */
  --sd-font: ui-monospace, "Cascadia Mono", "SF Mono", "JetBrains Mono", Menlo,
    Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  --sd-weight: 700;
  --sd-tracking: 0.32em;    /* labels are always uppercase and tracked */

  --sd-step--1: clamp(0.6875rem, 0.66rem + 0.1vw, 0.8125rem);
  --sd-step-0: clamp(0.875rem, 0.84rem + 0.2vw, 1.0625rem);
  --sd-step-1: clamp(1.125rem, 1.05rem + 0.4vw, 1.5rem);
  --sd-step-2: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
  --sd-step-3: clamp(2rem, 1.6rem + 2vw, 3.5rem);

  /* Space (4px base) */
  --sd-space-1: 0.25rem;
  --sd-space-2: 0.5rem;
  --sd-space-3: 0.75rem;
  --sd-space-4: 1rem;
  --sd-space-5: 1.5rem;
  --sd-space-6: 2rem;
  --sd-space-7: 3rem;
  --sd-space-8: 4rem;
  --sd-space-9: 6rem;

  /* Shape and effects */
  --sd-radius: 0;
  --sd-border: 2px;
  --sd-control-h: clamp(3.25rem, 3rem + 1vw, 4rem);
  --sd-split: 3px;          /* chromatic aberration offset on hover/focus */
  --sd-split-shadow: calc(var(--sd-split) * -1) 0 0 var(--sd-magenta),
    var(--sd-split) 0 0 var(--sd-cyan);
  --sd-scanlines: repeating-linear-gradient(
    to bottom, transparent 0 2px, rgb(0 0 0 / 0.22) 2px 3px);
  --sd-ease: cubic-bezier(0.2, 0.9, 0.1, 1);
}

/* Optional primitives */

.sd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sd-control-h);
  padding: 0 var(--sd-space-5);
  border: var(--sd-border) solid var(--sd-wool);
  border-radius: var(--sd-radius);
  background: transparent;
  color: var(--sd-wool);
  font: var(--sd-weight) var(--sd-step-1) / 1 var(--sd-font);
  letter-spacing: var(--sd-tracking);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  /* tracking adds trailing space after the last letter; pull it back */
  text-indent: var(--sd-tracking);
}
.sd-btn--solid { background: var(--sd-wool); color: var(--sd-night); }
.sd-btn:hover, .sd-btn:focus-visible { box-shadow: var(--sd-split-shadow); }

:where(a, button, input):focus-visible {
  outline: var(--sd-border) solid var(--sd-cyan);
  outline-offset: 4px;
}

.sd-crt::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: var(--sd-scanlines),
    radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / 0.55) 100%);
  /* over the sky, under main and footer (z-index 1) */
  z-index: 0;
}