/* =====================================================================
 * CHROMA — futuristic movie skin for GeekPress
 * The single source of truth for ALL --geekui-* variables.
 * Declared on body AND [id^="geekui-root"] in BOTH modes.
 * ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

/* DARK — "deep transmission" */
body,
[id^="geekui-root"] {
  /* Canvas & text */
  --geekui-bg:               #070912;
  --geekui-bg-2:             #0e1224;
  --geekui-text:             #ecf0ff;
  --geekui-text-dim:         #9faad0;
  --geekui-text-mute:        #5f6890;

  /* Accent — ice cyan (signal of light), with violet companion */
  --geekui-accent:           #5cf0ff;
  --geekui-accent-2:         #8df5ff;
  --geekui-accent-d:         #1a8aa0;

  /* Poster-less catalog placeholders — per type, on-brand holo trio */
  --geekui-noposter-movie:   #ff9e64;
  --geekui-noposter-tv:      #5cf0ff;
  --geekui-noposter-game:    #b794ff;
  --geekui-noposter-person:  #5cf0ff;
  --geekui-noposter-char:    #ff7ad9;

  /* Typography */
  --geekui-font-base:        "Inter", system-ui, -apple-system, sans-serif;
  --geekui-font-title:       "Chakra Petch", "Eurostile", "Inter", system-ui, sans-serif;
  --geekui-font-mono:        "JetBrains Mono", "Space Mono", ui-monospace, monospace;

  /* Surfaces & borders */
  --geekui-surface:          #11152a;
  --geekui-surface-2:        rgba(92, 240, 255, 0.10);
  --geekui-border:           rgba(160, 107, 255, 0.22);
  --geekui-border-strong:    rgba(92, 240, 255, 0.55);
  --geekui-modal-bg:         #0e1224;
  --geekui-modal-text:       #ecf0ff;

  /* Card & effects */
  --geekui-card-radius:      4px;
  --geekui-card-shadow:      0 8px 24px rgba(0, 0, 0, 0.55);
  --geekui-card-hover-shadow: 0 18px 40px rgba(0, 0, 0, 0.65), 0 0 32px rgba(92, 240, 255, 0.22);
  --geekui-glow:             0 0 0 1px rgba(92, 240, 255, 0.5), 0 0 22px rgba(92, 240, 255, 0.30);

  --geekui-hero-fade:        linear-gradient(180deg, rgba(7, 9, 18, 0.30) 0%, rgba(7, 9, 18, 0.78) 55%, rgba(7, 9, 18, 0.96) 100%);
  --geekui-hero-tint:        linear-gradient(110deg, rgba(160, 107, 255, 0.14) 0%, transparent 40%, rgba(92, 240, 255, 0.10) 100%);
  --geekui-hero-text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85), 0 0 6px rgba(92, 240, 255, 0.25);

  /* Tone scale — cool spectrum */
  --geekui-tone-exceptional: #8df5ff;
  --geekui-tone-great:       #5cf0ff;
  --geekui-tone-good:        #6ee7b7;
  --geekui-tone-mixed:       #f0c674;
  --geekui-tone-poor:        #ff6b9a;
  --geekui-tone-muted:       #4a5172;

  /* Private skin extras */
  --chroma-violet:           #a06bff;
  --chroma-violet-2:         #c39bff;
  --chroma-grid:             rgba(92, 240, 255, 0.05);
}

/* LIGHT — "daylight transmission" */
body[data-theme="light"],
body[data-theme="light"] [id^="geekui-root"] {
  --geekui-bg:               #eef2fa;
  --geekui-bg-2:             #e2e7f2;
  --geekui-text:             #0a0e1a;
  --geekui-text-dim:         #495372;
  --geekui-text-mute:        #7a829a;

  /* Cyan darkened for AA contrast on light slate */
  --geekui-accent:           #066b80;
  --geekui-accent-2:         #088ba6;
  --geekui-accent-d:         #034a5a;

  --geekui-surface:          #ffffff;
  --geekui-surface-2:        rgba(6, 107, 128, 0.08);
  --geekui-border:           rgba(122, 78, 200, 0.22);
  --geekui-border-strong:    rgba(6, 107, 128, 0.50);
  --geekui-modal-bg:         #ffffff;
  --geekui-modal-text:       #0a0e1a;

  --geekui-card-shadow:      0 6px 18px rgba(10, 14, 26, 0.08);
  --geekui-card-hover-shadow: 0 14px 32px rgba(10, 14, 26, 0.14), 0 0 18px rgba(6, 107, 128, 0.16);
  --geekui-glow:             0 0 0 1px rgba(6, 107, 128, 0.55), 0 0 18px rgba(6, 107, 128, 0.22);

  --geekui-hero-fade:        linear-gradient(180deg, rgba(238, 242, 250, 0.85) 0%, rgba(238, 242, 250, 0.96) 55%, rgba(238, 242, 250, 0.99) 100%);
  --geekui-hero-tint:        linear-gradient(110deg, rgba(122, 78, 200, 0.05) 0%, transparent 40%, rgba(238, 242, 250, 0.45) 100%);
  --geekui-hero-text-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 2px rgba(255, 255, 255, 1);

  --geekui-tone-exceptional: #034a5a;
  --geekui-tone-great:       #066b80;
  --geekui-tone-good:        #0e7a4a;
  --geekui-tone-mixed:       #a67613;
  --geekui-tone-poor:        #c4326a;
  --geekui-tone-muted:       #8a92a8;

  --chroma-violet:           #7a4ec8;
  --chroma-violet-2:         #9a6fd8;
  --chroma-grid:             rgba(10, 14, 26, 0.04);
}