/* ============================================
   MIShip.AspNet - Global Site Styles
   See Docs/Styling-Architecture.md for conventions
   ============================================ */

/* ============================================
   1. FONT FACES (Self-hosted)
   Download fonts to wwwroot/fonts/ - see fonts/README.md
   ============================================ */
@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans/open-sans-v44-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans/open-sans-v44-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('/fonts/open-sans/open-sans-v44-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto/roboto-v50-latin-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto/roboto-v50-latin-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto/roboto-v50-latin-700.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   2. CSS VARIABLES (Design Tokens)
   Layered: Primitives → Semantic → Component → Vendor
   ============================================ */
:root {
    /* ========== PRIMITIVE COLORS (Palette) ========== */
    --blue-500: #1976d2;
    --blue-600: #1565c0;
    --blue-700: #00467f;
    --blue-800: #003d73;
    /* FedEx Returns Page Colors */
    --fedex-page-bg: #003F72;
    --fedex-section-header: #005EA8;
    --fedex-instruction-bg: #F5F7FA;
    --fedex-instruction-border: #E1E6ED;
    --fedex-input-border: #C9D1DB;
    --fedex-input-readonly-border: #D6DCE3;
    --fedex-instruction-text: #4A4A4A;
    --fedex-placeholder-text: #8A8A8A;
    --fedex-btn-disabled-bg: #E0E0E0;
    --fedex-btn-disabled-text: #9E9E9E;
    --fedex-btn-disabled-border: #D0D0D0;
    --fedex-label-text: #333333;
    --fedex-input-text: #222222;
    --fedex-input-readonly-bg: #F2F2F2;
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e0e0e0;
    --gray-300: #bdbdbd;
    --gray-400: #9e9e9e;
    --gray-500: #757575;
    --gray-600: #616161;
    --gray-700: #424242;
    --gray-800: #333333;
    --gray-900: #212121;
    --red-500: #d32f2f;
    --red-600: #c62828;
    --green-500: #198754;
    --green-600: #157347;
    --yellow-500: #ffc107;
    --white: #ffffff;
    --black: #000000;
    /* ========== SEMANTIC TOKENS (Purpose) ========== */
    --color-primary: var(--blue-700);
    --color-primary-hover: var(--blue-800);
    --color-secondary: var(--gray-600);
    --color-success: var(--green-500);
    --color-danger: var(--red-500);
    --color-warning: var(--yellow-500);
    --color-info: var(--blue-500);
    --color-background: var(--white);
    --color-surface: var(--gray-100);
    --color-text: var(--gray-800);
    --color-text-muted: var(--gray-500);
    --color-text-light: var(--gray-400);
    --color-border: var(--gray-200);
    --color-link: var(--blue-700);
    --color-link-hover: var(--blue-800);
    /* ========== COMPONENT TOKENS (Material/Forms) ========== */
    --mat-primary: var(--color-primary);
    --mat-primary-hover: var(--color-primary-hover);
    --mat-error: var(--color-danger);
    --mat-success: var(--color-success);
    --mat-background: var(--color-background);
    --mat-surface: var(--color-surface);
    --mat-text: var(--color-text);
    --mat-label: var(--color-text-muted);
    --mat-outline: var(--gray-300);
    /* ========== VENDOR TOKENS (Overridable by vendor CSS) ========== */
    --vendor-primary: var(--color-primary);
    --vendor-secondary: var(--color-secondary);
    --vendor-accent: var(--blue-500);
    /* ========== TYPOGRAPHY ========== */
    --font-family-base: 'Open Sans', Arial, sans-serif;
    --font-family-heading: 'Roboto', Arial, sans-serif;
    --font-size-base: 0.875rem;
    --font-weight-normal: 500;
    --font-weight-medium: 600;
    --font-weight-semibold: 700;
    --font-weight-bold: bolder;
    /* ========== SPACING (Bootstrap-aligned, 4px base) ========== */
    --spacing-1: 0.25rem; /* 4px */
    --spacing-2: 0.5rem; /* 8px */
    --spacing-3: 0.875rem; /* 14px */
    --spacing-4: 1.5rem; /* 24px */
    --spacing-5: 3rem; /* 48px */
    /* ========== BORDERS & RADIUS ========== */
    --radius-sm: 0.25rem; /* 4px */
    --radius-md: 0.375rem; /* 6px */
    --radius-lg: 0.5rem; /* 8px */
    --radius-xl: 0.75rem; /* 12px */
    --radius-full: 9999px;
    /* ========== SHADOWS ========== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
    /* ========== TRANSITIONS ========== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
}

/* ============================================
   3. BASE STYLES
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-background);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-top: 0;
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* ============================================
   4. FORM OVERRIDES
   ============================================ */
.form-control:focus {
    border-color: var(--mat-primary);
    box-shadow: 0 0 0 0.2rem rgba(25, 118, 210, 0.25);
}

.btn-primary {
    color: var(--white);
    background-color: var(--mat-primary);
    border-color: var(--mat-primary);
}

.btn-primary:hover {
    background-color: var(--mat-primary-hover);
    border-color: var(--mat-primary-hover);
}

/* ============================================
   5. NAVIGATION OVERRIDES
   ============================================ */
a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: var(--white);
    background-color: var(--mat-primary);
    border-color: var(--mat-primary);
}

.btn-link.nav-link:focus {
    outline: 2px solid var(--mat-primary);
    outline-offset: 2px;
}

/* ============================================
   6. LAYOUT UTILITIES
   ============================================ */
.container {
    max-width: 960px;
}

.pricing-header {
    max-width: 700px;
}

/* ============================================
   7. BORDER UTILITIES
   ============================================ */
.border-top {
    border-top: 1px solid var(--color-border);
}

.border-bottom {
    border-bottom: 1px solid var(--color-border);
}

.box-shadow {
    box-shadow: var(--shadow-sm);
}

/* ============================================
   8. COMPONENT STYLES
   ============================================ */
button.accept-policy {
    font-size: 0.875rem;
    line-height: inherit;
}

/* ============================================
   9. FOOTER
   ============================================ */
.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    line-height: 60px;
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
}

/* ============================================
   10. ACCESSIBILITY
   ============================================ */
.visually-hidden,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--mat-primary);
    outline-offset: 2px;
}