/* America777 theme tokens. US flag palette from the design export (a7-theme). */
:root {
    --a7-navy-deep: #030B1F;
    --a7-bg: #04112E;
    --a7-navy: #08193F;
    --a7-surface: #0C2352;
    --a7-surface-2: #123067;
    --a7-line: #2A4A86;
    --a7-flag-blue: #0A3161;
    --a7-flag-blue-2: #002868;
    --a7-red: #D80000;
    --a7-red-2: #BF0A30;
    --a7-red-hi: #D0213F;
    --a7-red-deep: #7A0F2B;
    --a7-red-text: #D80000;
    --a7-red-rgb: 216, 0, 0;
    --a7-white: #FFFFFF;
    --a7-text: #FFFFFF;
    --a7-text-2: #DCE3F1;
    --a7-muted: #A8B6D4;
    --a7-muted-2: #8B9BC0;
    --a7-on-accent: #FFFFFF;
    --a7-gold-trim: #D4AF37;
    --a7-font-display: "Archivo", system-ui, sans-serif;
    --a7-font-body: "Archivo", system-ui, sans-serif;
    --a7-font-mono: "IBM Plex Mono", ui-monospace, monospace;

    /* Shell pages (catalog, account) read the c7 names. Same palette. */
    --c7-bg: var(--a7-bg);
    --c7-surface-1: var(--a7-navy);
    --c7-surface-2: var(--a7-surface);
    --c7-surface-3: var(--a7-navy-deep);
    --c7-input: var(--a7-navy-deep);
    --c7-chip: var(--a7-surface-2);
    --c7-modal: var(--a7-navy);
    --c7-primary: var(--a7-red);
    --c7-primary-hover: var(--a7-red-hi);
    --c7-primary-deep: var(--a7-red-deep);
    --c7-accent: var(--a7-red-hi);
    --c7-red: var(--a7-red);
    --c7-red-text: var(--a7-red-text);
    --c7-gold: var(--a7-gold-trim);
    --c7-gold-hover: #e3c35a;
    --c7-gold-dark: #8a7020;
    --c7-on-gold: var(--a7-navy-deep);
    --c7-text: var(--a7-text);
    --c7-text-2: var(--a7-text-2);
    --c7-text-muted: var(--a7-muted);
    --c7-text-faint: var(--a7-muted-2);
    --c7-success: #3ddc84;
    --c7-badge-new: #2f6b4a;
    --c7-line: rgba(42, 74, 134, 0.9);
    --c7-line-soft: rgba(42, 74, 134, 0.45);
    --c7-line-strong: var(--a7-line);
    --c7-font-display: var(--a7-font-display);
    --c7-font-body: var(--a7-font-body);
    --c7-r-sm: 10px;
    --c7-r-md: 12px;
    --c7-r-tile: 16px;
    --c7-r-card: 20px;
    --c7-r-panel: 24px;
    --c7-r-pill: 999px;
    --c7-control: 44px;
    --c7-header: 68px;
    --c7-sidebar: 248px;
    --c7-glow: 0 12px 30px rgba(216, 0, 0, 0.45);
    --c7-glow-sm: 0 6px 20px rgba(216, 0, 0, 0.45);
    --c7-shadow-pop: 0 24px 60px rgba(0, 0, 0, 0.6);
    --c7-shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.7);
    --c7-gap: 16px;
    --c7-section: 56px;
    --c7-bottom-nav: 68px;
}

@media (max-width: 899.98px) {
    :root {
        --c7-section: 40px;
    }
}