/**
 * ═══════════════════════════════════════════════════════════
 * INFINI SUITE™ — Shared Design System v1.0
 * ═══════════════════════════════════════════════════════════
 * 
 * SHARED across: InfiniDISC, InfiniFlow, InfiniForce, InfiniPulse
 * Each plugin imports this + its own product CSS.
 * 
 * To use: each plugin enqueues this FIRST, then its own public.css
 * 
 * Products:
 *   🔵 InfiniDISC  → --infini-disc  (#3B82F6)
 *   🟠 InfiniFlow   → --infini-flow  (#E85D04)
 *   🟢 InfiniForce  → --infini-force (#10B981)
 *   💎 InfiniPulse  → --infini-pulse (#7C3AED)
 * 
 * Site: CSS Consult → forest/cream palette
 */

/* ═══ TOKENS ═══ */
:root {
    /* ── Product Colors ── */
    --infini-disc: #3B82F6;
    --infini-disc-dark: #1D4ED8;
    --infini-disc-soft: #EFF6FF;
    --infini-disc-glow: rgba(59, 130, 246, 0.15);

    --infini-flow: #E85D04;
    --infini-flow-dark: #C2410C;
    --infini-flow-soft: #FFF7ED;
    --infini-flow-glow: rgba(232, 93, 4, 0.15);

    --infini-force: #10B981;
    --infini-force-dark: #059669;
    --infini-force-soft: #F0FDF4;
    --infini-force-glow: rgba(16, 185, 129, 0.15);

    --infini-pulse: #7C3AED;
    --infini-pulse-dark: #4C1D95;
    --infini-pulse-soft: #F5F3FF;
    --infini-pulse-glow: rgba(124, 58, 237, 0.15);

    /* ── DISC Dimensions ── */
    --d: #EF4444; --d-bg: #FEF2F2; --d-border: rgba(239,68,68,.25);
    --i: #EAB308; --i-bg: #FEFCE8; --i-border: rgba(234,179,8,.25);
    --s: #22C55E; --s-bg: #F0FDF4; --s-border: rgba(34,197,94,.25);
    --c: #3B82F6; --c-bg: #EFF6FF; --c-border: rgba(59,130,246,.25);

    /* ── Dark Theme (Heroes) ── */
    --hero-start: #0F172A;
    --hero-mid: #1E293B;
    --hero-end: #334155;

    /* ── Neutrals ── */
    --dark: #0F172A;
    --slate: #1E293B;
    --slate-mid: #334155;
    --muted: #64748B;
    --light: #F1F5F9;
    --lighter: #F8FAFC;
    --cream: #FDFBF7;
    --warm-bg: #F8FAFC;
    --card: #FFFFFF;
    --text: #0F172A;
    --text-mid: #475569;
    --text-light: #94A3B8;

    /* ── CSS Consult Brand ── */
    --forest: #1B4332;
    --green: #2D6A4F;
    --green-mid: #40916C;
    --sage: #95D5B2;
    --foam: #D8F3DC;
    --gold: #C8956C;

    /* ── Semantic ── */
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;

    /* ── Spacing ── */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ── Shadows ── */
    --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
    --shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,.06);
    --shadow-lg: 0 12px 40px rgba(0,0,0,.08);
    --shadow-xl: 0 24px 64px rgba(0,0,0,.12);

    /* ── Fonts ── */
    --font-display: 'Outfit', -apple-system, sans-serif;
    --font-body: 'Plus Jakarta Sans', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}

/* ═══ SHARED HERO ═══ */
.infini-hero {
    background: linear-gradient(135deg, var(--hero-start) 0%, var(--hero-mid) 50%, var(--hero-end) 100%);
    color: #fff;
    padding: 48px 32px 56px;
    border-radius: var(--radius-xl);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.infini-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, var(--hero-glow, rgba(255,255,255,.06)) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.infini-hero .suite-badge {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,.25);
    font-family: var(--font-mono);
}

.infini-hero h2 {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 8px;
    position: relative;
}

.infini-hero p {
    color: rgba(255,255,255,.6);
    font-size: 15px;
    max-width: 440px;
    margin: 0 auto 24px;
    position: relative;
}

/* ═══ SHARED CARD ═══ */
.infini-card {
    background: var(--card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(0,0,0,.04);
    overflow: hidden;
}

/* ═══ SHARED INPUTS ═══ */
.infini-input {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255,255,255,.07);
    border: 2px solid rgba(255,255,255,.12);
    border-radius: var(--radius-md);
    color: #fff;
    font-family: var(--font-body);
    font-size: 15px;
    transition: all .25s ease;
    backdrop-filter: blur(4px);
}

.infini-input::placeholder { color: rgba(255,255,255,.35); }

.infini-input:focus {
    outline: none;
    border-color: var(--accent, var(--infini-disc));
    background: rgba(255,255,255,.1);
    box-shadow: 0 0 0 4px var(--accent-glow, rgba(59,130,246,.15));
}

/* Light mode variant */
.infini-input--light {
    background: var(--lighter);
    border-color: var(--light);
    color: var(--text);
}

.infini-input--light::placeholder { color: var(--text-light); }

.infini-input--light:focus {
    background: var(--card);
    border-color: var(--accent, var(--infini-disc));
}

/* ═══ SHARED BUTTONS ═══ */
.infini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
}

.infini-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 50%);
    opacity: 0;
    transition: opacity .25s;
}

.infini-btn:hover::after { opacity: 1; }
.infini-btn:hover { transform: translateY(-1px); }
.infini-btn:active { transform: translateY(0); }

/* Primary: uses --accent (set by each product) */
.infini-btn--primary {
    background: var(--accent, var(--infini-disc));
    color: #fff;
    box-shadow: 0 4px 16px var(--accent-glow, rgba(59,130,246,.3));
}

.infini-btn--primary:hover {
    box-shadow: 0 8px 24px var(--accent-glow, rgba(59,130,246,.4));
}

/* Secondary: ghost */
.infini-btn--secondary {
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.8);
    border: 2px solid rgba(255,255,255,.15);
}

.infini-btn--secondary:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.25);
}

/* Light mode secondary */
.infini-btn--outline {
    background: var(--card);
    color: var(--accent, var(--infini-disc));
    border: 2px solid var(--accent, var(--infini-disc));
}

.infini-btn--outline:hover {
    background: var(--accent-soft, var(--infini-disc-soft));
}

/* ═══ SHARED PROGRESS BAR ═══ */
.infini-progress {
    height: 6px;
    background: var(--light);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.infini-progress__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent, var(--infini-disc)), var(--accent-dark, var(--infini-disc-dark)));
    border-radius: var(--radius-full);
    transition: width .4s cubic-bezier(.4, 0, .2, 1);
    position: relative;
}

.infini-progress__fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.4));
    animation: infini-shimmer 1.5s infinite;
}

/* ═══ SHARED BADGE ═══ */
.infini-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

.infini-badge--disc { background: var(--infini-disc-soft); color: var(--infini-disc); }
.infini-badge--flow { background: var(--infini-flow-soft); color: var(--infini-flow); }
.infini-badge--force { background: var(--infini-force-soft); color: var(--infini-force); }
.infini-badge--pulse { background: var(--infini-pulse-soft); color: var(--infini-pulse); }

/* ═══ SHARED KPI CARD ═══ */
.infini-kpi {
    text-align: center;
    padding: 20px 16px;
    background: var(--card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--light);
}

.infini-kpi__value {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    color: var(--text);
}

.infini-kpi__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    margin-top: 6px;
}

.infini-kpi__sub {
    font-size: 10px;
    color: var(--text-light);
    margin-top: 2px;
}

/* ═══ SHARED SPINNER ═══ */
.infini-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--light);
    border-top-color: var(--accent, var(--infini-disc));
    border-radius: 50%;
    animation: infini-spin 0.8s linear infinite;
}

/* ═══ SHARED NOTICE ═══ */
.infini-notice {
    padding: 16px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
}

.infini-notice--info { background: var(--infini-disc-soft); color: var(--infini-disc-dark); border-left: 4px solid var(--infini-disc); }
.infini-notice--success { background: var(--infini-force-soft); color: var(--infini-force-dark); border-left: 4px solid var(--infini-force); }
.infini-notice--warning { background: var(--infini-flow-soft); color: var(--infini-flow-dark); border-left: 4px solid var(--infini-flow); }
.infini-notice--error { background: #FEF2F2; color: #991B1B; border-left: 4px solid var(--danger); }

/* ═══ SHARED TOOLTIP ═══ */
[data-infini-tip] {
    position: relative;
    cursor: help;
}

[data-infini-tip]:hover::after {
    content: attr(data-infini-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 12px;
    background: var(--dark);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    animation: infini-fadeIn .15s ease;
}

/* ═══ ANIMATIONS ═══ */
@keyframes infini-fadeIn {
    from { opacity: 0; transform: translateY(8px) translateX(-50%); }
    to { opacity: 1; transform: translateY(0) translateX(-50%); }
}

@keyframes infini-slideUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes infini-spin {
    to { transform: rotate(360deg); }
}

@keyframes infini-shimmer {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

@keyframes infini-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}

/* ═══ RESPONSIVE SHARED ═══ */
@media (max-width: 640px) {
    .infini-hero { padding: 32px 20px 40px; }
    .infini-hero h2 { font-size: 24px; }
    .infini-kpi__value { font-size: 28px; }
}

/* ═══ PRINT ═══ */
@media print {
    .infini-hero {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    .infini-btn { display: none; }
}