/* ==========================================================================
   AVP Digital Card – design tokens + shared components.
   Same visual language as avptechsolution.com. Loaded after the script's own
   CSS by resources/views/layouts/avp/head.blade.php.
   ========================================================================== */

:root {
    --avp-ink: #0F1A2E;
    --avp-ink-2: #3A455C;
    --avp-ink-3: #5E687D;
    --avp-ink-4: #8B93A5;
    --avp-paper: #FAF8F4;
    --avp-sand: #F4F0E8;
    --avp-sand-2: #ECE6DA;
    --avp-surface: #FFFFFF;
    --avp-line: #E8E2D6;
    --avp-line-strong: #D8CFBE;

    --avp-brand: #4338CA;
    --avp-brand-hover: #3730A3;
    --avp-brand-soft: #EEEDFB;
    --avp-brand-line: #D8D5F6;
    --avp-gold: #B8893B;
    --avp-gold-ink: #7F5A1A;
    --avp-gold-soft: #F8F0DE;
    --avp-gold-line: #E8D6AC;
    --avp-teal: #0F766E;
    --avp-teal-soft: #E2F2EF;
    --avp-success: #047857;
    --avp-success-soft: #E3F4EC;
    --avp-danger: #B4264A;
    --avp-danger-soft: #FCE8EC;

    /* Devanagari fallbacks so Hindi text renders cleanly next to Inter. */
    --avp-font-body: 'Inter', 'Noto Sans Devanagari', 'Nirmala UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --avp-font-display: 'DM Serif Display', 'Noto Serif Devanagari', 'Nirmala UI', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;

    --avp-radius-sm: 10px;
    --avp-radius-md: 14px;
    --avp-radius-lg: 20px;
    --avp-radius-xl: 28px;
    --avp-radius-full: 9999px;

    --avp-shadow-xs: 0 1px 2px rgba(15, 26, 46, .06);
    --avp-shadow-sm: 0 1px 2px rgba(15, 26, 46, .05), 0 4px 14px -4px rgba(15, 26, 46, .07);
    --avp-shadow-md: 0 2px 4px rgba(15, 26, 46, .04), 0 14px 32px -10px rgba(15, 26, 46, .14);
    --avp-shadow-lg: 0 4px 8px rgba(15, 26, 46, .04), 0 28px 56px -18px rgba(15, 26, 46, .22);
    --avp-shadow-btn: 0 1px 2px rgba(15, 26, 46, .25), 0 10px 22px -10px rgba(15, 26, 46, .55);
    --avp-shadow-brand: 0 14px 30px -12px rgba(67, 56, 202, .55);

    --avp-ease: cubic-bezier(.16, 1, .3, 1);
    --avp-section-y: clamp(4.5rem, 9vw, 7.5rem);
}

/* ---------- Typography helpers ---------- */
.avp-serif { font-family: var(--avp-font-display); font-weight: 400; letter-spacing: -.01em; color: var(--avp-ink); }
.avp-serif em, .avp-accent { font-style: italic; color: var(--avp-brand); }
.avp-eyebrow {
    display: inline-flex; align-items: center; gap: .75rem;
    font: 600 .72rem/1 var(--avp-font-body); letter-spacing: .14em; text-transform: uppercase;
    color: var(--avp-gold-ink);
}
.avp-eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--avp-gold); }
.avp-muted { color: var(--avp-ink-3); }

/* ---------- Buttons ---------- */
.avp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .85rem 1.6rem; border-radius: var(--avp-radius-full); border: 1px solid transparent;
    font: 600 .95rem/1.2 var(--avp-font-body); text-decoration: none; cursor: pointer;
    transition: transform .2s var(--avp-ease), box-shadow .2s var(--avp-ease), background-color .2s var(--avp-ease), color .2s;
}
.avp-btn:hover { transform: translateY(-1px); }
.avp-btn:focus-visible { outline: 3px solid var(--avp-brand-line); outline-offset: 2px; }
.avp-btn-ink { background: var(--avp-ink); color: #fff; box-shadow: var(--avp-shadow-btn); }
.avp-btn-ink:hover { background: #1b2a45; color: #fff; }
.avp-btn-brand { background: var(--avp-brand); color: #fff; box-shadow: var(--avp-shadow-brand); }
.avp-btn-brand:hover { background: var(--avp-brand-hover); color: #fff; }
.avp-btn-ghost { background: var(--avp-surface); color: var(--avp-ink); border-color: var(--avp-line); box-shadow: var(--avp-shadow-xs); }
.avp-btn-ghost:hover { border-color: var(--avp-line-strong); color: var(--avp-ink); }
.avp-btn-sm { padding: .55rem 1.1rem; font-size: .85rem; }

/* ---------- Cards, pills, badges ---------- */
.avp-card {
    background: var(--avp-surface); border: 1px solid var(--avp-line);
    border-radius: var(--avp-radius-xl); box-shadow: var(--avp-shadow-md);
}
.avp-card-glass { background: rgba(255, 255, 255, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.avp-pill {
    display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem;
    background: var(--avp-surface); border: 1px solid var(--avp-line); border-radius: var(--avp-radius-full);
    font: 500 .85rem/1.2 var(--avp-font-body); color: var(--avp-ink); box-shadow: var(--avp-shadow-xs);
}
.avp-badge {
    display: inline-flex; align-items: center; padding: .3rem .75rem; border-radius: var(--avp-radius-full);
    font: 600 .75rem/1.2 var(--avp-font-body); background: var(--avp-brand-soft); color: var(--avp-brand);
}
.avp-badge-success { background: var(--avp-success-soft); color: var(--avp-success); }
.avp-badge-gold { background: var(--avp-gold-soft); color: var(--avp-gold-ink); }
.avp-icon-tile {
    display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--avp-radius-md);
    background: var(--avp-brand-soft); color: var(--avp-brand); border: 1px solid var(--avp-brand-line);
}
.avp-icon-tile.gold { background: var(--avp-gold-soft); color: var(--avp-gold-ink); border-color: var(--avp-gold-line); }
.avp-icon-tile.teal { background: var(--avp-teal-soft); color: var(--avp-teal); border-color: #BFE0DA; }

/* ---------- Text logo (same as the main site) ---------- */
.avp-logo {
    display: inline-flex; align-items: center; gap: .7rem; text-decoration: none;
    font: 400 1.45rem/1 var(--avp-font-display); letter-spacing: -.01em; color: var(--avp-ink); white-space: nowrap;
}
.avp-logo img { width: 36px; height: 36px; border-radius: 11px; }
.avp-logo-dot { display: inline-block; width: 6px; height: 6px; margin-left: -.35rem; border-radius: 50%; background: var(--avp-gold); }
.avp-logo:hover { color: var(--avp-ink); }

/* ---------- Dotted paper background (hero) ---------- */
.avp-dots {
    background-color: var(--avp-paper);
    background-image: radial-gradient(rgba(15, 26, 46, .07) 1px, transparent 1px);
    background-size: 26px 26px;
}

@media (prefers-reduced-motion: reduce) {
    .avp-btn, .avp-btn:hover { transition: none; transform: none; }
}