/**
 * CSS Custom Properties (Variables)
 *
 * Centralized design tokens for AudioScriptPro.
 */

:root {
  /* ── Brand Colors ─────────────────────────────────────────────── */
  --asp-primary: #2563eb;
  --asp-primary-hover: #1d4ed8;
  --asp-primary-light: #dbeafe;
  --asp-accent: #f59e0b;
  --asp-accent-hover: #d97706;
  --asp-secondary: #64748b;
  --asp-success: #059669;
  --asp-warning: #d97706;
  --asp-danger: #dc2626;
  --asp-info: #0891b2;

  /* ── Background Colors ────────────────────────────────────────── */
  --asp-bg: #fafaf9;
  --asp-bg-secondary: #f5f5f4;
  --asp-bg-tertiary: #e7e5e4;

  /* ── Surface Anchors (NEW — Wave 1) ───────────────────────────── */
  --asp-bg-marketing: #0a0a0a;  /* Always-dark; intentionally no dark-mode override — cinematic marketing surface */
  --asp-bg-app: #1a1a1a;        /* Always-dark; intentionally no dark-mode override — app workshop surface */

  /* ── Text Colors ──────────────────────────────────────────────── */
  --asp-text: #1c1917;
  --asp-text-secondary: #57534e;
  --asp-text-muted: #a8a29e;

  /* ── Border Colors ────────────────────────────────────────────── */
  --asp-border: #e7e5e4;
  --asp-border-hover: #d6d3d1;

  /* ── Shadows ──────────────────────────────────────────────────── */
  --asp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --asp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --asp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  /* ── Spacing Scale ────────────────────────────────────────────── */
  --asp-spacing-xs: 0.25rem;
  --asp-spacing-sm: 0.5rem;
  --asp-spacing-md: 1rem;
  --asp-spacing-lg: 1.5rem;
  --asp-spacing-xl: 3rem;

  /* ── Border Radius ────────────────────────────────────────────── */
  --asp-radius-sm: 0.25rem;
  --asp-radius: 0.5rem;
  --asp-radius-lg: 0.75rem;

  /* ── Typography ───────────────────────────────────────────────── */
  --asp-font-heading: "Bricolage Grotesque", "DM Sans", system-ui, -apple-system, sans-serif;
  --asp-font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --asp-font-mono: "JetBrains Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --asp-font-size-sm: 0.875rem;
  --asp-font-size-base: 1rem;
  --asp-font-size-lg: 1.25rem;
  --asp-line-height: 1.5;

  /* ── Transitions ──────────────────────────────────────────────── */
  --asp-transition-fast: 150ms ease;
  --asp-transition: 300ms ease;
  --asp-transition-slow: 500ms ease;

  /* ── Z-Index Scale ────────────────────────────────────────────── */
  --asp-z-dropdown: 1000;
  --asp-z-sticky: 1020;
  --asp-z-fixed: 1030;
  --asp-z-modal-backdrop: 1040;
  --asp-z-modal: 1050;
  --asp-z-popover: 1060;
  --asp-z-tooltip: 1070;
  --asp-z-toast: 1100;

  /* ── Gradient Palette ─────────────────────────────────────────── */
  --asp-gradient-primary: linear-gradient(135deg, #2563eb 0%, #1e40af 55%, #f59e0b 100%);
  --asp-gradient-header: linear-gradient(135deg, #2563eb 0%, #1e40af 55%, #f59e0b 100%);

  /* ── Glass Effect ─────────────────────────────────────────────── */
  --asp-glass-bg: rgba(250, 250, 249, 0.8);
  --asp-glass-border: rgba(231, 229, 228, 0.5);
  --asp-glass-shadow: 0 8px 32px 0 rgba(28, 25, 23, 0.06);

  /* ── Hover Shadow ─────────────────────────────────────────────── */
  --asp-shadow-hover: 0 8px 25px -5px rgba(37, 99, 235, 0.15), 0 4px 10px -4px rgba(0, 0, 0, 0.1);

  /* ── Status Tints ─────────────────────────────────────────────── */
  --asp-tint-success: rgba(5, 150, 105, 0.08);
  --asp-tint-info: rgba(8, 145, 178, 0.08);
  --asp-tint-warning: rgba(217, 119, 6, 0.08);
  --asp-tint-danger: rgba(220, 38, 38, 0.08);
  --asp-tint-accent: rgba(245, 158, 11, 0.1);

  /* ── Bootstrap Overrides ──────────────────────────────────────── */
  --bs-primary: #2563eb;
  --bs-primary-rgb: 37, 99, 235;
  --bs-secondary: #64748b;
  --bs-secondary-rgb: 100, 116, 139;
  --bs-success: #059669;
  --bs-success-rgb: 5, 150, 105;
  --bs-warning: #d97706;
  --bs-warning-rgb: 217, 119, 6;
  --bs-danger: #dc2626;
  --bs-danger-rgb: 220, 38, 38;
  --bs-info: #0891b2;
  --bs-info-rgb: 8, 145, 178;
  --bs-body-bg: #fafaf9;
  --bs-body-color: #1c1917;
  --bs-border-color: #e7e5e4;
  --bs-link-color: #2563eb;
  --bs-link-hover-color: #1d4ed8;
}

/* ── Heading Typography ───────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.card-header,
.modal-title {
  font-family: var(--asp-font-heading);
}

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.005em;
}

h4, h5, h6 {
  font-weight: 600;
}

.navbar-brand {
  font-weight: 700;
  letter-spacing: -0.005em;
}

/* ── Bootstrap Component Overrides ────────────────────────────────── */

.btn-primary {
  --bs-btn-bg: #2563eb;
  --bs-btn-border-color: #2563eb;
  --bs-btn-hover-bg: #1d4ed8;
  --bs-btn-hover-border-color: #1d4ed8;
  --bs-btn-active-bg: #1e40af;
  --bs-btn-active-border-color: #1e40af;
  --bs-btn-disabled-bg: #93c5fd;
  --bs-btn-disabled-border-color: #93c5fd;
}

.btn-success {
  --bs-btn-bg: #059669;
  --bs-btn-border-color: #059669;
  --bs-btn-hover-bg: #047857;
  --bs-btn-hover-border-color: #047857;
}

.btn-danger {
  --bs-btn-bg: #dc2626;
  --bs-btn-border-color: #dc2626;
  --bs-btn-hover-bg: #b91c1c;
  --bs-btn-hover-border-color: #b91c1c;
}

.btn-warning {
  --bs-btn-bg: #d97706;
  --bs-btn-border-color: #d97706;
  --bs-btn-hover-bg: #b45309;
  --bs-btn-hover-border-color: #b45309;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}

.btn-info {
  --bs-btn-bg: #0891b2;
  --bs-btn-border-color: #0891b2;
  --bs-btn-hover-bg: #0e7490;
  --bs-btn-hover-border-color: #0e7490;
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}

.btn-outline-primary {
  --bs-btn-color: #2563eb;
  --bs-btn-border-color: #2563eb;
  --bs-btn-hover-bg: #2563eb;
  --bs-btn-hover-border-color: #2563eb;
  --bs-btn-active-bg: #1d4ed8;
  --bs-btn-active-border-color: #1d4ed8;
}

.badge.bg-primary { background-color: #2563eb !important; }
.badge.bg-success { background-color: #059669 !important; }
.badge.bg-danger { background-color: #dc2626 !important; }
.badge.bg-warning { background-color: #d97706 !important; color: #fff !important; }
.badge.bg-info { background-color: #0891b2 !important; color: #fff !important; }
.badge.bg-secondary { background-color: #64748b !important; }

.bg-success { background-color: #059669 !important; }
.bg-danger { background-color: #dc2626 !important; }
.bg-warning { background-color: #d97706 !important; }
.bg-info { background-color: #0891b2 !important; }
.bg-primary { background-color: #2563eb !important; }
.bg-secondary { background-color: #64748b !important; }

.text-primary { color: #2563eb !important; }
.text-success { color: #059669 !important; }
.text-danger { color: #dc2626 !important; }
.text-warning { color: #d97706 !important; }
.text-info { color: #0891b2 !important; }

.nav-link:focus-visible {
  outline: 2px solid var(--asp-primary);
  outline-offset: 2px;
  border-radius: var(--asp-radius-sm);
}

/* ── Dark Mode ─────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --asp-primary-light: rgba(37, 99, 235, 0.18);
    --asp-bg: #1a1a1a;
    --asp-bg-secondary: #262626;
    --asp-bg-tertiary: #333333;
    --asp-text: #fafaf9;
    --asp-text-secondary: #a8a29e;
    --asp-text-muted: #78716c;
    --asp-border: #404040;
    --asp-border-hover: #525252;
    --asp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --asp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --asp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
    --asp-glass-bg: rgba(26, 26, 26, 0.8);
    --asp-glass-border: rgba(64, 64, 64, 0.5);
    --asp-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    --asp-shadow-hover: 0 8px 25px -5px rgba(37, 99, 235, 0.2), 0 4px 10px -4px rgba(0, 0, 0, 0.3);
    --asp-tint-success: rgba(5, 150, 105, 0.15);
    --asp-tint-info: rgba(8, 145, 178, 0.15);
    --asp-tint-warning: rgba(217, 119, 6, 0.12);
    --asp-tint-danger: rgba(220, 38, 38, 0.15);
    --asp-tint-accent: rgba(245, 158, 11, 0.18);
    --bs-body-bg: #1a1a1a;
    --bs-body-color: #fafaf9;
    --bs-border-color: #404040;
  }
}

/* Manual Dark Mode Class */
.dark-mode {
  --asp-primary-light: rgba(37, 99, 235, 0.18);
  --asp-bg: #1a1a1a;
  --asp-bg-secondary: #262626;
  --asp-bg-tertiary: #333333;
  --asp-text: #fafaf9;
  --asp-text-secondary: #a8a29e;
  --asp-text-muted: #78716c;
  --asp-border: #404040;
  --asp-border-hover: #525252;
  --asp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --asp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --asp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --asp-glass-bg: rgba(26, 26, 26, 0.8);
  --asp-glass-border: rgba(64, 64, 64, 0.5);
  --asp-glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  --asp-shadow-hover: 0 8px 25px -5px rgba(37, 99, 235, 0.2), 0 4px 10px -4px rgba(0, 0, 0, 0.3);
  --asp-tint-success: rgba(5, 150, 105, 0.15);
  --asp-tint-info: rgba(8, 145, 178, 0.15);
  --asp-tint-warning: rgba(217, 119, 6, 0.12);
  --asp-tint-danger: rgba(220, 38, 38, 0.15);
  --asp-tint-accent: rgba(245, 158, 11, 0.18);
  --bs-body-bg: #1a1a1a;
  --bs-body-color: #fafaf9;
  --bs-border-color: #404040;
}