/**
 * Academia SSDN — design tokens + base components
 * ===================================================
 * The :root block is copied verbatim from "Academy - Type & Color Spec.md".
 * The component classes below (badges, buttons, cards) are a starting
 * point covering what's reused across every Tier 2 template in this
 * bundle — NOT a pixel-accurate recreation of every screen. For exact
 * spacing, sizing, and states on any given screen, open
 * "Academy Dashboard.dc.html" in a browser and read the inline styles on
 * that specific section — that file is the source of truth for pixel
 * values; this file is just the shared vocabulary.
 *
 * Enqueue this after Elementor's own stylesheet on Tier 1 pages, and as
 * the only stylesheet (besides base WP/theme resets) on the Tier 2 PHP
 * templates, which Elementor never touches.
 */

:root {
    /* brand */
    --ssdn-navy: #112241;
    --ssdn-navy-deep: #0C1A33;
    --ssdn-sage: #D1DDDC;
    --ssdn-orange: #F05A2D;
    --ssdn-gold: #EFAD42;
    --ssdn-blue: #79B7CD;
    --ssdn-off-white: #F7F8F7;

    /* semantic */
    --action: var(--ssdn-orange);
    --progress: var(--ssdn-gold);
    --data: var(--ssdn-blue);

    /* on dark */
    --text-1-dark: #FFFFFF;
    --text-2-dark: rgba(209, 221, 220, 0.80);
    --text-3-dark: rgba(209, 221, 220, 0.62);
    --surface-dark: rgba(209, 221, 220, 0.07);
    --border-dark: rgba(209, 221, 220, 0.14);

    /* on light */
    --text-1-light: #112241;
    --text-2-light: rgba(17, 34, 65, 0.75);
    --text-3-light: rgba(17, 34, 65, 0.65);
    --text-2-sage: rgba(17, 34, 65, 0.70);
    --border-light: rgba(17, 34, 65, 0.12);

    /* type */
    --font-display: 'Jost', 'Sofia Pro', system-ui, sans-serif;
    --font-ui: 'Figtree', 'Aspira', system-ui, sans-serif;
    --font-editorial: 'Source Serif 4', 'ITC Cheltenham', Georgia, serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* type scale (spec → Typography → Paste-ready type tokens) */
    --t-display: 600 52px/1.08 var(--font-display);
    --t-display-m: 600 30px/1.15 var(--font-display);
    --t-h1: 600 38px/1.15 var(--font-display);
    --t-h1-m: 600 25px/1.2 var(--font-display);
    --t-h1-compact: 600 30px/1.15 var(--font-display);
    --t-h2: 600 22px/1.2 var(--font-display);
    --t-h2-m: 600 20px/1.2 var(--font-display);
    --t-h3: 600 20px/1.2 var(--font-display);
    --t-card: 600 17px/1.2 var(--font-display);
    --t-h4: 600 16px/1.2 var(--font-display);
    --t-stat: 600 46px/1 var(--font-display);
    --t-stat-m: 600 38px/1 var(--font-display);

    --t-lede: 400 16px/1.55 var(--font-ui);
    --t-lede-m: 400 14px/1.5 var(--font-ui);
    --t-body: 400 14px/1.55 var(--font-ui);
    --t-item: 600 15px/1.25 var(--font-ui);
    --t-ui: 500 13px/1.3 var(--font-ui);
    --t-meta: 400 12px/1.35 var(--font-ui);
    --t-meta-m: 400 11.5px/1.35 var(--font-ui);
    --t-button: 700 15px/1 var(--font-ui);
    --t-input: 400 16px/1.3 var(--font-ui);

    --t-eyebrow: 500 10px/1.35 var(--font-mono); /* + letter-spacing .14em, uppercase */
    --t-badge: 600 9.5px/1 var(--font-mono); /* + letter-spacing .08em, uppercase */
    --t-num: 500 12px/1.2 var(--font-mono);

    /* shape */
    --r-btn: 10px;
    --r-card: 16px;
    --r-panel: 20px;
    --gutter-mobile: 22px;
    --gutter-desktop: 44px;
}

/* -------------------------------------------------------------------- */
/* Gate badges — used on 4a, 4b/4c, 5c, wherever [ssdn_gate_badge] runs  */
/* -------------------------------------------------------------------- */

.ssdn-badge {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 9.5px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 4px 7px;
    border-radius: 5px;
    display: inline-block;
}

.ssdn-badge--libre,
.ssdn-badge--incluida {
    color: var(--ssdn-navy);
    background: var(--ssdn-sage);
}

.ssdn-badge--pro {
    color: var(--ssdn-gold);
    background: transparent;
    border: 1px solid rgba(239, 173, 66, 0.45);
}

.ssdn-badge--en-camino {
    color: var(--text-3-dark);
    background: transparent;
    border: 1px dashed var(--border-dark);
}

/* -------------------------------------------------------------------- */
/* Buttons                                                                */
/* -------------------------------------------------------------------- */

.ssdn-btn {
    font-family: var(--font-ui);
    font-weight: 700;
    font-size: 15px;
    border-radius: var(--r-btn);
    padding: 16px;
    display: inline-block;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.ssdn-btn--primary {
    background: var(--ssdn-orange);
    color: var(--ssdn-navy); /* spec: navy label on orange (4.67:1); white is 3.38:1 */
}

.ssdn-btn--primary:hover {
    background: #F47A55; /* lighter, not darker: navy on #F47A55 is 5.84:1 */
    color: var(--ssdn-navy);
}

.ssdn-btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(209, 221, 220, 0.35);
    color: var(--text-1-dark);
}

.ssdn-btn--full {
    width: 100%;
}

/* -------------------------------------------------------------------- */
/* Destination banner + error banner (login page)                       */
/* -------------------------------------------------------------------- */

.ssdn-destination-banner {
    background: var(--ssdn-sage);
    border-radius: 10px;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-ui);
    font-size: 12.5px;
    color: var(--text-1-light);
    margin-bottom: 16px;
}

.ssdn-destination-banner__icon {
    width: 16px;
    height: 16px;
    background: var(--ssdn-orange);
    border-radius: 4px;
    display: inline-block;
    flex-shrink: 0;
}

.ssdn-error-banner {
    background: rgba(240, 90, 45, 0.1);
    border: 1px solid rgba(240, 90, 45, 0.4);
    border-radius: 10px;
    padding: 11px 14px;
    color: var(--text-1-light);
    font-family: var(--font-ui);
    font-size: 13px;
    margin-bottom: 16px;
}

/* -------------------------------------------------------------------- */
/* Cards (index grid, price card, course cards)                         */
/* -------------------------------------------------------------------- */

.ssdn-index-card,
.ssdn-course-card,
.ssdn-muro__price-card,
.ssdn-muro__free-card {
    background: #fff;
    border-radius: var(--r-card);
    padding: 22px;
}

.ssdn-muro__free-card {
    background: transparent;
    border: 1px solid var(--border-dark);
}

/* -------------------------------------------------------------------- */
/* Progress bar (4a)                                                     */
/* -------------------------------------------------------------------- */

.ssdn-progress-bar {
    height: 6px;
    border-radius: 3px;
    background: rgba(17, 34, 65, 0.1);
    overflow: hidden;
}

.ssdn-progress-bar__fill {
    height: 100%;
    background: var(--ssdn-gold);
}

/* -------------------------------------------------------------------- */
/* Fonts                                                                  */
/* -------------------------------------------------------------------- */
/* Load once, site-wide (functions.php enqueue, not per-template):
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Jost:wght@600;700&family=Figtree:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=IBM+Plex+Mono:wght@500;600&display=swap">
*/

body {
    text-wrap: pretty;
}