/* ==========================================================================
   Pax Family — Shared design tokens + base
   Loaded first on every /new/ marketing page. Page-specific CSS files
   layer on top of this.

   What lives here:
     • :root design tokens (colors, type, radii, shadows)
     • Universal reset + body base
     • .page wrapper (max-width 1440, centered)
     • .btn-3d signature Pax button (used across pages)

   What does NOT live here:
     • Page-scoped styles → put in <page>.css under the page's class
       prefix (.v3, .su, etc.)
     • Page-frame background overrides → page-specific files set
       .page.<modifier> { background: ...; }
   ========================================================================== */

:root {
    /* ===== BRAND ===== */
    --pax-primary:         #095FA1;
    --pax-primary-dark:    #074d84;
    --pax-primary-bright:  #0d7cc4;
    --pax-primary-tint:    #dce8f2;
    --pax-primary-focus:   rgba(9, 95, 161, 0.10);

    --pax-cta:             #66A367;
    --pax-cta-dark:        #578d58;
    --pax-cta-deep:        #4a8a4b;

    --pax-accent-amber:    #f59e0b;
    --pax-accent-purple:   #8b5cf6;

    /* ===== NEUTRALS ===== */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --white: #ffffff;

    /* ===== SEMANTIC ===== */
    --success:        #22c55e;
    --success-dark:   #16a34a;
    --danger:         #dc2626;
    --warning:        #f59e0b;
    --info:           #3b82f6;

    /* ===== BRAND GRADIENT ===== */
    --grad-brand: linear-gradient(135deg, #095FA1 0%, #0d7cc4 100%);

    /* ===== FG / BG TOKENS ===== */
    --fg1: var(--slate-800);
    --fg2: var(--slate-500);
    --fg3: var(--slate-400);
    --fg-on-brand: var(--white);
    --bg1: var(--slate-50);
    --bg2: var(--white);
    --bg3: var(--slate-100);
    --border: var(--slate-200);
    --border-strong: var(--slate-300);

    /* ===== TYPOGRAPHY =====
       Inter via Google Fonts (substitute for self-hosted Inter Display 28pt).
       At display sizes 40-72px the visual difference vs. true 28pt optical
       size is minor. Swap to self-hosted later for pixel fidelity. */
    --font-system:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Inter', var(--font-system);
    --font-body:    'Inter', var(--font-system);

    /* ===== RADII ===== */
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-2xl: 20px;
    --r-pill: 999px;

    /* ===== SHADOWS ===== */
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.10);
    --shadow-md:  0 2px 6px rgba(0,0,0,0.08);
    --shadow-lg:  0 8px 30px rgba(0,0,0,0.15);
    --shadow-xl:  0 20px 60px rgba(0,0,0,0.20);
    --shadow-3d-rest:   0 4px 0 var(--pax-cta-deep), 0 6px 12px rgba(0,0,0,0.15);
    --shadow-3d-hover:  0 2px 0 var(--pax-cta-deep), 0 3px 8px rgba(0,0,0,0.12);

    /* ===== PAGE GUTTER =====
       Side padding for full-bleed sections. At/below 1440px viewport this is
       a flat 56px. Above 1440, it grows so that the inner content area stays
       capped at ~1440px and centered within the viewport. Sections fill the
       viewport edge-to-edge (full-bleed colored bands), but their content
       never sprawls on ultra-wide monitors. */
    --page-gutter: max(56px, calc((100% - 1440px) / 2 + 56px));
}

/* ===== RESET + BASE ===== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--fg1);
    /* Warm cream fallback — .page now fills the viewport so this almost
       never shows, but it stays as a safety net (and matches the design
       palette if anything renders before the page CSS loads). */
    background: #FBF5EA;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: var(--pax-primary); }

/* ===== PAGE FRAME =====
   Full-viewport canvas. Each page sets its own bg via a modifier class on
   .page (e.g. .page.v3, .page.su). Sections inside fill the viewport
   edge-to-edge using --page-gutter for side padding, which grows on wide
   monitors to keep content centered within ~1440px max width. */
.page {
    font-family: var(--font-body);
    color: var(--fg1);
}

/* ===== 3D SIGNATURE BUTTON =====
   "The Pax button" per the design system README — a colored hard ledge
   underneath, button moves top: 0 → 2px → 4px on hover/press, compressing
   the ledge. Tactile and slightly toylike, intentionally. */
.btn-3d {
    display: inline-block;
    background: var(--pax-cta);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    padding: 12px 24px;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: var(--shadow-3d-rest);
    position: relative;
    top: 0;
    transition: top 0.15s, box-shadow 0.15s;
}
.btn-3d:hover {
    top: 2px;
    box-shadow: var(--shadow-3d-hover);
    color: #fff;
}
.btn-3d:active {
    top: 4px;
    box-shadow: 0 0 0 var(--pax-cta-deep), 0 1px 4px rgba(0,0,0,0.10);
}
.btn-3d.sm {
    padding: 10px 18px;
    font-size: 14px;
    box-shadow: 0 3px 0 var(--pax-cta-deep), 0 4px 10px rgba(0,0,0,.12);
}
.btn-3d.sm:hover {
    top: 1px;
    box-shadow: 0 2px 0 var(--pax-cta-deep), 0 3px 8px rgba(0,0,0,.10);
}

/* ===== TOP NAV (shared chrome — full-link nav variant) =====
   Pages that need a different nav (e.g. signup uses .topnav-min) should
   define their own variant in their page CSS. */
.topnav { display: flex; align-items: center; padding: 22px var(--page-gutter); }
.topnav .brand {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-weight: 700; font-size: 17px;
    color: var(--fg1); letter-spacing: -0.01em; text-decoration: none;
}
.topnav .brand img { width: 32px; height: 32px; border-radius: 8px; }
.topnav .links { margin-left: 56px; display: flex; gap: 28px; flex: 1; }
.topnav .links a {
    font-size: 14px; font-weight: 500; color: var(--slate-600);
    text-decoration: none; transition: color 0.15s;
}
.topnav .links a:hover { color: var(--pax-primary); }
.topnav .links a.active { color: var(--pax-primary); font-weight: 700; }
.topnav .signin {
    font-size: 14px; font-weight: 600; color: var(--pax-primary);
    text-decoration: none; margin-right: 16px;
}

/* ===== FOOTER (shared chrome — default white bg) =====
   Pages can override the bg by adding their own page modifier class
   alongside .footer (e.g. .v3-footer { background: #FBF5EA; }). */
.footer { border-top: 1px solid #e2e8f0; padding: 48px var(--page-gutter) 32px; background: #fff; }
.footer .row { display: flex; justify-content: space-between; gap: 40px; }
.footer .brand-col { max-width: 320px; }
.footer .brand-col p { font-size: 13px; color: var(--fg2); line-height: 1.55; margin-top: 10px; }
.footer .col h5 {
    font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--fg1); margin: 0 0 12px;
}
.footer .col a {
    display: block; font-size: 14px; color: var(--fg2);
    text-decoration: none; padding: 4px 0;
    transition: color 0.15s;
}
.footer .col a:hover { color: var(--pax-primary); }
.footer .copyright {
    font-size: 12px; color: var(--slate-400); margin-top: 36px;
    padding-top: 20px; border-top: 1px solid #f1f5f9;
}

/* Mobile baseline for nav (collapses links on phones) */
@media (max-width: 700px) {
    .topnav { padding: 18px 24px; flex-wrap: wrap; gap: 12px; }
    .topnav .links { display: none; }
    .footer .row { flex-direction: column; }
}