/*
 * main-cyberpunk.css — Direction 1: Cyberpunk Refined
 * Hex values lifted verbatim from design/directions/cyberpunk.jsx:6-19.
 * Loaded ONLY when body[data-redesign-theme="cyberpunk"]; main-redesign-base.css
 * provides the legacy-token bridge.
 */

body[data-redesign-theme="cyberpunk"] {
  --rd-bg:                 #0a0e1f;
  --rd-bg-elevated:        #060814;
  --rd-panel:              #141a30;
  --rd-panel-hi:           #1c2440;

  --rd-ink:                #e8ecff;
  --rd-ink-dim:            #8891b8;
  --rd-line:               rgba(126, 142, 200, 0.18);

  --rd-accent:             oklch(70% 0.22 340);   /* magenta */
  --rd-accent-hi:          oklch(78% 0.15 200);   /* cyan */
  --rd-accent-dim:         oklch(45% 0.15 340);

  --rd-success:            oklch(78% 0.18 150);
  --rd-warning:            oklch(82% 0.18 75);    /* amber */
  --rd-danger:             oklch(65% 0.22 25);

  --rd-font-display:       'Rajdhani', system-ui, sans-serif;
  --rd-font-body:          'Inter', system-ui, sans-serif;
  --rd-font-mono:          'JetBrains Mono', ui-monospace, monospace;

  --rd-radius-sm:          2px;
  --rd-radius-md:          6px;
  --rd-radius-lg:          8px;

  --rd-border-style:       1px solid var(--rd-line);
  --rd-shadow-card:        0 0 24px color-mix(in oklab, var(--rd-accent) 25%, transparent);

  --rd-text-display-case:    uppercase;
  --rd-text-display-tracking: 0.04em;
}

/* Backdrop: deep navy gradient + faint grid + subtle scanlines.
 * Mirrors directions/cyberpunk.jsx:22-50 (CpBackdrop). */
body[data-redesign-theme="cyberpunk"]::before {
  background:
    radial-gradient(ellipse at 20% 10%, oklch(45% 0.18 340 / 0.25), transparent 50%),
    radial-gradient(ellipse at 90% 90%, oklch(55% 0.15 200 / 0.18), transparent 50%),
    linear-gradient(180deg, #0a0e1f 0%, #060814 100%),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(255, 255, 255, 0.03) 2px 3px),
    repeating-linear-gradient(0deg, rgba(126, 142, 200, 0.06) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(126, 142, 200, 0.06) 0 1px, transparent 1px 48px);
  background-image: url("/pictures/pixel-art.webp");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  }