/*
 * Staffed AI — Brand Variables
 * Source of truth for colors, typography, and spacing tokens.
 * Include this after theme.min.css on every page.
 *
 * Light theme:  warm cream #F9F7F4 background, near-black #1A1A1A text
 * Dark theme:   deep navy #0D1B2E background, white text
 * Brand accent: #1E3A5F (primary navy)
 */

:root {
  /* ── Page ── */
  --sai-bg:               #F9F7F4;
  --sai-bg-dark:          #1E3A5F;   /* approved 2026-03-08: navy (was #0D1B2E) */

  /* ── Surfaces ── */
  --sai-surface:          #FFFFFF;
  --sai-surface-dark:     #243F66;   /* card on navy dark bg */
  --sai-surface-hover:    #F4F1EC;
  --sai-surface-hover-dk: #2A4F7A;

  /* ── Borders ── */
  --sai-border:           #E8E4DF;
  --sai-border-dark:      #2D4E73;

  /* ── Text ── */
  --sai-text:             #1A1A1A;
  --sai-text-secondary:   #555555;
  --sai-text-muted:       #888888;
  --sai-text-dark:        #FFFFFF;
  --sai-text-secondary-dk:rgba(255, 255, 255, 0.65);
  --sai-text-muted-dk:    #A8BCCF;

  /* ── Brand ── */
  --sai-primary:          #1E3A5F;   /* PROTECTED — primary navy */
  --sai-primary-hover:    #16305A;
  --sai-primary-light:    #C8D8EB;
  --sai-primary-pale:     #EEF3F8;

  /* ── Accent blue (approved 2026-03-08) ── */
  /* Use for: eyebrows, step numbers, icon strokes, the "Alex." name highlight */
  /* Do NOT use for primary buttons, backgrounds, or headings */
  --sai-accent-blue:      #3B6FBF;
  --sai-accent-blue-bg:   #EEF3FA;   /* pale tint for chips/tags */

  /* ── Status ── */
  --sai-accent:           #4ADE80;   /* live / success */
  --sai-danger:           #E04444;   /* PDF / destructive */
  --sai-warning:          #FEBC2E;
  --sai-info:             #007AFF;   /* iOS blue, links */

  /* ── Typography ── */
  --sai-font-display: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, sans-serif;
  --sai-font-body:    'Plus Jakarta Sans',   -apple-system, BlinkMacSystemFont, sans-serif;
  --sai-font-mono:    'JetBrains Mono',      'Fira Code', 'Courier New', monospace;

  /* ── Shadows (light) ── */
  --sai-shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.05);
  --sai-shadow-md:  0 6px 20px rgba(30, 58, 95, 0.10);
  --sai-shadow-lg:  0 20px 60px rgba(30, 58, 95, 0.13);
  --sai-shadow-xl:  0 40px 100px rgba(30, 58, 95, 0.16);

  /* ── Shadows (dark) ── */
  --sai-shadow-sm-dk: 0 2px 8px rgba(0, 0, 0, 0.25);
  --sai-shadow-md-dk: 0 6px 20px rgba(0, 0, 0, 0.35);
  --sai-shadow-lg-dk: 0 20px 60px rgba(0, 0, 0, 0.50);

  /* ── Radius ── */
  --sai-radius-sm:   6px;
  --sai-radius-md:   10px;
  --sai-radius-lg:   16px;
  --sai-radius-xl:   24px;
  --sai-radius-pill: 9999px;
}

/* ── Remap Bootstrap / Silicon primary to brand navy ── */
/* Override --si-primary (Silicon theme) and Bootstrap button component vars */
:root,
[data-bs-theme="light"] {
  --si-primary:              #1E3A5F;
  --si-primary-rgb:          30, 58, 95;
  --bs-primary:              #1E3A5F;
  --bs-primary-rgb:          30, 58, 95;
  --bs-link-color:           #1E3A5F;
  --bs-link-color-rgb:       30, 58, 95;
  --bs-link-hover-color:     #16305A;
}

.btn-primary {
  --si-btn-bg:                  #1E3A5F;
  --si-btn-border-color:        #1E3A5F;
  --si-btn-color:               #fff;
  --si-btn-hover-bg:            #16305A;
  --si-btn-hover-border-color:  #16305A;
  --si-btn-hover-color:         #fff;
  --si-btn-active-bg:           #16305A;
  --si-btn-active-border-color: #16305A;
  --si-btn-active-color:        #fff;
  --si-btn-disabled-bg:         #1E3A5F;
  --si-btn-disabled-border-color: #1E3A5F;
  --si-btn-disabled-color:      #fff;
}

.btn-outline-primary {
  --si-btn-color:               #1E3A5F;
  --si-btn-border-color:        #1E3A5F;
  --si-btn-hover-bg:            #1E3A5F;
  --si-btn-hover-border-color:  #1E3A5F;
  --si-btn-hover-color:         #fff;
  --si-btn-active-bg:           #1E3A5F;
  --si-btn-active-border-color: #1E3A5F;
  --si-btn-active-color:        #fff;
}

/* ── Base application ── */
html, body {
  background-color: var(--sai-bg);
  color: var(--sai-text);
  font-family: var(--sai-font-body);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5 {
  font-family: var(--sai-font-display);
}

code, kbd, pre, samp,
.font-mono, .mono {
  font-family: var(--sai-font-mono);
}

/* ── Dark theme overrides ── */
[data-bs-theme="dark"] body,
[data-sai-theme="dark"] body,
.sai-dark {
  background-color: var(--sai-bg-dark);
  color: var(--sai-text-dark);
}

/* ── Utility classes ── */
.sai-bg          { background-color: var(--sai-bg) !important; }
.sai-bg-dark     { background-color: var(--sai-bg-dark) !important; }
.sai-surface     { background-color: var(--sai-surface) !important; }
.sai-surface-dark{ background-color: var(--sai-surface-dark) !important; }

.sai-text        { color: var(--sai-text) !important; }
.sai-text-secondary { color: var(--sai-text-secondary) !important; }
.sai-text-muted  { color: var(--sai-text-muted) !important; }
.sai-text-primary{ color: var(--sai-primary) !important; }

.sai-border      { border-color: var(--sai-border) !important; }

/* ── Brand button ── */
.btn-sai-primary {
  background-color: var(--sai-primary);
  color: #fff;
  border: none;
  border-radius: var(--sai-radius-md);
  font-family: var(--sai-font-body);
  font-weight: 600;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.btn-sai-primary:hover {
  background-color: var(--sai-primary-hover);
  color: #fff;
  transform: translateY(-1px);
}

.btn-sai-outline {
  background-color: transparent;
  color: var(--sai-primary);
  border: 2px solid var(--sai-primary);
  border-radius: var(--sai-radius-md);
  font-family: var(--sai-font-body);
  font-weight: 600;
  transition: all 0.2s ease;
}
.btn-sai-outline:hover {
  background-color: var(--sai-primary);
  color: #fff;
}