/*
  Midnight Signal — dark theme layer
  ------------------------------------------
  This file extends the current design-system tokens for the reference page
  preview and the main portfolio homepage. It intentionally changes tokens
  only; image assets and component structure remain unchanged.
*/

:root[data-theme="midnight"] {
  color-scheme: dark;

  /* Surfaces */
  --color-bg-canvas: #0c1324;
  --color-bg-raised: #111c31;
  --color-bg-surface: #17243b;
  --color-bg-module-indigo: #222e5d;
  --color-bg-module-teal: #173e45;
  --color-bg-module-gold: #43381c;

  /* Borders */
  --color-border-default: #647394;
  --color-border-chrome: rgba(255, 255, 255, 0.16);
  --color-border-accent: rgba(168, 179, 255, 0.42);
  --color-border-accent-subtle: rgba(168, 179, 255, 0.3);

  /* Text */
  --color-text-primary: #f4f1ea;
  --color-text-secondary: #c1cad8;
  --color-text-tertiary: #9daac0;
  --color-text-hero: #e3e7ef;
  --color-text-on-dark: #ffffff;
  --color-text-on-image: rgba(255, 255, 255, 0.9);

  /* Accents and controls */
  --color-accent-primary: #a8b3ff;
  --color-accent-primary-tint: rgba(168, 179, 255, 0.16);
  --color-accent-secondary: #57d9c7;
  --color-accent-tertiary: #f4c866;
  --color-accent-warm: #e99a68;
  --color-focus-ring: #f4c866;
  --color-error: #ff9b91;
  --color-control-high-bg: #f4f1ea;
  --color-control-high-text: #0c1324;
  --color-control-low-bg: rgba(23, 36, 59, 0.86);
  --color-control-low-hover-bg: #1d2b46;
  --color-control-low-hover-border: #a8b3ff;
  --color-image-chip-bg: rgba(0, 0, 0, 0.78);

  /* Chrome, gradients, and elevation */
  --color-overlay-scrim: rgba(2, 5, 12, 0.78);
  --color-nav-scrim: rgba(12, 19, 36, 0.86);
  --color-hero-stats-scrim: color-mix(in srgb, var(--color-bg-canvas) 55%, transparent);
  --color-brand-mark: #f4f1ea;
  --gradient-hero-fallback: linear-gradient(110deg, #171d43 0%, #1b2a50 38%, #173b45 72%, #342719 100%);
  --gradient-contact-section: linear-gradient(
    135deg,
    var(--color-bg-canvas),
    color-mix(in srgb, var(--color-bg-canvas) 88%, var(--color-accent-warm) 12%)
  );
  --gradient-contact-panel: radial-gradient(ellipse at 100% 0%, rgba(168, 179, 255, 0.28) 0%, transparent 48%),
    radial-gradient(ellipse at 0% 100%, rgba(87, 217, 199, 0.22) 0%, transparent 48%),
    radial-gradient(ellipse at 55% 110%, rgba(244, 200, 102, 0.18) 0%, transparent 45%);
  --shadow-card-hover: 0 24px 50px -16px rgba(0, 0, 0, 0.9),
    0 8px 28px -12px rgba(168, 179, 255, 0.34);
  --shadow-h1: 0 4px 18px rgba(0, 0, 0, 0.58);
  --shadow-modal-title: 0 0 14px rgba(0, 0, 0, 0.62);
}

html[data-theme="midnight"] .case-card:hover,
html[data-theme="midnight"] .case-card:focus-visible {
  border-color: var(--color-text-on-dark);
}