/* ═══════════════════════════════════════════════════
   kpp-tokens.css
   Design tokens, CSS variables, resets, shared
   animations — loaded on EVERY KPP page
═══════════════════════════════════════════════════ */

/* ── Variables ── */
:root {
    --navy:        #0A1628;
    --navy-mid:    #142040;
    --navy-light:  #1C3060;
    --navy-deep:   #060E1A;
    --red:         #BE1E2D;
    --red-dark:    #8E0F1B;
    --red-light:   #D4212F;
    --gold:        #C9A236;
    --gold-light:  #E2BC5A;
    --white:       #FFFFFF;
    --offwhite:    #F2F4F8;
    --border:      #D8DCE8;
    --text:        #1A1E2E;
    --muted:       #5A6382;
    --green:       #1B7A40;
    --blue:        #1D4ED8;
    --radius:      3px;
    --radius-lg:   8px;
}

/* ── Reset ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html { scroll-behavior: smooth; }
body {
    font-family: 'Barlow', sans-serif;
    background: var(--white);
    color: var(--text);
    overflow-x: hidden;
}

/* ── Shared Animations ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideRight {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(190,30,45,0.35); }
    70%  { box-shadow: 0 0 0 14px rgba(190,30,45,0); }
    100% { box-shadow: 0 0 0 0 rgba(190,30,45,0); }
}
@keyframes ticker {
    0%   { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}
@keyframes slideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}