@import "components/footer.css";

/* Single source of truth for color across every screen.
   Anything user-facing should reference a token from this block rather than
   its own hex value, so the app reads as one product instead of a set of
   pages that each invented a slightly different blue. */
:root {
    /* Brand blues. --better-blue is the one action color: primary buttons,
       links, and accents all use it. */
    --suffolk-blue: #1e3a5f;
    --better-blue: #2c5aa0;
    --brand-blue-hover: #24497f;
    --brand-blue-active: #1e3a5f;

    /* Older pages theme their buttons through this name. Pointing it at the
       brand blue keeps them in step with the rest of the app. */
    --primary-btn-color: var(--better-blue);

    /* Text tiers. Every value below clears WCAG AA (4.5:1) on white and on
       both tinted surfaces defined here. */
    --text-heading: #1e3a5f;
    --text-body: #48576c;
    --text-muted: #616c82;

    /* Surfaces */
    --surface-subtle: #f6f9fd;
    --surface-accent: #eef5ff;
    --light-blue-background: #f8f9fa;

    /* Borders. --border-strong is for edges that outline a control; the
       lighter two are decorative dividers. */
    --border-subtle: #e3e8ef;
    --border-default: #dce3ec;
    --border-accent: #cbdcf1;
    --border-strong: #7d8ca3;

    /* Status */
    --success: #28a745;
    --success-text: #16703a;
    --success-surface: #e5f6eb;
    --success-border: #cde8d5;
    --failure: #dc3545;
    --danger-icon: #b23b3b;
    --warning-surface: #fffaf0;
    --warning-border: #ead8ad;

    /* Links follow the brand blue rather than Bootstrap's default indigo. */
    --bs-link-color: var(--better-blue);
    --bs-link-hover-color: var(--brand-blue-hover);
    --bs-link-color-rgb: 44, 90, 160;
}

body {
    background-color: var(--light-blue-background);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.brand-link {
    align-items: center;
    color: white;
    display: inline-flex;
    gap: 0.75rem;
    text-decoration: none;
}

.brand-link:hover {
    color: white;
    opacity: 0.85;
}

.brand-logo {
    height: 42px;
    object-fit: contain;
    width: auto;
    max-width: 140px;
}

/* Custom styles for better spacing and required field styling */
.required {
    color: var(--failure) !important;
    font-weight: bold;
}

h1 {
    color: var(--better-blue);
    font-weight: 600;
}

h2 {
    color: var(--better-blue);
    font-weight: 500;
}

/* One primary action color on every screen. Bootstrap themes buttons through
   its own custom properties, so setting those keeps the hover, active, and
   disabled states in step instead of repainting only the resting state. */
.btn-primary {
    --bs-btn-bg: var(--better-blue);
    --bs-btn-border-color: var(--better-blue);
    --bs-btn-hover-bg: var(--brand-blue-hover);
    --bs-btn-hover-border-color: var(--brand-blue-hover);
    --bs-btn-active-bg: var(--brand-blue-active);
    --bs-btn-active-border-color: var(--brand-blue-active);
    --bs-btn-disabled-bg: var(--better-blue);
    --bs-btn-disabled-border-color: var(--better-blue);
}

.btn-outline-primary {
    --bs-btn-color: var(--better-blue);
    --bs-btn-border-color: var(--better-blue);
    --bs-btn-hover-bg: var(--better-blue);
    --bs-btn-hover-border-color: var(--better-blue);
    --bs-btn-active-bg: var(--brand-blue-active);
    --bs-btn-active-border-color: var(--brand-blue-active);
}

/* Bootstrap's default secondary outline is too faint on several light
   surfaces, especially in compact controls. */
.btn-outline-secondary {
    --bs-btn-color: #343a40;
    --bs-btn-border-color: #343a40;
    --bs-btn-hover-bg: #343a40;
    --bs-btn-hover-border-color: #343a40;
    --bs-btn-active-bg: #212529;
    --bs-btn-active-border-color: #212529;
}

/* Respect a person's system setting even when an individual component's
   motion has not opted into the no-preference media query yet. */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* Persistent, in-flow feedback shared by account, dashboard, list, and
   workflow screens. Messages stay available to zoom and assistive-technology
   users until they navigate or correct the problem. */
.page-feedback {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
}

.page-feedback__message {
    align-items: flex-start;
    background: var(--surface-accent);
    border: 1px solid var(--border-accent);
    border-left: 4px solid var(--better-blue);
    border-radius: 8px;
    color: var(--text-heading);
    display: flex;
    gap: 0.65rem;
    padding: 0.9rem 1rem;
}

.page-feedback__message i {
    flex: 0 0 auto;
    margin-top: 0.2rem;
}

.page-feedback__message--success {
    background: var(--success-surface);
    border-color: var(--success-border);
    border-left-color: var(--success-text);
    color: var(--success-text);
}

.page-feedback__message--warning {
    background: var(--warning-surface);
    border-color: var(--warning-border);
    border-left-color: #8a6116;
}

.page-feedback__message--error {
    background: #fff1f2;
    border-color: #fecdd3;
    border-left-color: var(--failure);
    color: #8f1d2c;
}