/* ==========================================================================
   QuickCode Design Tokens — brand palette (logo-derived)
   Load after theme.min.css, before quickcode_final.css / site.css
   Hex literals belong ONLY here (and brandTokens.ts / qc-tokens.css / themes.ts).
   App CSS, views, and Vue must use var(--qc-*) or var(--theme-*).
   ========================================================================== */

:root {
  /* --- Brand core (from logo_s1 / quickcode_logo_dark / icon SVG) --- */
  --qc-color-navy: #3b488e;
  --qc-color-navy-deep: #1e2a6b;
  --qc-color-navy-mid: #37448e;
  --qc-color-navy-soft: #2d3a80;
  --qc-color-navy-50: #f4f6fa;
  --qc-color-navy-100: #e8ecf4;
  --qc-color-navy-200: #c5cbe0;
  --qc-color-navy-500: #5c6ba4;
  --qc-color-navy-700: #2f3a72;
  --qc-color-navy-800: #232c56;
  --qc-color-navy-900: #171e3a;

  --qc-color-gold: #ffc10e;
  --qc-color-gold-hover: #e6ad0d;
  --qc-color-gold-50: #fffbeb;
  --qc-color-gold-100: #fff3c4;
  --qc-color-gold-700: #bf900b;

  --qc-color-white: #ffffff;
  --qc-color-off-white: #fefefe;

  /* --- Digital action (links, focus, Bootstrap primary) --- */
  --qc-color-action: #387bf5;
  --qc-color-action-hover: #3470f6;
  --qc-color-action-400: #8ab4f8;
  --qc-color-action-tint: rgba(52, 112, 246, 0.05);
  --qc-color-action-tint-strong: rgba(52, 112, 246, 0.1);

  /* --- Surfaces & text (light mode defaults) --- */
  --qc-bg-base: #ffffff;
  --qc-bg-subtle: #f9fafd;
  --qc-bg-muted: #f5f5f5;
  --qc-text-primary: #162648;
  --qc-text-brand: var(--qc-color-navy);
  --qc-text-muted: #6f7995;
  --qc-text-ui: #334155;
  --qc-text-heading: var(--qc-text-primary);
  --qc-border: rgba(0, 0, 0, 0.1);
  --qc-shadow: rgba(0, 0, 0, 0.1);

  /* --- Semantic --- */
  --qc-color-primary: var(--qc-color-navy);
  --qc-color-primary-hover: var(--qc-color-navy-700);
  --qc-color-accent: var(--qc-color-gold);
  --qc-color-interactive: var(--qc-color-action);
  --qc-color-interactive-hover: var(--qc-color-action-hover);

  /* --- Semantic status --- */
  --qc-color-success: #28a745;
  --qc-color-info: #17a2b8;
  --qc-color-danger: #dc3545;
  --qc-color-warning: #f29800;
  --qc-color-black: #000000;

  /* --- Neutrals & UI chrome --- */
  --qc-border-neutral: #e1e7ec;
  --qc-text-neutral: #374250;
  --qc-text-neutral-muted: #606975;
  --qc-color-gold-bright: #ffd033;
  --qc-color-navy-ui: #4a5ba0;
  --qc-slate-50: #f8fafc;
  --qc-slate-100: #f1f5f9;
  --qc-slate-200: #e2e8f0;
  --qc-slate-300: #cbd5e1;
  --qc-slate-400: #94a3b8;
  --qc-slate-500: #64748b;
  --qc-slate-600: #475569;
  --qc-slate-800: #1e293b;
  --qc-surface-modal: var(--qc-color-white);
  --qc-surface-card: var(--qc-color-white);
  --qc-modal-border: var(--qc-color-navy-200);
  --qc-modal-header-bg: var(--qc-color-navy-50);
  --qc-modal-header-border: var(--qc-color-navy-200);
  --qc-overlay-modal: rgba(15, 20, 25, 0.55);
  --qc-modal-shadow: 0 24px 48px rgba(15, 20, 25, 0.2), 0 8px 16px rgba(15, 20, 25, 0.12), 0 0 0 1px var(--qc-color-navy-200);
  --qc-surface-input: var(--qc-color-white);
  --qc-surface-hover: var(--qc-color-navy-100);
  --qc-border-strong: #dadce0;
  --qc-focus-ring: var(--qc-color-action);
  --qc-color-link: #1d4ed8;
  --qc-color-link-alt: #2563eb;
  --qc-status-success: #22c55e;
  --qc-status-error: #ef4444;
  --qc-ui-muted-bg: #f0f0f0;
  --qc-ui-text-subtle: #333333;
  --qc-ui-text-muted: #3c4857;
  --qc-overlay-white-13: rgba(255, 255, 255, 0.08);
  --qc-overlay-white-20: rgba(255, 255, 255, 0.13);
  --qc-overlay-white-67: rgba(255, 255, 255, 0.67);
  --qc-overlay-black-87: rgba(0, 0, 0, 0.87);
  --qc-overlay-navy-06: rgba(15, 23, 42, 0.06);
  --qc-overlay-navy-04: rgba(15, 23, 42, 0.04);
  --qc-overlay-action-06: rgba(56, 123, 245, 0.06);
  --qc-overlay-action-12: rgba(56, 123, 245, 0.12);
  --qc-overlay-action-35: rgba(56, 123, 245, 0.35);
  --qc-overlay-white-22: rgba(255, 255, 255, 0.13);
  --qc-overlay-white-33: rgba(255, 255, 255, 0.2);
  --qc-overlay-white-67-text: rgba(255, 255, 255, 0.67);
  --qc-color-warning-ui: #f59e0b;
  --qc-color-warning-bg: #fff3cd;
  --qc-color-warning-text: #856404;
  --qc-color-warning-border: #ffc107;
  --qc-color-google-yellow: #fbbc04;
  --qc-color-erd-accent: #6f3381;
  --qc-color-erd-handle: #cccccc;
  --qc-color-erd-outline: #839fd2;
  --qc-color-erd-minimap: #17d8b8;
  --qc-color-erd-stroke: #7cadd5;
  --qc-color-ace-bg: #1e1e1e;
  --qc-color-ace-text: #d4d4d4;
  --qc-color-ace-error: #ff6b6b;
  --qc-color-bootstrap-success: #4caf50;
  --qc-color-bootstrap-info-stroke: #0e639c;
  --qc-gradient-panel-light: linear-gradient(135deg, var(--qc-slate-50) 0%, var(--qc-slate-100) 100%);
  --qc-gradient-navy-mid: #2b4a9e;
  --qc-color-valid: #34a853;
  --qc-color-invalid: #ea4335;
  --qc-color-valid-alt: #0f9d58;
  --qc-color-invalid-alt: #d93025;
  --qc-color-warning-surface-light: #fef3c7;
  --qc-color-warning-surface-dark: #422006;
  --qc-color-warning-border-dark: #854d0e;
  --qc-color-warning-text-light: #92400e;
  --qc-color-warning-text-dark: #fde68a;
  --qc-color-warning-text-mid: #a16207;
  --qc-color-warning-text-bright: #fcd34d;
  --qc-color-info-surface-light: #eff6ff;
  --qc-color-info-surface-dark: #1e3a5f;
  --qc-color-info-border-dark: #1e40af;
  --qc-color-info-text-light: #1e40af;
  --qc-color-danger-surface-light: #fee2e2;
  --qc-color-danger-text: #b91c1c;
  --qc-color-danger-border: #e57373;
  --qc-color-danger-icon: #f87171;
  --qc-color-danger-text-dark: #722c2c;
  --qc-color-anthropic: #d97706;
  --qc-color-openai: #10a37f;
  --qc-color-ai-default: #6b7280;
  --qc-color-highlight-yellow: #fbbf24;
  --qc-color-highlight-red: #dc2626;
  --qc-color-highlight-red-dark: #c5221f;
  --qc-color-surface-elevated: #26282b;
  --qc-color-text-disabled: #9ca3af;
  --qc-color-google-yellow-alt: #f9ab00;
  --qc-color-link-bright: #60a5fa;
  --qc-color-purple-gradient-end: #6d28d9;
  --qc-color-purple-gradient-dark: #5b21b6;
  --qc-color-green-gradient-start: #059669;
  --qc-color-green-gradient-end: #047857;
  --qc-color-green-gradient-dark: #065f46;
  --qc-color-navy-gradient-deep: #0f4a8f;
  --qc-color-indigo-gradient: #8b5cf6;
  --qc-text-charcoal: #374151;
  --qc-text-charcoal-ui: #3c3c3c;
  --qc-ace-search-bg: #37474f;
  --qc-ace-search-border: #263238;
  --qc-ace-search-text: #eceff1;
  --qc-ace-search-btn-bg: #455a64;
  --qc-ace-search-btn-border: #546e7a;
  --qc-ace-toolbar-bg: #25282c;
  --qc-ace-toolbar-border: #484747;
  --qc-ace-toolbar-text: #c1c1c1;
  --qc-ace-focus-ring: #64b5f6;
  --qc-color-material-blue-400: #42a5f5;
  --qc-color-material-blue-600: #1e88e5;
  --qc-color-material-green-400: #66bb6a;
  --qc-color-material-green-600: #43a047;
  --qc-color-material-green-700: #2e7d32;
  --qc-color-material-green-800: #1b5e20;
  --qc-color-bootstrap-blue: #007bff;
  --qc-color-bootstrap-blue-dark: #0056b3;
  --qc-color-success-bootstrap: #198754;
  --qc-color-success-text-dark: #0f5132;
  --qc-color-success-bg-light: #d1e7dd;
  --qc-color-success-bg-dark: #1a3a2a;
  --qc-color-info-bg-light: #cfe2ff;
  --qc-color-info-bg-dark: #1a2a3a;
  --qc-surface-toolbar: #3a3b3d;
  --qc-surface-toolbar-border: #4a4b4d;
  --qc-surface-toolbar-hover: #4a4b4d;
  --qc-surface-toolbar-border-hover: #5a5b5d;
  --qc-color-warning-deep: #f57c00;
  --qc-color-warning-material: #ff9800;
  --qc-color-warning-surface-alt: #fff8e1;
  --qc-color-warning-surface-dark-alt: #4a3d1a;
  --qc-border-muted-dark: #404040;
  --qc-border-input-light: #d0d0d0;
  --qc-color-disabled: #9e9e9e;
  --qc-color-focus-outline: #80bdff;
  --qc-surface-canvas-dark: #1a202c;
  --qc-surface-subtle-light: #fafafa;
  --qc-surface-panel-muted: #3f4951;
  --qc-surface-scrollbar: #495057;
  --qc-surface-scrollbar-active: #4a5a6b;
  --qc-text-subtle: #a0a0a0;
  --qc-color-google-blue: #4285f4;
  --qc-color-teal: #0d9488;
  --qc-color-teal-light: #14b8a6;
  --qc-color-teal-pale: #5eead4;
  --qc-color-indigo-light: #818cf8;
  --qc-color-indigo-pale: #c4b5fd;
  --qc-color-indigo-muted: #a5b4fc;
  --qc-color-yellow-status: #eab308;
  --qc-color-gray-100: #f3f4f6;
  --qc-color-gray-200: #e5e7eb;
  --qc-color-gray-300: #d1d5db;
  --qc-color-gray-600: #4b5563;
  --qc-color-gray-700: #1f2937;
  --qc-color-gray-900-text: #f9fafb;
  --qc-surface-list-hover: #f1f3f5;
  --qc-color-emerald: #10b981;
  --qc-color-emerald-light: #34d399;
  --qc-color-danger-material: #f44336;
  --qc-color-info-material: #64b5f6;
  --qc-theme-card-fallback: #282c37;
  --qc-color-control-bg-dark: #2b2d30;
  --qc-color-generate-btn-dark: #4c8dff;
  --qc-color-dbml-subtle-dark: #b8bfc7;
  --qc-color-dbml-subtle-light: #4a5568;
  --qc-color-dbml-muted-dark: #71767b;
  --qc-color-success-valid-light: #81c995;
  --qc-color-scrollbar-track: #ddd;
  --qc-color-active-muted: #777;
  --qc-color-active-border: #e7e7e7;
  --qc-color-active-border-hover: #ddd;
  --qc-color-active-accent: #316997;
  --qc-color-error-surface-dark: #3d2020;
  --qc-color-error-surface-light: #fce8e6;
  --qc-color-error-text-dark: #e8b4b0;
  --qc-color-info-panel-dark: #1e2a3a;
  --qc-color-info-border-light: #c5d8f9;
  --qc-color-info-border-dark: #2d4a6e;
  --qc-color-success-panel-light: #e6f4ea;
  --qc-color-success-panel-dark: #1a2d1a;
  --qc-color-success-border-light: #c8e6c9;
  --qc-color-success-border-dark: #2d5a2d;
  --qc-color-success-border-emphasis: #1e7e34;
  --qc-toast-success-bg: #28a745;
  --qc-toast-error-bg: #dc3545;
  --qc-toast-text: #ffffff;
  --qc-color-skeleton: #c7d1d9;
  --qc-gradient-footer-light: linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 0.65) 12%, var(--qc-slate-50) 100%);
  --qc-gradient-hero-light: linear-gradient(180deg, var(--qc-slate-50) 0%, var(--qc-slate-100) 100%);
  --qc-gradient-hero-dark: linear-gradient(180deg, var(--qc-bg-base) 0%, #0b0f14 100%);
  --qc-gradient-prompt: linear-gradient(135deg, var(--qc-color-action-hover) 0%, var(--qc-color-navy-800) 52%, var(--qc-slate-800) 100%);
  --qc-gradient-btn-dark: linear-gradient(135deg, var(--qc-color-primary) 0%, #6b7cc5 100%);
  --qc-gradient-btn-dark-hover: linear-gradient(135deg, var(--qc-color-primary-hover) 0%, #7b8cd5 100%);
  --qc-gradient-disabled: linear-gradient(135deg, var(--qc-text-muted) 0%, #5f6a85 100%);

  /* --- Legacy theme bridge (quickcode_final.css consumers) --- */
  --theme-bg-primary: var(--qc-bg-base);
  --theme-bg-secondary: var(--qc-bg-subtle);
  --theme-bg-tertiary: var(--qc-color-action-tint);
  --theme-text-primary: var(--qc-text-primary);
  --theme-text-secondary: var(--qc-color-navy);
  --theme-text-muted: var(--qc-text-muted);
  --theme-text-inverse: var(--qc-color-white);
  --theme-border-color: var(--qc-border);
  --theme-navbar-bg: var(--qc-bg-base);
  --theme-card-bg: var(--qc-bg-base);
  --theme-input-bg: var(--qc-bg-base);
  --theme-code-bg: var(--qc-bg-muted);
  --theme-shadow: var(--qc-shadow);
  --theme-button-primary: var(--qc-color-navy);
  --theme-button-primary-hover: var(--qc-color-navy-700);

  /* --- Bootstrap bridge --- */
  --bs-primary: var(--qc-color-action);
  --bs-blue: var(--qc-color-action);
}

[data-theme="dark"] {
  --qc-bg-base: #0f1419;
  --qc-bg-subtle: #1a1f2e;
  --qc-bg-muted: #2d2d2d;
  --qc-text-primary: #e8eaed;
  --qc-text-brand: var(--qc-color-white);
  --qc-text-muted: #9aa0a6;
  --qc-border: rgba(255, 255, 255, 0.1);
  --qc-shadow: rgba(0, 0, 0, 0.5);

  --qc-color-primary: #7a8bd6;
  --qc-color-primary-hover: #8a9be6;
  --qc-color-interactive: var(--qc-color-action-400);
  --qc-surface-modal: #2d2e30;
  --qc-surface-card: #2d2e30;
  --qc-modal-border: rgba(255, 255, 255, 0.14);
  --qc-modal-header-bg: #36373a;
  --qc-modal-header-border: rgba(255, 255, 255, 0.1);
  --qc-overlay-modal: rgba(0, 0, 0, 0.75);
  --qc-modal-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.08);
  --qc-toast-success-bg: #2d8f47;
  --qc-toast-error-bg: #c5221f;
  --qc-toast-text: #ffffff;
  --qc-surface-input: #2d2e30;
  --qc-surface-hover: #3c4043;
  --qc-border-strong: #3c4043;
  --qc-color-link-alt: #93c5fd;
  --qc-overlay-white-13: rgba(255, 255, 255, 0.08);
  --qc-overlay-white-20: rgba(255, 255, 255, 0.13);

  --theme-bg-primary: var(--qc-bg-base);
  --theme-bg-secondary: var(--qc-bg-subtle);
  --theme-bg-tertiary: var(--qc-color-action-tint-strong);
  --theme-text-primary: var(--qc-text-primary);
  --theme-text-secondary: var(--qc-color-action-400);
  --theme-text-muted: var(--qc-text-muted);
  --theme-text-inverse: var(--qc-bg-base);
  --theme-border-color: var(--qc-border);
  --theme-navbar-bg: var(--qc-bg-base);
  --theme-navbar-bg-opacity: rgba(15, 20, 25, 0.95);
  --theme-card-bg: var(--qc-bg-subtle);
  --theme-input-bg: var(--qc-bg-subtle);
  --theme-code-bg: var(--qc-bg-muted);
  --theme-shadow: var(--qc-shadow);
  --theme-button-primary: var(--qc-color-primary);
  --theme-button-primary-hover: var(--qc-color-primary-hover);
}

/* Global typography — content pages & marketing */
.qc-content-page,
.qc-content-page .qc-content-body {
  color: var(--theme-text-primary);
}

.qc-content-page h1,
.qc-content-page h2,
.qc-content-page h3,
.qc-content-page h4,
.qc-content-page .qc-page-hero-title {
  color: var(--qc-text-heading);
}

.qc-content-page p,
.qc-content-page li {
  color: var(--theme-text-primary);
}

/* Bootstrap / site component alignment */
body {
  background-color: var(--theme-bg-primary);
  color: var(--theme-text-primary);
}

.btn-primary {
  background-color: var(--qc-color-navy) !important;
  border-color: var(--qc-color-navy) !important;
  color: var(--qc-color-white) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--qc-color-navy-700) !important;
  border-color: var(--qc-color-navy-700) !important;
  color: var(--qc-color-white) !important;
}

[data-theme="dark"] .btn-primary {
  background-color: var(--qc-color-primary) !important;
  border-color: var(--qc-color-primary) !important;
  color: var(--qc-bg-base) !important;
}

[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn-primary:focus {
  background-color: var(--qc-color-primary-hover) !important;
  border-color: var(--qc-color-primary-hover) !important;
}

.btn-warning,
.btn-outline-warning {
  --bs-warning: var(--qc-color-gold);
  background-color: var(--qc-color-gold);
  border-color: var(--qc-color-gold);
  color: var(--qc-text-primary);
}

.text-primary {
  color: var(--qc-color-action) !important;
}

/* Shared patterns (views / partials) */
.qc-callout {
  padding: 15px;
  background: var(--theme-bg-secondary);
  border-radius: 6px;
  border-left: 4px solid var(--qc-color-action-hover);
}

.qc-callout--compact {
  padding: 12px 15px;
}

.qc-btn-inline {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--qc-color-white);
  background: var(--qc-color-action-hover);
  border: none;
  transition: background-color 0.15s ease;
}

.qc-btn-inline:hover {
  color: var(--qc-color-white);
  background: var(--qc-color-action);
}

.qc-icon-accent {
  color: var(--qc-color-gold);
}

/* Utility classes for gradual migration */
.qc-text-brand { color: var(--qc-text-brand) !important; }
.qc-text-accent { color: var(--qc-color-accent) !important; }
.qc-text-action { color: var(--qc-color-interactive) !important; }
.qc-bg-brand { background-color: var(--qc-color-navy) !important; }
.qc-bg-accent { background-color: var(--qc-color-gold) !important; }