/* ============================================================================
   ShareVega design system
   ----------------------------------------------------------------------------
   Single source of truth for brand colour, spacing, elevation and the handful
   of components every public page repeats. Loads after Bootstrap and before
   site.css so page-level rules can still override a component when they must.

   Rule of thumb: never write a brand hex in a view. Use a token.
   ========================================================================== */

:root {
    /* ── Brand ──────────────────────────────────────────────────────────── */
    --sv-primary: #2563eb;
    --sv-primary-dark: #1d4ed8;
    --sv-primary-darker: #1e40af;
    --sv-navy: #0f3460;
    --sv-navy-mid: #1a5276;

    /* Brand tints — backgrounds, hovers, hairlines */
    --sv-primary-tint: #f0f4ff;
    --sv-primary-tint-strong: #e8f0ff;
    --sv-primary-a08: rgba(37, 99, 235, .08);
    --sv-primary-a12: rgba(37, 99, 235, .12);
    --sv-primary-a20: rgba(37, 99, 235, .20);

    /* ── Status ─────────────────────────────────────────────────────────── */
    --sv-success: #10b981;
    --sv-success-ink: #15803d;
    --sv-warning: #f59e0b;
    --sv-danger: #ef4444;
    --sv-whatsapp: #25d366;

    /* ── Neutrals ───────────────────────────────────────────────────────── */
    --sv-ink: #1f2937;
    --sv-ink-soft: #6b7280;
    --sv-ink-muted: #9ca3af;
    --sv-line: #e5e7eb;
    --sv-surface: #ffffff;
    --sv-surface-alt: #f8fafc;
    --sv-surface-tint: #f1f5f9;

    /* ── Spacing scale (4pt) ────────────────────────────────────────────── */
    --sv-space-1: .25rem;
    --sv-space-2: .5rem;
    --sv-space-3: .75rem;
    --sv-space-4: 1rem;
    --sv-space-5: 1.5rem;
    --sv-space-6: 2rem;
    --sv-space-7: 3rem;
    --sv-space-8: 4.5rem;

    /* ── Radii ──────────────────────────────────────────────────────────── */
    --sv-radius-sm: 8px;
    --sv-radius: 12px;
    --sv-radius-lg: 16px;
    --sv-radius-xl: 18px;
    --sv-radius-pill: 999px;

    /* ── Elevation — layered, not flat ──────────────────────────────────── */
    --sv-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .05);
    --sv-shadow-md: 0 1px 3px rgba(15, 23, 42, .07), 0 8px 24px rgba(15, 23, 42, .08);
    --sv-shadow-lg: 0 2px 6px rgba(15, 23, 42, .08), 0 18px 42px rgba(15, 23, 42, .12);
    --sv-shadow-primary: 0 10px 28px rgba(37, 99, 235, .18);

    /* ── Gradients ──────────────────────────────────────────────────────── */
    --sv-gradient-brand: linear-gradient(135deg, var(--sv-primary) 0%, var(--sv-primary-dark) 100%);
    --sv-gradient-hero: linear-gradient(135deg, var(--sv-navy) 0%, var(--sv-navy-mid) 55%, var(--sv-primary) 100%);
    --sv-gradient-deep: linear-gradient(135deg, var(--sv-primary-dark) 0%, var(--sv-navy) 100%);
    --sv-gradient-strip: linear-gradient(135deg, var(--sv-navy), var(--sv-navy-mid));
    --sv-gradient-surface: linear-gradient(180deg, var(--sv-primary-tint) 0%, var(--sv-surface) 65%, var(--sv-surface-alt) 100%);

    /* ── Course theme colours ───────────────────────────────────────────────
       Each classroom programme has its own identity colour. These are
       deliberately separate from the brand/text tokens even where the value
       happens to coincide, so retuning body text never restyles a product. */
    --sv-course-silver: #6b7280;
    --sv-course-silver-dark: #4b5563;
    --sv-course-diamond: #0f3460;
    --sv-course-diamond-deep: #1a1a2e;

    /* ── Typography ─────────────────────────────────────────────────────── */
    --sv-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --sv-leading-body: 1.7;
    --sv-tracking-tight: -.02em;
    --sv-tracking-wide: .08em;

    /* ── Motion ─────────────────────────────────────────────────────────── */
    --sv-ease: cubic-bezier(.4, 0, .2, 1);
    --sv-transition: .25s var(--sv-ease);

    /* ── Legacy aliases — pre-existing views still reference these ──────── */
    --primary-color: var(--sv-primary);
    --secondary-color: var(--sv-success);
    --warning-color: var(--sv-warning);
    --danger-color: var(--sv-danger);
    --dark-color: var(--sv-ink);
    --light-color: var(--sv-surface-alt);
}

/* ============================================================================
   Components
   ========================================================================== */

/* ── Sections: alternating page bands ───────────────────────────────────── */
.sv-section {
    padding-block: var(--sv-space-7);
}

.sv-section--tint {
    background: var(--sv-gradient-surface);
}

.sv-section--brand {
    background: var(--sv-gradient-deep);
    color: #fff;
}

/* ── Hero: dark brand band, optionally over a photo ─────────────────────── */
.sv-hero {
    background: var(--sv-gradient-hero);
    background-size: cover;
    background-position: center;
    color: #fff;
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.sv-card {
    background: var(--sv-surface);
    border: 1px solid var(--sv-primary-a12);
    border-radius: var(--sv-radius-lg);
    box-shadow: var(--sv-shadow-sm);
    overflow: hidden;
}

.sv-card--raised {
    box-shadow: var(--sv-shadow-md);
}

.sv-card--panel {
    border-radius: var(--sv-radius-xl);
}

/* ── Dark panel — for "assurance"/"why us" blocks against light sections ── */
.sv-panel-dark {
    background: var(--sv-gradient-deep);
    color: #fff;
    border: none;
    border-radius: var(--sv-radius-lg);
}

/* ── Stat tile — glass, sits on a hero ──────────────────────────────────── */
.sv-stat {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: var(--sv-radius-lg);
    padding: var(--sv-space-3) var(--sv-space-5);
    min-width: 130px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.sv-stat__value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}

.sv-stat__label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: var(--sv-tracking-wide);
    color: rgba(255, 255, 255, .75);
}

/* ── Chip — pill on a dark background ───────────────────────────────────── */
.sv-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sv-space-2);
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    border-radius: var(--sv-radius-pill);
    padding: .55rem 1.1rem;
    font-size: .85rem;
    font-weight: 600;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

    .sv-chip i {
        color: var(--sv-warning);
    }

/* ── Feature — tick + copy, used for selling points ─────────────────────── */
.sv-feature {
    display: flex;
    gap: var(--sv-space-3);
    align-items: flex-start;
    background: var(--sv-surface);
    border: 1px solid var(--sv-primary-a12);
    border-radius: var(--sv-radius);
    padding: var(--sv-space-4) 1.1rem;
    box-shadow: var(--sv-shadow-sm);
    font-size: .95rem;
    transition: transform var(--sv-transition), box-shadow var(--sv-transition);
}

    .sv-feature:hover {
        transform: translateY(-3px);
        box-shadow: var(--sv-shadow-primary);
    }

    .sv-feature > i {
        color: var(--sv-success-ink);
        margin-top: .18rem;
    }

/* ── Icon list ──────────────────────────────────────────────────────────── */
.sv-list-icon {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .sv-list-icon li {
        display: flex;
        gap: .65rem;
        align-items: flex-start;
        padding: var(--sv-space-1) 0;
        font-size: .93rem;
    }

        .sv-list-icon li i {
            color: var(--sv-primary);
            margin-top: .25rem;
        }

.sv-panel-dark .sv-list-icon li i {
    color: var(--sv-warning);
}

/* ── Step badge — numbered stages in a flow ─────────────────────────────── */
.sv-step {
    display: inline-block;
    background: var(--sv-primary-tint-strong);
    color: var(--sv-primary-dark);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    border-radius: 6px;
    padding: var(--sv-space-1) .6rem;
    margin-bottom: var(--sv-space-3);
}

/* ── Map strip — address bar above an embedded map ──────────────────────── */
.sv-map-strip {
    background: var(--sv-gradient-strip);
    color: #fff;
}

/* ── Trust strip — reassurance row under a contact card ─────────────────── */
.sv-trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sv-space-4);
    justify-content: center;
    border-top: 1px dashed rgba(0, 0, 0, .12);
    padding-top: .85rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--sv-success-ink);
}

    .sv-trust-strip i {
        margin-right: .35rem;
    }

/* ── CTA band ───────────────────────────────────────────────────────────── */
.sv-cta {
    background: var(--sv-gradient-deep);
    color: #fff;
    text-align: center;
}

/* ── Shared hover lift, so pages stop redefining it ─────────────────────── */
.sv-lift {
    transition: transform var(--sv-transition), box-shadow var(--sv-transition);
}

    .sv-lift:hover {
        transform: translateY(-4px);
        box-shadow: var(--sv-shadow-primary) !important;
    }

/* ── Accessibility ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sv-feature,
    .sv-lift,
    .hover-lift,
    .sv-course-card,
    .btn {
        transition: none !important;
    }

        .sv-feature:hover,
        .sv-lift:hover,
        .hover-lift:hover,
        .sv-course-card:hover,
        .btn:hover {
            transform: none !important;
        }
}