/* ==================================================================
   theme.css  -  AICaller design tokens + Mofi variable overrides
   Loaded AFTER all Mofi CSS (style.css, color-1.css) and before area.css.
   Per 02_DESIGN_SYSTEM.md: dominant indigo, sharp saffron accents,
   warm paper neutrals.
   ================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Deep Indigo (primary brand) */
  --pr-navy:        #0E1B3D;
  --pr-navy-dark:   #070E22;
  --pr-navy-mid:    #1A2E5C;
  --pr-navy-light:  #2A4A8A;
  --pr-navy-tint:   rgba(14, 27, 61, 0.06);
  --pr-navy-tint-md:rgba(14, 27, 61, 0.12);

  /* Saffron Orange (accent / CTA) */
  --pr-gold:        #F56E0F;
  --pr-gold-dark:   #C45508;
  --pr-gold-light:  #FF8C3A;
  --pr-gold-tint:   rgba(245, 110, 15, 0.10);
  --pr-gold-tint-md:rgba(245, 110, 15, 0.18);

  /* Semantic */
  --pr-red:    #B23B2E;  --pr-red-tint:    rgba(178, 59, 46, 0.08);
  --pr-green:  #1A8754;  --pr-green-tint:  rgba(26, 135, 84, 0.09);
  --pr-yellow: #D4A017;  --pr-yellow-tint: rgba(212, 160, 23, 0.09);

  /* Warm neutrals */
  --pr-white:        #FAF7F2;
  --pr-pure-white:   #FFFFFF;
  --pr-bg:           #F2EDE6;
  --pr-bg-alt:       #EAE4DB;
  --pr-border:       #E6DFD5;
  --pr-border-light: #EDE7DE;

  /* Text */
  --pr-text-primary:   #111827;
  --pr-text-secondary: #46505F;
  --pr-text-muted:     #8A93A3;
  --pr-text-inverse:   #FFFFFF;

  /* Type */
  --pr-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pr-font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* Radius */
  --pr-radius-sm: 6px;
  --pr-radius:    10px;
  --pr-radius-lg: 14px;
  --pr-radius-xl: 20px;
  --pr-radius-pill: 100px;

  /* Shadows (warm indigo-tinted) */
  --pr-shadow-xs: 0 1px 3px rgba(14, 27, 61, 0.05);
  --pr-shadow-sm: 0 3px 12px rgba(14, 27, 61, 0.06);
  --pr-shadow:    0 6px 22px rgba(14, 27, 61, 0.08);
  --pr-shadow-md: 0 12px 34px rgba(14, 27, 61, 0.10);
  --pr-shadow-lg: 0 22px 56px rgba(14, 27, 61, 0.13);

  /* Transitions */
  --pr-transition: all 0.18s ease;
  --pr-transition-md: all 0.28s ease;
}

/* ---------- 2. Re-point Mofi template variables ---------- */
:root {
  --theme-default: var(--pr-gold);     /* Mofi primary  -> saffron */
  --theme-secondary: var(--pr-navy);   /* Mofi secondary -> indigo */
  --body-font-color: var(--pr-text-primary);
}

/* ---------- 3. Base typography / background ---------- */
body {
  font-family: var(--pr-font);
  background-color: var(--pr-bg);
  color: var(--pr-text-secondary);
  font-size: 15px;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--pr-font); color: var(--pr-text-primary); }
h1 { font-size: 2rem;   font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.015em; }
h3 { font-size: 1.2rem; font-weight: 600; }
h4 { font-size: 1.0rem; font-weight: 600; }
h5 { font-size: 0.9rem; font-weight: 500; }
h6 { font-size: 0.85rem;font-weight: 500; }

.text-mono { font-family: var(--pr-font-mono); font-variant-numeric: tabular-nums; }

/* ---------- 4. Brand colour applications ---------- */
a { color: var(--pr-gold-dark); }
a:hover { color: var(--pr-gold); }

.text-primary  { color: var(--pr-gold) !important; }
.bg-primary    { background-color: var(--pr-gold) !important; }
.text-secondary{ color: var(--pr-navy) !important; }

/* Buttons */
.btn-primary {
  background-color: var(--pr-gold);
  border-color: var(--pr-gold);
  color: var(--pr-text-inverse);
  border-radius: var(--pr-radius-pill);
  font-weight: 600;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--pr-gold-light) !important;
  border-color: var(--pr-gold-light) !important;
  color: var(--pr-text-inverse) !important;
}
.btn-secondary {
  background-color: var(--pr-navy);
  border-color: var(--pr-navy);
  border-radius: var(--pr-radius-pill);
}
.btn-secondary:hover { background-color: var(--pr-navy-light) !important; border-color: var(--pr-navy-light) !important; }
.btn-outline-primary {
  color: var(--pr-gold-dark);
  border-color: var(--pr-gold);
  border-radius: var(--pr-radius-pill);
}
.btn-outline-primary:hover { background-color: var(--pr-gold-tint); color: var(--pr-gold-dark); border-color: var(--pr-gold); }

/* Links / focus rings on forms */
.form-control:focus, .form-select:focus {
  border-color: var(--pr-gold);
  box-shadow: 0 0 0 3px rgba(245, 110, 15, 0.12);
}

/* ---------- 5. Mofi shell colour overrides ---------- */
.sidebar-wrapper,
.sidebar-wrapper .sidebar-main,
.page-header .header-logo-wrapper {
  background-color: var(--pr-navy) !important;
}
.sidebar-wrapper .logo-wrapper, .sidebar-wrapper .logo-icon-wrapper { background-color: var(--pr-navy) !important; }

/* Active sidebar link -> saffron */
.sidebar-wrapper .sidebar-link.active,
.sidebar-wrapper .sidebar-link.active span,
.sidebar-wrapper .sidebar-link.active svg { color: var(--pr-gold) !important; }
.sidebar-wrapper .sidebar-link.active { border-left: 3px solid var(--pr-gold); background: var(--pr-gold-tint-md); }
.sidebar-wrapper .sidebar-link span { color: rgba(255,255,255,0.85); }
.sidebar-wrapper .sidebar-link:hover { background: var(--pr-navy-light); }
.sidebar-wrapper .sidebar-main-title h6 { color: rgba(255,255,255,0.5) !important; text-transform: uppercase; font-size: 0.65rem; }

/* Card */
.card {
  background: var(--pr-white);
  border: 0.5px solid var(--pr-border-light);
  border-radius: var(--pr-radius-lg);
  box-shadow: var(--pr-shadow-xs);
}

/* Tables */
.table thead th {
  background: var(--pr-bg-alt);
  color: var(--pr-text-muted);
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.table tbody tr:hover { background: var(--pr-navy-tint); }
.table td, .table th { border-color: var(--pr-border-light); }

/* ---------- 6. Status badges ---------- */
.status-active, .status-booked { background: var(--pr-green-tint); color: var(--pr-green); }
.status-inactive { background: var(--pr-bg-alt); color: var(--pr-text-muted); }
.status-pending  { background: var(--pr-yellow-tint); color: #7A5800; }
.status-error    { background: var(--pr-red-tint); color: var(--pr-red); }
.status-calling  { background: var(--pr-gold-tint); color: var(--pr-gold-dark); }
.status-active, .status-inactive, .status-pending, .status-error, .status-calling, .status-booked {
  display: inline-block;
  border-radius: var(--pr-radius-pill);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 10px;
}