/**
 * Snaplot brand tokens — single source of truth for colour, type, radius, shadow.
 * Enqueued on every page that has an snaplot shortcode (settings, catalogue,
 * catalogue-view, export, my-account, account, topup).
 */
:root {
    /* Primary brand CTA — historically named "brown" but swapped to deep blue
       2026-05-03 to harmonise with the existing --snap-blue accent. The token
       name is preserved to avoid touching every consumer file. */
    --snap-brown:        #1E5F7A;
    --snap-brown-hover:  #154B61;
    --snap-blue:         #5FA5C2;     /* the existing main-nav background */
    --snap-text:         #2C363D;
    --snap-text-muted:   #6B7280;
    --snap-text-dim:     #94A3B8;
    --snap-bg:           #F5F7FA;
    --snap-card:         #FFFFFF;
    --snap-border:       #E5E7EB;
    --snap-border-hover: #CBD5E1;
    --snap-focus:        rgba(30, 95, 122, 0.18);
    --snap-success:      #16A34A;
    --snap-success-bg:   #DCFCE7;
    --snap-warn:         #D97706;
    --snap-warn-bg:      #FEF3C7;
    --snap-danger:       #DC2626;
    --snap-danger-bg:    #FEE2E2;
    --snap-info:         #38BDF8;
    --snap-info-bg:      #DBEAFE;

    --snap-radius-sm:    6px;     /* inputs */
    --snap-radius-md:    10px;    /* small buttons / tags */
    --snap-radius-lg:    16px;    /* cards */
    --snap-radius-pill:  100px;   /* CTA buttons */

    --snap-shadow-card:  0 14px 40px rgba(15, 23, 42, 0.08);
    --snap-shadow-soft:  0 2px 8px rgba(15, 23, 42, 0.04);

    --snap-font:         'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Shared trial-app shell styling (used by page-catalogue/view/export/my-account). */
.snap-app-main {
    background: var(--snap-bg);
    min-height: calc(100vh - 220px);
    padding: 1px 0;
    font-family: var(--snap-font);
    color: var(--snap-text);
}
.snap-app-page-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 32px 16px 64px;
}
@media (max-width: 640px) {
    .snap-app-page-wrap { padding: 16px 12px 80px; }
}

/* Shared placeholder while a JS bundle mounts on its root */
.snap-app-root {
    padding: 18px 20px;
    border: 1px dashed var(--snap-border-hover);
    border-radius: var(--snap-radius-md);
    color: var(--snap-text-muted);
    background: var(--snap-card);
}