/* ══════════════════════════════════════════════════════════════
   DISA v2 — Design System Foundation
   Loaded on ALL pages — both marketing and app
   ══════════════════════════════════════════════════════════════ */

/* 1 · BRAND TOKENS
   ─────────────────────────────────────────────────────────── */
:root {
  --color-primary:        #29B8B0;
  --color-primary-hover:  #1FA8A0;
  --color-primary-active: #18746A;
  --color-navy:           #1C2B3A;
  --color-surface:        #F4F7FA;
  --color-white:          #FFFFFF;
  --color-warning:        #E8A820;
  --color-warning-hover:  #C8920A;
  --color-danger:         #D94F5A;
  --color-danger-hover:   #C4404A;
  --color-success:        #4CAF7A;
  --color-slate:          #4E6375;
  --color-slate-muted:    rgba(78, 99, 117, 0.35);
  --color-border:         #E2EAF0;
  --color-shadow:         rgba(28, 43, 58, 0.08);
}

/* 1b · DESIGN-SYSTEM ALIASES
   ─────────────────────────────────────────────────────────── */
:root {
  --font-sans:  'Plus Jakarta Sans', sans-serif;
  --font-mono:  'Courier New', monospace;
  --color-text-primary:         #1C2B3A;
  --color-text-secondary:       #4E6375;
  --color-text-tertiary:        #8EA3B5;
  --color-background-primary:   #FFFFFF;
  --color-background-secondary: #F4F7FA;
  --color-border-primary:       #C8D8E4;
  --color-border-secondary:     #D4E0EA;
  --color-border-tertiary:      #E2EAF0;
  --border-radius-lg:           10px;
}

/* 2 · BASE RESET
   ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* 3 · APP BUTTONS — used on logged-in app pages
   ─────────────────────────────────────────────────────────── */

/* Filled — high emphasis */
.btn-disa-primary {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transition: background-color 0.2s, border-color 0.2s;
}
.btn-disa-primary:hover,
.btn-disa-primary:focus {
  color: #fff;
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.btn-disa-primary:active,
.btn-disa-primary.active,
.show > .btn-disa-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

.btn-disa-danger {
  color: #fff;
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  transition: background-color 0.2s, border-color 0.2s;
}
.btn-disa-danger:hover,
.btn-disa-danger:focus {
  color: #fff;
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}
.btn-disa-danger:active,
.btn-disa-danger.active,
.show > .btn-disa-danger.dropdown-toggle {
  color: #fff;
  background-color: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
}

/* Outlined — medium emphasis */
.btn-disa-outline-primary {
  color: var(--color-primary);
  background-color: var(--color-white);
  border-color: var(--color-primary);
  transition: background-color 0.2s;
}
.btn-disa-outline-primary:hover,
.btn-disa-outline-primary:focus {
  color: var(--color-primary);
  background-color: var(--color-surface);
  border-color: var(--color-primary);
}
.btn-disa-outline-primary:active,
.btn-disa-outline-primary.active,
.show > .btn-disa-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-disa-outline-danger {
  color: var(--color-danger);
  background-color: var(--color-white);
  border-color: var(--color-danger);
  transition: background-color 0.2s;
}
.btn-disa-outline-danger:hover,
.btn-disa-outline-danger:focus {
  color: var(--color-danger);
  background-color: var(--color-surface);
  border-color: var(--color-danger);
}
.btn-disa-outline-danger:active,
.btn-disa-outline-danger.active,
.show > .btn-disa-outline-danger.dropdown-toggle {
  color: #fff;
  background-color: var(--color-danger);
  border-color: var(--color-danger);
}

.btn-disa-outline-neutral {
  color: var(--color-slate);
  background-color: var(--color-white);
  border-color: var(--color-border);
  transition: background-color 0.2s, border-color 0.2s;
}
.btn-disa-outline-neutral:hover,
.btn-disa-outline-neutral:focus {
  color: var(--color-navy);
  background-color: var(--color-surface);
  border-color: var(--color-slate);
  box-shadow: none;
}
.btn-disa-outline-neutral:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(41, 184, 176, 0.15);
  outline: none;
}
.show > .btn-disa-outline-neutral.dropdown-toggle {
  color: var(--color-navy);
  background-color: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(41, 184, 176, 0.15);
}
.btn-disa-outline-neutral:disabled,
.btn-disa-outline-neutral.disabled {
  color: var(--color-text-tertiary);
  background-color: var(--color-surface);
  border-color: var(--color-border);
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
}

/* Ghost — low emphasis */
.btn-disa-ghost {
  color: var(--color-slate);
  background-color: transparent;
  border-color: transparent;
  transition: color 0.2s, background-color 0.2s;
}
.btn-disa-ghost:hover,
.btn-disa-ghost:focus {
  color: var(--color-primary);
  background-color: rgba(41, 184, 176, 0.08);
  border-color: transparent;
}