/**
 * GOP Theme — Official Republican Party Color System
 * Loaded before styles.css and credentials.css on all pages
 */

@import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;500;600;700;800&display=swap');

:root {
    /* === PRIMARY COLORS === */
    --gop-red:            #E81B23;
    --gop-red-dark:       #BF1118;
    --gop-red-darkest:    #8B0D12;
    --gop-red-light:      #FDE8E9;

    --gop-navy:           #002868;
    --gop-navy-dark:      #001F4E;
    --gop-navy-light:     #003B8E;
    --gop-blue-tint:      #E8EFF8;

    --gop-white:          #FFFFFF;
    --gop-offwhite:       #F5F5F5;

    /* === GOLD ACCENT === */
    --gold:               #C5A04E;
    --gold-light:         #D4B76A;
    --gold-dark:          #A68635;

    /* === NEUTRAL GRAYS === */
    --gray-50:            #FAFAFA;
    --gray-100:           #F5F5F5;
    --gray-200:           #E5E5E5;
    --gray-300:           #D4D4D4;
    --gray-400:           #A3A3A3;
    --gray-500:           #737373;
    --gray-600:           #525252;
    --gray-700:           #404040;
    --gray-800:           #262626;
    --gray-900:           #171717;

    /* === SEMANTIC COLORS === */
    --success:            #16A34A;
    --success-light:      #DCFCE7;
    --success-dark:       #15803D;

    --warning:            #D97706;
    --warning-light:      #FEF3C7;
    --warning-dark:       #92400E;

    --danger:             #DC2626;
    --danger-dark:        #B91C1C;
    --danger-light:       #FEE2E2;

    /* === TYPOGRAPHY SCALE === */
    --font-size-sm:       0.95rem;   /* 15.2px — minimum for any visible text */
    --font-size-base:     1rem;      /* 16px — body text */
    --font-size-lg:       1.15rem;   /* 18.4px — buttons, inputs, nav links */
    --font-size-xl:       1.5rem;    /* 24px — section headings */
    --font-size-2xl:      2rem;      /* 32px — page titles, check-in person name */

    /* === SHADOWS === */
    --shadow-sm:          0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md:          0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg:          0 10px 25px rgba(0, 0, 0, 0.15);
    --shadow-xl:          0 20px 50px rgba(0, 0, 0, 0.2);

    /* === FOCUS === */
    --focus-ring:         0 0 0 4px rgba(0, 40, 104, 0.4);
}

/* Patriotic accent stripe — fixed at top of viewport */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(to right, var(--gop-red) 33%, var(--gop-white) 33%, var(--gop-white) 66%, var(--gop-navy) 66%);
    z-index: 10001;
}

/* Typography base */
body {
    font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.5;
}

/* Focus — thick visible ring for keyboard users */
:focus-visible {
    outline: 4px solid var(--gop-navy);
    outline-offset: 2px;
    box-shadow: var(--focus-ring);
}

/* Screen-reader only 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;
}

/* Skip link — visible only on focus */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--gop-navy);
    color: white;
    padding: 12px 24px;
    z-index: 10002;
    font-size: var(--font-size-lg);
    font-weight: 600;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* Card component — used across credentials templates but previously undefined */
.card {
    background: var(--gop-white);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--gray-200);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}

.card:hover {
    box-shadow: var(--shadow-lg);
}