/* ConfigGuard Commercial Website
   Design System v1.0 */

/* ===== CSS Custom Properties ===== */
:root {
    /* Brand colors */
    --color-navy:       #213969;
    --color-crimson:    #8a0b00;
    --color-blue-mid:   #325596;
    --color-blue-light: #5C7DBD;

    /* Extended palette */
    --color-blue-pale:  #E8EDF5;
    --color-blue-wash:  #F4F6FA;
    --color-navy-deep:  #0D1F3C;
    --color-gray-700:   #374151;
    --color-gray-600:   #4A5568;
    --color-gray-400:   #9CA3AF;
    --color-gray-300:   #D1D5DB;
    --color-gray-100:   #F3F4F6;
    --color-white:      #FFFFFF;

    /* Typography */
    --font-brand: 'HandelGothic', Arial, Helvetica, sans-serif;
    --font-body:  Tahoma, Verdana, Segoe, sans-serif;

    /* Spacing */
    --space-xs:  0.5rem;
    --space-sm:  1rem;
    --space-md:  2rem;
    --space-lg:  4rem;
    --space-xl:  6rem;

    /* Layout */
    --max-width:     1200px;
    --header-height: 72px;

    /* Shadows */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.1);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg:  0 8px 24px rgba(0,0,0,0.12);

    /* Transitions */
    --transition: 0.2s ease;
}

/* ===== Reset ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-gray-700);
    background: var(--color-white);
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-blue-mid);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--color-crimson);
}

ul, ol {
    list-style: none;
}

/* ===== @font-face ===== */
@font-face {
    font-family: 'HandelGothic';
    src: url('../fonts/handel.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ===== Typography ===== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-brand);
    color: var(--color-navy);
    line-height: 1.2;
    font-weight: normal;
}

h1 { font-size: 2.75rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
    margin-bottom: 1rem;
}

p:last-child {
    margin-bottom: 0;
}

.text-center { text-align: center; }
.text-white  { color: var(--color-white); }
.text-navy   { color: var(--color-navy); }

/* ===== Layout ===== */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-sm);
}

.section {
    padding: var(--space-lg) 0;
}

.section--pale {
    background: var(--color-blue-pale);
}

.section--wash {
    background: var(--color-blue-wash);
}

.section--navy {
    background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-deep) 100%);
    color: var(--color-white);
}

.section--navy h2,
.section--navy h3 {
    color: var(--color-white);
}

.section--gradient {
    background: linear-gradient(160deg, #5C7DBD 0%, #00143D 100%);
    color: var(--color-white);
}

.section--gradient h1,
.section--gradient h2,
.section--gradient h3 {
    color: var(--color-white);
}

.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-lg);
}

.section-header p {
    color: var(--color-gray-600);
    font-size: 1.1rem;
    margin-top: var(--space-sm);
}

.section--navy .section-header p,
.section--gradient .section-header p {
    color: rgba(255,255,255,0.8);
}

/* ===== Grid ===== */
.grid {
    display: grid;
    gap: var(--space-md);
}

.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }

/* ===== Skip link ===== */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-sm);
    background: var(--color-navy);
    color: var(--color-white);
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
    z-index: 9999;
    font-weight: bold;
}

.skip-link:focus {
    top: var(--space-xs);
    color: var(--color-white);
}

/* ===== Utility ===== */
.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;
}