/*
 * Dialog - Navy Theme Styles
 *
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Color System - Single Source of Truth
 *
 * Colors are defined in config/colors.js and automatically synchronized.
 * To update colors: modify config/colors.js and run 'npm run sync-colors'
 */
@import "generated-colors.css";

/* Import Component System - Button Components */
@import "components/buttons.css";
/* Import Card Components */
@import "components/cards.css";
@import "components/alerts.css";
/* Import Utility Classes */
@import "utilities.css";

/* Import Component System - JSMind Visualization */
@import "components/jsmind.css";

/* Font Configuration - Nunito Variable Font */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/Nunito-VariableFont_wght.woff2") format("woff2");
    font-named-instance: "Regular";
  }
}

/* Font Configuration - Spectral Regular for Headings */
@font-face {
  font-family: "Spectral";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/Spectral-Regular.woff2") format("woff2");
}

@layer utilities {
  .font-thin {
    font-variation-settings: 'wght' 100;
  }

  .font-extralight {
    font-variation-settings: 'wght' 200;
  }

  .font-light {
    font-variation-settings: 'wght' 300;
  }

  .font-normal {
    font-variation-settings: 'wght' 400;
  }

  .font-medium {
    font-variation-settings: 'wght' 500;
  }

  .font-semibold {
    font-variation-settings: 'wght' 600;
  }

  .font-bold {
    font-variation-settings: 'wght' 700;
  }

  .font-extrabold {
    font-variation-settings: 'wght' 800;
  }

  .font-black {
    font-variation-settings: 'wght' 900;
  }
}

/* Default body and text use Nunito font */
body {
  font-family: "Nunito", system-ui, sans-serif;
}

/* Custom font family utilities */
.font-spectral {
  font-family: "Spectral", Georgia, serif !important;
}

.font-nunito {
  font-family: "Nunito", system-ui, sans-serif !important;
}

/* Force Navy Theme Colors for non-component elements */
a[style*="background-color: var(--brand-primary"],
a[style*="background-color: #022353"],
button[style*="background-color: var(--brand-primary"],
button[style*="background-color: #022353"],
[style*="background-color: var(--brand-primary"],
[style*="background-color: #022353"] {
  background-color: #022353 !important;
  border-color: #022353 !important;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* Universal hover effects for non-component brand primary elements */
a[style*="background-color: var(--brand-primary"]:hover,
a[style*="background-color: #022353"]:hover,
button[style*="background-color: var(--brand-primary"]:hover,
button[style*="background-color: #022353"]:hover,
.bg-brand-primary:hover,
a[href]:hover[style*="background-color"],
button:hover[style*="background-color"],
[style*="background-color: var(--brand-primary"]:hover,
[style*="background-color: #022353"]:hover {
  background-color: var(--brand-primary-hover, #011a3d) !important;
  border-color: var(--brand-primary-hover, #011a3d) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(2, 35, 83, 0.15);
  transition: all 0.2s ease;
}

/* Force text colors */
[style*="color: var(--brand-primary"] {
  color: #022353 !important;
}

/* Universal button base styles for smooth transitions */
a[style*="background-color"],
button[style*="background-color"],
a.flex.items-center,
a.inline-flex.items-center,
.bg-brand-primary,
[role="button"],
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.btn,
[type="submit"] {
  transition: all 0.2s ease;
  cursor: pointer;
}

/* Universal focus styles for accessibility */
a[style*="background-color"]:focus,
button[style*="background-color"]:focus,
a.flex.items-center:focus,
a.inline-flex.items-center:focus {
  outline: 2px solid var(--brand-primary-light);
  outline-offset: 2px;
}

/* Force hero section gradient */
.h-56.w-full.sm\\:h-72.md\\:h-96.lg\\:w-full.lg\\:h-full,
[style*="linear-gradient(135deg, var(--brand-primary"] {
  background: linear-gradient(135deg, #022353, #011426) !important;
}

/* Force all brand primary backgrounds */
div[style*="background-color: var(--brand-primary"] {
  background-color: #022353 !important;
}

/* Override any old green colors that might remain */
[style*="#092c1d"] {
  color: #022353 !important;
  background-color: #022353 !important;
  border-color: #022353 !important;
}

/* Global theme override - force Navy colors */
span[style*="Deploy Everywhere"],
.h-56.w-full.sm\\:h-72.md\\:h-96.lg\\:w-full.lg\\:h-full {
  background: linear-gradient(135deg, #022353, #011426) !important;
  color: #022353 !important;
}

/* Button override */
a.flex.items-center.justify-center.px-8.py-3,
a.inline-flex.items-center.justify-center {
  background-color: #022353 !important;
  border-color: #022353 !important;
  transition: all 0.2s ease;
  cursor: pointer;
}