/* Ohms Industries — design tokens
 * Drop this into a stylesheet and reference via var(--token-name).
 * The token names match the SKILL.md reference table.
 */

:root {
  /* ── Surfaces ───────────────────────────────────────── */
  --ohms-void:  #05080A;   /* primary dark surface              */
  --ohms-deep:  #0A0F13;   /* secondary dark surface (panels)   */
  --ohms-panel: #0E1519;   /* tertiary panel — slightly lifted  */
  --ohms-lume:  #E6F8FB;   /* inverted light foreground         */
  --ohms-paper: #f6f3ec;   /* printed-stationery cream          */
  --ohms-paper-shade: #e9e3d2; /* secondary paper                */

  /* ── Signal ─────────────────────────────────────────── */
  --ohms-cyan:     #00E5FF;
  --ohms-cyan-dim: #0AA3B8;

  /* ── Ink (light surfaces) ───────────────────────────── */
  --ohms-ink:      #18181a;
  --ohms-ink-soft: #4a4a4d;

  /* ── Lines & supporting ─────────────────────────────── */
  --ohms-line:        rgba(0, 229, 255, 0.18);
  --ohms-line-strong: rgba(0, 229, 255, 0.35);
  --ohms-dim:         rgba(220, 245, 250, 0.55);
  --ohms-grid:        rgba(0, 229, 255, 0.06);
  --ohms-grid-strong: rgba(0, 229, 255, 0.12);

  /* ── Type ───────────────────────────────────────────── */
  --ohms-font-display: 'Michroma', system-ui, sans-serif;
  --ohms-font-body:    'Chakra Petch', system-ui, sans-serif;
  --ohms-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── Effects ────────────────────────────────────────── */
  --ohms-glow:
    drop-shadow(0 0 6px rgba(0, 229, 255, 0.5))
    drop-shadow(0 0 14px rgba(0, 229, 255, 0.25));

  --ohms-bg-gradient:
    radial-gradient(120% 80% at 50% 0%, #0A0F13 0%, #05080A 70%, #020306 100%);
}

/* ── Optional utility classes ────────────────────────── */

.ohms-bg {
  background: var(--ohms-bg-gradient);
  color: var(--ohms-lume);
}

.ohms-grid-bg {
  position: relative;
}
.ohms-grid-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ohms-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ohms-grid) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 30%, #000 30%, transparent 100%);
          mask-image: radial-gradient(120% 100% at 50% 30%, #000 30%, transparent 100%);
}

.ohms-mono {
  font-family: var(--ohms-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ohms-dim);
}

.ohms-display {
  font-family: var(--ohms-font-display);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ohms-glow {
  filter: var(--ohms-glow);
}

.ohms-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ohms-cyan);
  box-shadow: 0 0 8px var(--ohms-cyan);
  vertical-align: middle;
  margin-right: 8px;
}