/* FlyerCheck Brand Guide v2 — June 2026 */
:root {
    --fc-near-black: #0A0A0A;
    --fc-surface: #121210;
    --fc-hazard: #F2C200;
    --fc-hazard-glow: rgba(242, 194, 0, 0.25);
    --fc-hazard-glow-strong: rgba(242, 194, 0, 0.35);
    --fc-off-white: #FAFAF7;
    --fc-muted: #9C9C96;
    --fc-border: #3A3A36;
    --fc-confirm: #3D8B5F;

    --fc-font-serif: 'GFS Didot', 'Didot', 'Bodoni MT', serif;
    --fc-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --fc-text-h1: 32px;
    --fc-text-h1-mobile: 28px;
    --fc-text-h2: 20px;
    --fc-text-h3: 16px;
    --fc-text-body: 14px;

    --fc-text-ui: 13px;
    --fc-text-fine: 11px;
    --fc-text-wordmark: 22px;

    /* Legacy token aliases for gradual migration */
    --brand-primary: var(--fc-off-white);
    --brand-accent: var(--fc-muted);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
}

body {
    font-family: var(--fc-font-sans);
    font-size: var(--fc-text-body);
    color: var(--fc-muted);
    line-height: 1.6;
    background-color: var(--fc-near-black);
    margin: 0;
}

h1 {
    font-family: var(--fc-font-serif);
    font-size: var(--fc-text-h1);
    font-weight: 400;
    color: var(--fc-off-white);
    line-height: 1.2;
}

h2 {
    font-family: var(--fc-font-sans);
    font-size: var(--fc-text-h2);
    font-weight: 500;
    color: var(--fc-off-white);
    line-height: 1.3;
}

h3,
h4 {
    font-family: var(--fc-font-sans);
    font-size: var(--fc-text-h3);
    font-weight: 500;
    color: var(--fc-off-white);
    line-height: 1.35;
}

h5,
h6 {
    font-family: var(--fc-font-sans);
    font-size: var(--fc-text-body);
    font-weight: 500;
    color: var(--fc-off-white);
    line-height: 1.4;
}

a {
    color: var(--fc-off-white);
}

a:hover {
    color: var(--fc-off-white);
    opacity: 0.85;
}

.hero-accent,
.text-hazard {
    color: var(--fc-hazard);
}

.btn {
    min-width: 120px;
    min-height: 40px;
    padding: 12px 16px;
    border-radius: 6px;
    font-weight: 500;
    font-size: var(--fc-text-ui);
    font-family: var(--fc-font-sans);
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary,
.cta-button-primary,
.analyze-button,
.product-card-cta,
.contact-submit-btn,
.contact-form .submit-button,
.contact-form button[type="submit"],
.blog-top-cta-button {
    background: var(--fc-off-white);
    background-image: none;
    color: var(--fc-near-black);
    border: 1.5px solid var(--fc-hazard);
    box-shadow: 0 0 14px var(--fc-hazard-glow);
}

.btn-primary:hover,
.cta-button-primary:hover,
.analyze-button:hover:not(:disabled),
.product-card-cta:hover,
.contact-submit-btn:hover,
.contact-form button[type="submit"]:hover,
.blog-top-cta-button:hover {
    background: var(--fc-off-white);
    background-image: none;
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 0 18px var(--fc-hazard-glow-strong);
}

.cta-button-secondary {
    background-color: transparent;
    color: var(--fc-off-white);
    border: 1px solid var(--fc-border);
    padding: 12px 16px;
    border-radius: 6px;
    font-weight: 500;
    font-size: var(--fc-text-ui);
    font-family: var(--fc-font-sans);
    text-decoration: none;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

.cta-button-secondary:hover {
    border-color: var(--fc-muted);
    opacity: 0.9;
}