/* ============================================================
   TouchPad Beats — Body Brain Sensory palette
   Dark = NEON rhythm/music. Light = matches the sign-in page.
   Variable names unchanged; only values retuned.
   ============================================================ */

/* Dark defaults — NEON */
:root {
  --page-bg: #07111b;
  --page-bg-secondary: #0b1925;
  --page-bg-highlight: #102334;

  --navy-950: #07111b;
  --navy-900: #0b1925;
  --navy-850: #102334;
  --navy-800: #163247;
  --navy-700: #1c3e56;

  --text-primary: #eefcff;
  --text-secondary: #c3d5e2;
  --text-muted: #90a8ba;
  --text-soft: #90a8ba;

  --teal: #24f0ff;
  --teal-bright: #7df7ff;
  --teal-dark: #0dd1c5;
  --teal-pale: rgba(36, 240, 255, 0.14);

  --orange: #ff6a3d;
  --orange-light: #ff8a5c;
  --orange-pale: rgba(255, 106, 61, 0.16);

  --blue-pad: #2cb8ff;
  --blue-pad-light: #5fd0ff;
  --red-pad: #ff4a5a;
  --red-pad-light: #ff6f7b;
  --yellow-pad: #ffe45a;
  --yellow-pad-light: #fff08c;
  --purple: #b06bff;
  --white: #ffffff;

  --panel-bg: rgba(11, 25, 37, 0.9);
  --panel-bg-solid: #0b1925;
  --panel-border: #244156;
  --panel-border-strong: #315067;

  --input-bg: #102334;
  --input-border: #244156;
  --input-text: #eefcff;
  --menu-bg: #0f2130;
  --menu-hover: rgba(36, 240, 255, 0.16);
  --menu-selected-bg: rgba(36, 240, 255, 0.2);
  --menu-selected-text: #24f0ff;

  --mode-card-bg: #0b1925;
  --mode-card-text: #eefcff;
  --mode-card-desc: #90a8ba;

  --theme-switch-bg: #0b1925;
  --theme-switch-border: #244156;
  --theme-btn-active-bg: #0dd1c5;
  --theme-btn-active-text: #041318;
  --theme-btn-active-shadow: 0 0 16px rgba(36, 240, 255, 0.45);

  --preview-border: transparent;
  --preview-border-image: linear-gradient(
    120deg,
    rgba(36, 240, 255, 0.75),
    rgba(255, 79, 216, 0.6),
    rgba(156, 255, 87, 0.4)
  );
  --preview-shadow: 0 0 34px rgba(36, 240, 255, 0.16);

  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-panel: 0 14px 36px rgba(0, 0, 0, 0.4);
  --shadow-button: 0 0 22px rgba(36, 240, 255, 0.35);
  --focus-ring: 0 0 0 3px rgba(36, 240, 255, 0.35);

  --glow-teal: rgba(36, 240, 255, 0.5);
  --glow-blue: rgba(44, 184, 255, 0.5);
  --glow-red: rgba(255, 79, 216, 0.5);
  --glow-yellow: rgba(255, 228, 90, 0.5);
  --glow-orange: rgba(255, 79, 216, 0.5);
  --glow-purple: rgba(176, 107, 255, 0.4);

  --pad-border: rgba(255, 255, 255, 0.75);
  --pad-shadow-blue: 0 0 28px var(--glow-blue);
  --pad-shadow-red: 0 0 28px var(--glow-red);
  --pad-shadow-yellow: 0 0 28px var(--glow-yellow);
  --pad-label-on-yellow: #07111b;
  --finger-label: var(--text-muted);

  --start-gradient: linear-gradient(90deg, #ff3ecb, #ff5e63);
  --start-shadow: 0 0 15px rgba(255, 79, 216, 0.45), 0 0 28px rgba(255, 79, 216, 0.18);

  --wave-line: rgba(36, 240, 255, 0.18);
  --dot-texture: rgba(255, 255, 255, 0.06);
  --vignette: inset 0 0 120px rgba(0, 0, 0, 0.5);

  --drawer-bg: #0b1925;
  --icon-btn-bg: rgba(11, 25, 37, 0.7);
  --icon-btn-text: #eefcff;

  --page-max: 1180px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --font: Inter, Aptos, "Segoe UI", Arial, sans-serif;
  --font-display: Inter, Aptos, "Segoe UI", Arial, sans-serif;
  --space-section: clamp(14px, 2.2vh, 24px);
  --pad-h-desktop: clamp(320px, 34vh, 360px);
  --pad-h-tablet: clamp(230px, 30vh, 290px);
  --pad-h-mobile: clamp(150px, 22vh, 190px);
  /* Smaller pads for the setup-screen "Test Your Sounds" preview only */
  --pad-h-preview: clamp(120px, 20vh, 190px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  color-scheme: dark;

  --meta-theme-color: #07111b;
}

/* Light mode — Voice Memo reference style:
   cream page, navy header, flat white cards, colored borders,
   chip selection (pale wash + strong border). No neon / no comic wash. */
:root[data-theme="light"],
html[data-theme="light"] {
  /* Reference palette */
  --surface: #ffffff;
  --surface-soft: #fffdf5;
  --navy: #0b2e5c;
  --primary-blue: #0b2e5c;
  --primary-blue-hover: #082445;
  --selected-bg: #e6eef8;
  --border: #0b2e5c;
  --muted-text: #7a7a72;
  --accent-orange: #e87a1a;
  --accent-red: #a33a4a;
  --accent-green: #2d6a4f;
  --accent-yellow: #c98912;

  --page-bg: #f7f1d4;
  --page-bg-secondary: #f7f1d4;
  --page-bg-highlight: #ffffff;

  --navy-950: #0b2e5c;
  --navy-900: #0b2e5c;
  --navy-850: #0b2e5c;
  --navy-800: #163a66;
  --navy-700: #1c4a7a;

  --text-primary: #0b2e5c;
  --text-secondary: #33475e;
  --text-muted: #7a7a72;
  --text-soft: #7a7a72;

  /* Interactive accent = navy (reference blue borders) */
  --teal: #0b2e5c;
  --teal-bright: #163a66;
  --teal-dark: #082445;
  --teal-pale: #e6eef8;

  --orange: #e87a1a;
  --orange-light: #f08a30;
  --orange-pale: #fff0e4;

  --blue-pad: #2476b9;
  --blue-pad-light: #3d8bcc;
  --red-pad: #c45a52;
  --red-pad-light: #d46e66;
  --yellow-pad: #e0a800;
  --yellow-pad-light: #efbc2a;
  --purple: #6b3de8;
  --white: #ffffff;

  --panel-bg: #ffffff;
  --panel-bg-solid: #ffffff;
  --panel-border: #0b2e5c;
  --panel-border-strong: #0b2e5c;

  --input-bg: #ffffff;
  --input-border: #e87a1a;
  --input-text: #0b2e5c;
  --menu-bg: #ffffff;
  --menu-hover: #fffdf5;
  --menu-selected-bg: #e6eef8;
  --menu-selected-text: #0b2e5c;

  --mode-card-bg: #ffffff;
  --mode-card-text: #0b2e5c;
  --mode-card-desc: #7a7a72;

  --theme-switch-bg: #ffffff;
  --theme-switch-border: #0b2e5c;
  --theme-btn-active-bg: #0b2e5c;
  --theme-btn-active-text: #ffffff;
  --theme-btn-active-shadow: none;

  --preview-border: #0b2e5c;
  --preview-shadow: none;

  --shadow-soft: none;
  --shadow-panel: none;
  --shadow-button: none;
  --focus-ring: 0 0 0 3px rgba(11, 46, 92, 0.22);

  --glow-teal: transparent;
  --glow-blue: transparent;
  --glow-red: transparent;
  --glow-yellow: transparent;
  --glow-orange: transparent;
  --glow-purple: transparent;

  --pad-border: rgba(255, 255, 255, 0.9);
  --pad-shadow-blue: none;
  --pad-shadow-red: none;
  --pad-shadow-yellow: none;
  --pad-label-on-yellow: #0b2e5c;
  --finger-label: #7a7a72;

  --start-shadow: none;

  --wave-line: rgba(11, 46, 92, 0.12);
  --dot-texture: transparent;
  --vignette: none;

  --drawer-bg: #ffffff;
  --icon-btn-bg: #ffffff;
  --icon-btn-text: #0b2e5c;

  --activity-stage-bg: #ffffff;
  --activity-stage-border: #0b2e5c;
  --activity-chrome-edge: rgba(11, 46, 92, 0.14);

  --surface-page: var(--page-bg);
  --surface-panel: #ffffff;
  --surface-selected-teal: #e6eef8;
  --surface-selected-orange: #fff0e4;
  --surface-selected-amber: #fff6dc;
  --edge-strong: #0b2e5c;
  --yellow-pad-edge: #c98912;
  --yellow-pad-edge-soft: rgba(201, 137, 18, 0.35);
  --chrome-pad-group-bg: #ffffff;
  --meta-theme-color: #0b2e5c;

  --accent-blue-wash: #e6eef8;
  --accent-teal-wash: #e6eef8;
  --accent-orange-wash: #fff0e4;
  --accent-red-wash: #f8e8ea;
  --accent-purple-wash: #efe8ff;
  --accent-rainbow-bar: transparent;
  --label-accent: #7a7a72;

  /* Primary CTA = orange like reference Record */
  --start-gradient: #e87a1a;

  --preview-border-image: linear-gradient(#0b2e5c, #0b2e5c);

  --radius-control: 10px;
  --radius-panel: 12px;
  --border-width: 2px;

  color-scheme: light;
}