/*
|--------------------------------------------------------------------------
| TQS Finance Brand Colours
|--------------------------------------------------------------------------
| Recommended colour system for TQS Finance.
| Primary brand colour: teal
| Important text / footer colour: deep navy
| Accent colour: gold, for decorative elements only
|--------------------------------------------------------------------------
*/

:root {
  /* Brand Primary */
  --primary-color: #0c7672;
  --primary-hover: #075c59;
  --primary-light: #e6f3f2;
  --primary-subtle: #f0faf9;

  /* Backgrounds */
  --background-color: #FAFAF8;
  --background-soft: #F4F7F6;
  --card-background: #FFFFFF;
  --section-background: #F8FAF9;

  /* Text Colours */
  --important-text-color: #101c30;
  --heading-color: #101c30;
  --regular-text-color: #263244;
  --muted-text-color: #667085;
  --text-on-dark: #FFFFFF;

  /* Accent */
  --accent-color: #d5a23e;
  --accent-hover: #bd8d2d;
  --accent-soft: #f7ecd3;
  --accent-light: #fbf4e3;

  /* Footer */
  --footer-color: #101c30;
  --footer-font-color: #FFFFFF;
  --footer-muted-text: #C7CED8;
  --footer-border: rgba(255, 255, 255, 0.12);

  /* Borders / UI */
  --border-color: #E5E9EC;
  --input-border: #D0D5DD;
  --input-focus-border: #0c7672;
  --divider-color: #E8ECEC;

  /* States */
  --success-color: #0c7672;
  --warning-color: #d5a23e;
  --error-color: #B42318;
  --error-soft: #FEF3F2;

  /* Shadows */
  --shadow-soft: 0 10px 30px rgba(16, 28, 48, 0.08);
  --shadow-medium: 0 18px 45px rgba(16, 28, 48, 0.12);
  --shadow-primary: 0 12px 28px rgba(12, 118, 114, 0.22);
}

/*
|--------------------------------------------------------------------------
| Base Usage Helpers
|--------------------------------------------------------------------------
*/

body {
  background-color: var(--background-color);
  color: var(--regular-text-color);
}

h1,
h2,
h3,
h4,
h5,
h6,
.text-important {
  color: var(--important-text-color);
}

.text-muted-brand {
  color: var(--muted-text-color) !important;
}

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

.text-accent {
  color: var(--accent-color) !important;
}

.bg-primary-brand {
  background-color: var(--primary-color) !important;
  color: var(--text-on-dark) !important;
}

.bg-primary-light {
  background-color: var(--primary-light) !important;
}

.bg-brand {
  background-color: var(--background-color) !important;
}

.bg-soft {
  background-color: var(--background-soft) !important;
}

.bg-footer {
  background-color: var(--footer-color) !important;
  color: var(--footer-font-color) !important;
}

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

.gold-line {
  width: 72px;
  height: 3px;
  background-color: var(--accent-color);
  border-radius: 999px;
}

/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.btn-primary-brand {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-primary);
}

.btn-primary-brand:hover,
.btn-primary-brand:focus {
  background-color: var(--primary-hover);
  border-color: var(--primary-hover);
  color: var(--text-on-dark);
}

.btn-outline-primary-brand {
  background-color: transparent;
  border-color: var(--primary-color);
  color: var(--primary-color);
}

.btn-outline-primary-brand:hover,
.btn-outline-primary-brand:focus {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-on-dark);
}

.btn-accent {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--important-text-color);
}

.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--important-text-color);
}

/*
|--------------------------------------------------------------------------
| Cards / Panels
|--------------------------------------------------------------------------
*/

.brand-card {
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-soft);
}

.brand-card:hover {
  box-shadow: var(--shadow-medium);
}

.icon-badge {
  background-color: var(--primary-light);
  color: var(--primary-color);
}

.accent-badge {
  background-color: var(--accent-soft);
  color: var(--important-text-color);
}

/*
|--------------------------------------------------------------------------
| Forms
|--------------------------------------------------------------------------
*/

.form-control,
.form-select {
  border-color: var(--input-border);
  color: var(--regular-text-color);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--input-focus-border);
  box-shadow: 0 0 0 0.2rem rgba(12, 118, 114, 0.16);
}

/*
|--------------------------------------------------------------------------
| Footer
|--------------------------------------------------------------------------
*/

.site-footer {
  background-color: var(--footer-color);
  color: var(--footer-font-color);
}

.site-footer a {
  color: var(--footer-font-color);
}

.site-footer a:hover {
  color: var(--accent-color);
}

.site-footer .footer-muted {
  color: var(--footer-muted-text);
}

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