/* ==========================================================================
   VERTEX — Clean SaaS & Enterprise personality core
   See: vertex-theme-design-plan.md for the full design rationale.
   ========================================================================== */

.eaa-vertex {
    --wp--preset--color--primary:        #2451D9; /* Signal Blue */
    --wp--preset--color--primary-hover:  #1B3FAE; /* Signal Blue Deep */
    --wp--preset--color--background:     #FAFBFC; /* Cloud White */
    --wp--preset--color--surface:        #F3F5F8; /* Mist Grey */
    --wp--preset--color--border:         #E4E7EC; /* Hairline Grey */
    --wp--preset--color--contrast:       #14171C; /* Graphite Ink */
    --wp--preset--color--muted:          #5C636F; /* Slate Grey */
    --wp--preset--color--success:        #0C7E48; /* Growth Green */
    --wp--preset--color--error:          #D6342C; /* Alert Red */

    --vx-radius-card: 8px;
    --vx-radius-hero: 14px;
    --vx-shadow-soft: 0 1px 2px rgba(20,23,28,0.04), 0 4px 12px rgba(20,23,28,0.06);
    --vx-shadow-deep: 0 2px 6px rgba(20,23,28,0.06), 0 8px 24px rgba(20,23,28,0.10);
    --vx-ease: cubic-bezier(0.16,1,0.3,1);
    --vx-dot-grid: radial-gradient(circle, rgba(20,23,28,0.06) 1px, transparent 1px);

    background-color: var(--wp--preset--color--background);
    color: var(--wp--preset--color--contrast);
    font-family: 'Inter', system-ui, sans-serif;
}

.eaa-vertex h1, .eaa-vertex h2, .eaa-vertex h3, .eaa-vertex h4 {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--wp--preset--color--contrast);
}

.eaa-vertex p {
    color: var(--wp--preset--color--muted);
    line-height: 1.6;
}

.eaa-vertex .vx-tabular { font-variant-numeric: tabular-nums; }

.vx-sr-only {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

.vx-tile-link { position: absolute; inset: 0; z-index: 10; text-decoration: none; }

.vx-card {
    background: var(--wp--preset--color--surface);
    border: 1px solid var(--wp--preset--color--border);
    border-radius: var(--vx-radius-card);
    box-shadow: var(--vx-shadow-soft);
    transition: all 0.18s var(--vx-ease);
}

.vx-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--vx-shadow-deep);
}