/* ============================================================
   TOOLS · PATTERNS
   Reusable background images, exposed as custom properties so
   components can apply them by `background-image: var(--pattern-*)`.
   Pure CSS — no preprocessor mixins available.
   ============================================================ */

:root {
  /* CRT scanlines — overlay at low opacity */
  --pattern-scanlines:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(0, 0, 0, 0.25) 3px,
      rgba(0, 0, 0, 0.25) 3px
    );

  /* Subtler scanlines for body text panels */
  --pattern-scanlines-soft:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 3px,
      rgba(0, 0, 0, 0.12) 4px
    );

  /* Pixel grid — telemetry, annunciator backdrop */
  --pattern-grid:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);

  --pattern-grid-major:
    linear-gradient(var(--grid-line-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-major) 1px, transparent 1px);

  /* Brushed metal — diagonal hairlines on bezel chrome */
  --pattern-brushed:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 1px,
      rgba(255, 255, 255, 0.03) 1px,
      rgba(255, 255, 255, 0.03) 2px
    );

  /* ───── DESTRUCTIVE / OPERATOR-ONLY TIER ─────────────────────────────────
     Industrial hazard stripes (amber-over-black). RESERVED for genuinely
     destructive/irreversible zones (purge, delete-account) and the operator
     console — the one place hazard signaling belongs. They must NEVER dress a
     calm GTD user surface (02-reconciliation, Rules 1–4). Do not apply
     `--pattern-hazard` / `c-hazard` in app/views/app/**. See the styleguide's
     "Destructive-only tier" section.
     ──────────────────────────────────────────────────────────────────────── */
  --pattern-hazard:
    repeating-linear-gradient(
      45deg,
      var(--c-signal-amber) 0,
      var(--c-signal-amber) 12px,
      var(--c-black) 12px,
      var(--c-black) 24px
    );

  /* Vaporwave horizon — for hero / boot screen only */
  --pattern-horizon:
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 60%,
      color-mix(in srgb, var(--c-signal-magenta) 30%, transparent) 60%,
      transparent 61%
    );

  /* The signature gradient — brand identity ONLY: the site wordmark and
     the hero highlight. A calm Birren sweep between luminous phosphor-cyan
     and rooted medium-blue, through teal. Runs right→left so the bright
     clarity end leads (left) and settles into grounded control (right). The
     saturated cyan clarity end holds contrast on both themes, so one gradient
     serves both. References the brand tokens directly so it stays put even as
     the signal palette retunes. */
  --gradient-vapor:
    linear-gradient(
      270deg,
      var(--c-brand-deep) 0%,
      var(--c-brand-mid) 50%,
      var(--c-brand-hi) 100%
    );

  /* Phosphor glow gradient — radial bloom on terminals */
  --gradient-phosphor:
    radial-gradient(
      ellipse at center,
      color-mix(in srgb, var(--c-phosphor-green) 15%, transparent) 0%,
      transparent 70%
    );

  /* CRT vignette — darken corners */
  --gradient-vignette:
    radial-gradient(
      ellipse at center,
      transparent 50%,
      rgba(0, 0, 0, 0.6) 100%
    );
}

/* ---------- LIGHT theme overrides (G3) ----------
   The dark scanline overlay + corner vignette are dark-room CRT effects; on a
   lit cream field they read as "surveillance-room" mud and fight the Calm
   Control Room promise. In light: retire the dark stripes/vignette, and re-tune
   the brushed hairline (white-3% is invisible on cream) to a faint warm-recess
   line. The hazard stripe stays as-is — a genuine hazard is correctly black/amber
   in any theme (gating it to destructive-only is chunk 13). */
[data-theme="light"] {
  --pattern-scanlines:      none;
  --pattern-scanlines-soft: none;
  --gradient-vignette:      none;

  --pattern-brushed:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 1px,
      color-mix(in srgb, var(--c-bezel-shadow) 28%, transparent) 1px,
      color-mix(in srgb, var(--c-bezel-shadow) 28%, transparent) 2px
    );
}