/**
 * AMPP Design Tokens
 * Shared CSS custom properties for all AMPP plugins.
 * Canonical values drawn from the mentorship (Material Design) system.
 */

:root {
    /* Primary */
    --ampp-primary: #2196f3;
    --ampp-primary-dark: #1976d2;
    --ampp-primary-light: #e3f2fd;

    /* Gradient */
    --ampp-gradient: linear-gradient(135deg, rgb(49,71,148) 0%, rgb(6,147,227) 99%);
    --ampp-gradient-start: rgb(49,71,148);
    --ampp-gradient-end: rgb(6,147,227);

    /* Text */
    --ampp-text: #2c3e50;
    --ampp-text-secondary: #666;
    --ampp-text-muted: #999;
    --ampp-text-accent: #1f7fd8;

    /* Backgrounds */
    --ampp-bg: #fff;
    --ampp-bg-light: #f8f9fa;
    --ampp-bg-subtle: #f8fafc;

    /* Borders */
    --ampp-border: #e0e0e0;
    --ampp-border-light: #f0f0f0;

    /* Status */
    --ampp-success: #10b981;
    --ampp-success-dark: #059669;
    --ampp-error: #ef4444;
    --ampp-error-dark: #dc2626;
    --ampp-warning: #f59e0b;

    /* Radii */
    --ampp-radius-card: 12px;
    --ampp-radius-section: 8px;
    --ampp-radius-button: 6px;
    --ampp-radius-badge: 4px;
    --ampp-radius-pill: 20px;

    /* Shadows */
    --ampp-shadow: 0 2px 8px rgba(0,0,0,0.1);
    --ampp-shadow-card-hover: 0 4px 12px rgba(33,150,243,.18);
    --ampp-shadow-modal: 0 25px 50px -12px rgba(0,0,0,0.25);

    /* Motion */
    --ampp-transition: 0.2s ease;

    /* Typography */
    --ampp-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ==========================================================================
   PRO GATE — Shared upgrade/login prompt (matches application-success pattern)
   ========================================================================== */

.ampp-pro-gate {
    max-width: 800px;
    margin: 40px auto;
    box-sizing: border-box;
    text-align: center;
    padding: 60px 40px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #e0e0e0;
    font-family: var(--ampp-font);
}

.ampp-pro-gate *,
.ampp-pro-gate *::before,
.ampp-pro-gate *::after {
    box-sizing: border-box;
}

.ampp-pro-gate .ampp-pro-gate-icon {
    margin-bottom: 24px;
}

.ampp-pro-gate h2 {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}

.ampp-pro-gate .ampp-pro-gate-message {
    margin: 0 0 24px;
    font-size: 16px;
    color: #475569;
    line-height: 1.5;
}

.ampp-pro-gate .ampp-pro-gate-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: var(--ampp-primary);
    border: none;
    border-radius: var(--ampp-radius-button, 6px);
    text-decoration: none;
    transition: background var(--ampp-transition);
    cursor: pointer;
}

.ampp-pro-gate .ampp-pro-gate-cta:hover {
    background: var(--ampp-primary-dark);
    color: #fff;
    text-decoration: none;
}

@media (max-width: 640px) {
    .ampp-pro-gate {
        padding: 40px 24px;
    }

    .ampp-pro-gate h2 {
        font-size: 24px;
    }
}