/* =============================================================================
   themes.css — Per-theme CSS variable overrides
   vars.css defines the defaults (steno-light). Only non-default combos live here.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   All dark modes — mode-level overrides independent of theme
   --------------------------------------------------------------------------- */
body[data-mode="dark"] {
  --select-chevron: url('data:image/svg+xml;utf8,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_246_5)"><path d="M6.52253 7.70265C6.23347 7.99171 5.76403 7.99171 5.47497 7.70265L1.03497 3.26265C0.745906 2.97359 0.745906 2.50415 1.03497 2.21509C1.32403 1.92603 1.79347 1.92603 2.08253 2.21509L5.99991 6.13246L9.91728 2.2174C10.2063 1.92834 10.6758 1.92834 10.9648 2.2174C11.2539 2.50646 11.2539 2.9759 10.9648 3.26496L6.52484 7.70496L6.52253 7.70265Z" fill="%23ffffff"/></g><defs><clipPath id="clip0_246_5"><rect width="7.4" height="11.84" fill="transparent" transform="matrix(0 1 -1 0 11.9199 0.52002)"/></clipPath></defs></svg>');

  --input-date-icon: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="1" y="3" width="14" height="12" rx="1.5" stroke="%23ffffff" stroke-width="1.5"/><path d="M1 6.5H15" stroke="%23ffffff" stroke-width="1.5"/><path d="M5 1.5V4.5" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round"/><path d="M11 1.5V4.5" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round"/><circle cx="5" cy="10" r="1" fill="%23ffffff"/><circle cx="8" cy="10" r="1" fill="%23ffffff"/><circle cx="11" cy="10" r="1" fill="%23ffffff"/></svg>');

  --input-time-icon: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="6.25" stroke="%23ffffff" stroke-width="1.5"/><path d="M8 5V8.5L10.5 10" stroke="%23ffffff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

/* ---------------------------------------------------------------------------
   steno — dark
   --------------------------------------------------------------------------- */
body[data-theme="steno_default"][data-mode="dark"] {
  /* Brand primitives stay the same — brand colour is identity, not a tone */

  /* Text */
  --color-text-primary: var(--color-gray-50);
  --color-text-secondary: var(--color-gray-200);
  --color-text-tertiary: var(--color-gray-300);
  --color-text-quaternary: var(--color-gray-400);
  --color-text-placeholder: var(--color-gray-400);
  --color-text-disabled: var(--color-gray-600);
  --color-text-disabled-alt: var(--color-gray-500);

  /* Border */
  --color-border-primary: var(--color-gray-600);
  --color-border-primary_hover: var(--color-gray-500);
  --color-border-secondary: var(--color-gray-700);
  --color-border-tertiary: var(--color-gray-800);
  --color-border-disabled: var(--color-gray-700);
  --color-border-highlighted: var(--color-gray-300);
  --color-border-new: #1a5a64;

  /* Foreground */
  --color-fg-primary: var(--color-gray-50);
  --color-fg-secondary: var(--color-gray-200);
  --color-fg-secondary_hover: var(--color-gray-100);
  --color-fg-tertiary: var(--color-gray-300);
  --color-fg-tertiary_hover: var(--color-gray-200);
  --color-fg-quaternary: var(--color-gray-500);
  --color-fg-quaternary_hover: var(--color-gray-400);
  --color-fg-disabled: var(--color-gray-700);

  /* Background */
  --color-bg-primary: var(--color-gray-900);
  --color-bg-primary_hover: var(--color-gray-800);
  --color-bg-secondary: var(--color-gray-800);
  --color-bg-secondary_hover: var(--color-gray-700);
  --color-bg-tertiary: var(--color-gray-700);
  --color-bg-quaternary: var(--color-gray-600);
  --color-bg-primary-solid: var(--color-gray-200);
  --color-bg-secondary-solid: var(--color-gray-300);
  --color-bg-tertiary-solid: var(--color-gray-400);
  --color-bg-active: var(--color-gray-700);
  --color-bg-disabled: var(--color-gray-700);
  --color-bg-disabled_subtle: var(--color-gray-800);
  --color-bg-new: #0a2a2e;
  --color-bg-brand-primary: #01272e;
  --color-bg-brand-secondary: #013d48;
  --color-bg-error-primary: #1c0808;
  --color-bg-error-secondary: #380d0d;
  --color-bg-warning-primary: #1f1200;
  --color-bg-warning-secondary: #3b2200;
  --color-bg-progress-primary: #1a1408;
  --color-bg-progress-secondary: #322610;
  --color-bg-note-primary: #1d1808;
  --color-bg-note-secondary: #3a2f10;
  --color-bg-success-primary: #0d1f11;
  --color-bg-success-secondary: #1a3820;
  --color-bg-info-primary: #081219;
  --color-bg-info-secondary: #0f2235;
  --color-bg-record-primary: #1c0808;
  --color-bg-record-secondary: #380d0d;

  /* Skeleton */
  --color-skeleton-from: var(--color-gray-700);
  --color-skeleton-to: var(--color-gray-800);
}

/* ---------------------------------------------------------------------------
   hchb — light
   Primary brand: #005DAA / #0073C6 (corporate navy blue)
   Accent: #4FA3E3 / #7FC1F2
   --------------------------------------------------------------------------- */
body[data-theme="hchb_default"] {
  /* Gray — HCHB cool tones */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-900: #1f2a37;

  /* Brand — replace teal with HCHB navy blue */
  --color-brand-50: #f0f7ff;
  --color-brand-100: #ddeeff;
  --color-brand-200: #aad4f7;
  --color-brand-300: #7fc1f2;
  --color-brand-400: #4fa3e3;
  --color-brand-500: #0073c6;
  --color-brand-600-main: #005daa;
  --color-brand-700: #004d8f;
  --color-brand-800: #003c70;

  /* Green */
  --color-green-50: #f1f8f1;
  --color-green-100: #e8f5e9;
  --color-green-300: #81c784;
  --color-green-400: #4caf50;
  --color-green-500: #2e7d32;
  --color-green-600: #1b5e20;

  /* Orange */
  --color-orange-50: #fffbeb;
  --color-orange-100: #fef3c7;
  --color-orange-300: #fcd34d;
  --color-orange-400: #fbbf24;
  --color-orange-500: #f59e0b;
  --color-orange-600: #d97706;

  /* Red */
  --color-red-50: #fef2f2;
  --color-red-100: #fce8e8;
  --color-red-300: #e57373;
  --color-red-400: #ef5350;
  --color-red-500: #d32f2f;
  --color-red-600: #b71c1c;

  /* Text */
  --color-text-brand-primary: #004d8f;
  --color-text-brand-secondary: #005daa;
  --color-text-brand-tertiary: #0073c6;
  --color-text-error-primary: #d32f2f;
  --color-text-error-primary_hover: #b71c1c;
  --color-text-warning-primary: #d97706;
  --color-text-success-primary: #2e7d32;

  /* Border */
  --color-border-primary: #d1d5db;
  --color-border-primary_hover: #9ca3af;
  --color-border-secondary: #e5e7eb;
  --color-border-tertiary: #f3f4f6;
  --color-border-disabled: #e5e7eb;
  --color-border-new: #aad4f7;
  --color-border-selected: #0073c6;
  --color-border-brand: #0073c6;
  --color-border-brand_hover: #005daa;
  --color-border-brand-disabled: #aad4f7;
  --color-border-error: #ef5350;
  --color-border-error_subtle: #e57373;
  --color-border-success: #4caf50;
  --color-border-success_subtle: #81c784;
  --color-border-warning: #fbbf24;
  --color-border-warning_subtle: #fcd34d;

  /* Foreground */
  --color-fg-brand-primary: #005daa;
  --color-fg-brand-secondary: #0073c6;
  --color-fg-brand-secondary_hover: #005daa;
  --color-fg-error-primary: #d32f2f;
  --color-fg-error-secondary: #ef5350;
  --color-fg-warning-primary: #f59e0b;
  --color-fg-warning-secondary: #fbbf24;
  --color-fg-success-primary: #2e7d32;
  --color-fg-success-secondary: #4caf50;

  /* Background */
  --color-bg-secondary: #f4f6f8;
  --color-bg-secondary_hover: #e9edf2;
  --color-bg-new: #eef5ff;
  --color-bg-brand-primary: #f0f7ff;
  --color-bg-brand-secondary: #ddeeff;
  --color-bg-brand-solid: #0073c6;
  --color-bg-brand-solid_hover: #005daa;
  --color-bg-brand-section: #004d8f;
  --color-bg-brand-section_subtle: #005daa;
  --color-bg-error-primary: #fef2f2;
  --color-bg-error-secondary: #fce8e8;
  --color-bg-warning-primary: #fffbeb;
  --color-bg-warning-secondary: #fef3c7;
  --color-bg-success-primary: #f1f8f1;
  --color-bg-success-secondary: #e8f5e9;
}

/* ---------------------------------------------------------------------------
   hchb — dark
   --------------------------------------------------------------------------- */
body[data-theme="hchb_default"][data-mode="dark"] {
  /* Brand — HCHB blue, lifted for dark surfaces */
  --color-brand-50: #0a1929;
  --color-brand-100: #0d2847;
  --color-brand-200: #1a4a7a;
  --color-brand-300: #1565c0;
  --color-brand-400: #1976d2;
  --color-brand-500: #42a5f5;
  --color-brand-600-main: #64b5f6;
  --color-brand-700: #90caf9;
  --color-brand-800: #bbdefb;

  /* Text */
  --color-text-primary: #f9fafb;
  --color-text-secondary: #e5e7eb;
  --color-text-tertiary: #d1d5db;
  --color-text-quaternary: #9ca3af;
  --color-text-placeholder: #6b7280;
  --color-text-disabled: #4b5563;
  --color-text-disabled-alt: #374151;
  --color-text-brand-primary: #90caf9;
  --color-text-brand-secondary: #64b5f6;
  --color-text-brand-tertiary: #42a5f5;
  --color-text-error-primary: #ef5350;
  --color-text-error-primary_hover: #f44336;
  --color-text-warning-primary: #fbbf24;
  --color-text-success-primary: #4caf50;

  /* Border */
  --color-border-primary: #4b5563;
  --color-border-primary_hover: #6b7280;
  --color-border-secondary: #374151;
  --color-border-tertiary: #1f2937;
  --color-border-disabled: #374151;
  --color-border-highlighted: #d1d5db;
  --color-border-new: #1a4a7a;
  --color-border-selected: #42a5f5;
  --color-border-brand: #42a5f5;
  --color-border-brand_hover: #64b5f6;
  --color-border-brand-disabled: #1a4a7a;

  /* Foreground */
  --color-fg-primary: #f9fafb;
  --color-fg-secondary: #e5e7eb;
  --color-fg-secondary_hover: #f3f4f6;
  --color-fg-tertiary: #d1d5db;
  --color-fg-tertiary_hover: #e5e7eb;
  --color-fg-quaternary: #6b7280;
  --color-fg-quaternary_hover: #9ca3af;
  --color-fg-disabled: #374151;
  --color-fg-brand-primary: #64b5f6;
  --color-fg-brand-secondary: #42a5f5;
  --color-fg-brand-secondary_hover: #64b5f6;
  --color-fg-error-primary: #ef5350;
  --color-fg-warning-primary: #fbbf24;
  --color-fg-success-primary: #4caf50;

  /* Background */
  --color-bg-primary: #111827;
  --color-bg-primary_hover: #1f2937;
  --color-bg-secondary: #1f2937;
  --color-bg-secondary_hover: #374151;
  --color-bg-tertiary: #374151;
  --color-bg-quaternary: #4b5563;
  --color-bg-primary-solid: #e5e7eb;
  --color-bg-secondary-solid: #d1d5db;
  --color-bg-tertiary-solid: #9ca3af;
  --color-bg-active: #374151;
  --color-bg-disabled: #374151;
  --color-bg-disabled_subtle: #1f2937;
  --color-bg-new: #0d2047;
  --color-bg-brand-primary: #0a1929;
  --color-bg-brand-secondary: #0d2847;
  --color-bg-brand-solid: #1976d2;
  --color-bg-brand-solid_hover: #1565c0;
  --color-bg-brand-section: #0d2847;
  --color-bg-brand-section_subtle: #1565c0;
  --color-bg-error-primary: #1f0707;
  --color-bg-error-secondary: #3b0d0d;
  --color-bg-warning-primary: #1f1200;
  --color-bg-warning-secondary: #3b2200;
  --color-bg-progress-primary: #1a1408;
  --color-bg-progress-secondary: #322610;
  --color-bg-note-primary: #1d1808;
  --color-bg-note-secondary: #3a2f10;
  --color-bg-success-primary: #071f08;
  --color-bg-success-secondary: #0d3b0f;
  --color-bg-info-primary: #081219;
  --color-bg-info-secondary: #0f2235;
  --color-bg-record-primary: #1f0707;
  --color-bg-record-secondary: #3b0d0d;

  /* Skeleton */
  --color-skeleton-from: #374151;
  --color-skeleton-to: #1f2937;
}