/* DTDA Brand Styling - Local fonts via talk_sfu_toggle */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/nextcloud/index.php/apps/talk_sfu_toggle/fonts/space-grotesk-regular') format('truetype');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/nextcloud/index.php/apps/talk_sfu_toggle/fonts/space-grotesk-medium') format('truetype');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/nextcloud/index.php/apps/talk_sfu_toggle/fonts/space-grotesk-semibold') format('truetype');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/nextcloud/index.php/apps/talk_sfu_toggle/fonts/space-grotesk-bold') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/nextcloud/index.php/apps/talk_sfu_toggle/fonts/inter-regular') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/nextcloud/index.php/apps/talk_sfu_toggle/fonts/inter-medium') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/nextcloud/index.php/apps/talk_sfu_toggle/fonts/inter-semibold') format('truetype');
}

:root {
  --dtda-navy: #0B1220;
  --dtda-white: #FFFFFF;
  --dtda-cobalt: #1F5EFF;
  --dtda-teal: #00C2A8;
  --dtda-slate: #64748B;
  --dtda-light-gray: #F8FAFC;
}

/* Typography */
body, .app-content {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.app-navigation-entry,
.section-title {
  font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Buttons - Navy background with white text */
.button-vue--vue-primary,
.primary,
button.primary,
input[type="submit"].primary {
  background-color: var(--dtda-navy) !important;
  border-color: var(--dtda-navy) !important;
  border-radius: 10px !important;
}

.button-vue--vue-primary:hover,
.primary:hover {
  background-color: var(--dtda-cobalt) !important;
  border-color: var(--dtda-cobalt) !important;
}

/* Secondary buttons */
.button-vue--vue-secondary,
.secondary {
  border-radius: 10px !important;
  border-color: var(--dtda-slate) !important;
}

/* Cards styling */
.app-content-wrapper,
.section,
.card,
.modal-container {
  border-radius: 16px !important;
}

/* Forms styling */
.forms-content,
.forms-public {
  background-color: var(--dtda-light-gray) !important;
}

/* Form input fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  border-radius: 8px !important;
  border: 1px solid var(--dtda-slate) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--dtda-cobalt) !important;
  box-shadow: 0 0 0 2px rgba(31, 94, 255, 0.2) !important;
}

/* Links */
a {
  color: var(--dtda-cobalt) !important;
}

a:hover {
  color: var(--dtda-teal) !important;
}

/* Header styling */
#header {
  background-color: var(--dtda-navy) !important;
}

/* Navigation */
.app-navigation {
  background-color: var(--dtda-light-gray) !important;
}