/* =========================================================
   PREFERRA LEARN — Semantic Token Aliases
   ---------------------------------------------------------
   Source of truth: DIVI 5 Variables Manager.
   This file mirrors those values under readable names so
   custom CSS outside DIVI modules stays maintainable.
   ========================================================= */

html { font-size: 62.5%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:root {

    /* ----- Brand colors ----- */
    --c-primary:        #745ea8;
    --c-primary-25:     rgba(116, 94, 168, 0.25);
    --c-primary-50:     rgba(116, 94, 168, 0.50);
    --c-secondary:      #92a85e;
    --c-heading:        #7986a3;
    --c-body:           #211662;
    --c-link:           #f44336;
    --c-medium-gray:    #666666;
    --c-light-shade:    #f5f7f5;
    --c-dark-shade:     #211662;
    --c-light-accent:   #7986a3;
    --c-dark-accent:    #aa4157;
    --c-warning:        #d68733;
    --c-reverse:        #ffffff;

    /* ----- Font families ----- */
    --font-display: "ff-ernestine-pro", Georgia, "Times New Roman", serif;
    --font-body:    "ff-meta-web-pro", "Helvetica Neue", Arial, sans-serif;
    --font-script:  "Lemonade Script", cursive;

    /* ----- Type scale (fluid clamp) ----- */
    --fs-h1:      clamp(3.2rem, 1.6rem + 2.5vw, 5.6rem);
    --fs-h2:      clamp(2.8rem, 1.6rem + 1.9vw, 4.2rem);
    --fs-h3:      clamp(2.4rem, 1.6rem + 1.2vw, 3.15rem);
    --fs-h4:      clamp(2.0rem, 1.5rem + 0.6vw, 2.4rem);
    --fs-h5:      clamp(1.7rem, 1.5rem + 0.2vw, 1.8rem);
    --fs-h6:      clamp(1.5rem, 1.4rem + 0.1vw, 1.6rem);
    --fs-body:    clamp(1.5rem, 1.4rem + 0.15vw, 1.6rem);
    --fs-eyebrow: clamp(1.2rem, 1.1rem + 0.1vw, 1.3rem);
    --fs-small:   clamp(1.1rem, 1.05rem + 0.08vw, 1.2rem);

    /* ----- Line height (em-based per DIVI) ----- */
    --lh-tight:  1.1em;
    --lh-snug:   1.2em;
    --lh-normal: 1.35em;
    --lh-body:   1.6em;
    --lh-loose:  1.7em;

    /* ----- Letter spacing ----- */
    --ls-display: -0.01em;
    --ls-eyebrow:  0.12em;
    --ls-normal:   0.02em;

    /* ----- Font weights ----- */
    --fw-light:    300;
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* ----- Spacing — 8pt soft grid ----- */
    --space-zero: 0;
    --space-3xs:  0.4rem;
    --space-2xs:  0.8rem;
    --space-xs:   1.2rem;
    --space-sm:   1.6rem;
    --space-md:   2.4rem;
    --space-lg:   3.2rem;
    --space-xl:   4.8rem;
    --space-2xl:  6.4rem;
    --space-3xl:  9.6rem;
    --space-4xl: 12.8rem;

    /* ----- Fluid section padding ----- */
    --section-padding-y: clamp(4.8rem, 3rem + 4vw, 9.6rem);
    --section-padding-x: clamp(2.4rem, 1.6rem + 2vw, 6.4rem);

    /* ----- Border radius ----- */
    --radius-none: 0;
    --radius-xs:   0.2rem;
    --radius-sm:   0.4rem;
    --radius-md:   0.8rem;
    --radius-lg:   1.2rem;
    --radius-xl:   1.6rem;
    --radius-2xl:  2.4rem;
    --radius-pill: 9999px;
    --radius-full: 50%;

    /* ----- Border width ----- */
    --border-none: 0;
    --border-1: 0.1rem;
    --border-2: 0.2rem;
    --border-3: 0.3rem;
    --border-4: 0.4rem;
    --border-8: 0.8rem;
}

/* =========================================================
   Optional utility classes for Code modules
   ========================================================= */

.eyebrow, .text-eyebrow {
    font-family:    var(--font-body);
    font-size:      var(--fs-eyebrow);
    font-weight:    var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    line-height:    var(--lh-normal);
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 var(--space-2xs);
}

.text-small, .disclaimer {
    font-family:    var(--font-body);
    font-size:      var(--fs-small);
    font-weight:    var(--fw-regular);
    letter-spacing: var(--ls-normal);
    line-height:    var(--lh-loose);
    opacity: 0.75;
}

.section {
    padding-block:  var(--section-padding-y);
    padding-inline: var(--section-padding-x);
}

.stack-xs > * + * { margin-top: var(--space-xs); }
.stack-sm > * + * { margin-top: var(--space-sm); }
.stack-md > * + * { margin-top: var(--space-md); }
.stack-lg > * + * { margin-top: var(--space-lg); }
.stack-xl > * + * { margin-top: var(--space-xl); }

.radius-sm   { border-radius: var(--radius-sm);   }
.radius-md   { border-radius: var(--radius-md);   }
.radius-lg   { border-radius: var(--radius-lg);   }
.radius-pill { border-radius: var(--radius-pill); }

.border-hairline { border: var(--border-1) solid currentColor; }
.border-button   { border: var(--border-2) solid currentColor; }
.border-accent   {
    border-left: var(--border-4) solid var(--c-primary);
    padding-left: var(--space-md);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

:focus-visible {
    outline: var(--border-3) solid var(--c-primary);
    outline-offset: 0.2rem;
}