/* =============================================================
 * Funnelysis — Design Tokens
 * Derived directly from css/styles.css, css/nav-styles.css,
 * css/footer-styles.css, css/about-styles.css, css/courses-styles.css.
 * Every value is traceable to a line in the source.
 * ============================================================= */

:root {
    /* -----------------------------------------------------------
     * COLOR
     * From styles.css `:root` block, lines 23-25.
     * The whole brand runs on a strict two-color palette:
     * purple + yellow on a neutral gray field. There are no
     * teals, blues, or extra accents in the real CSS.
     * ----------------------------------------------------------- */
    --primary-yellow: #f2bf62;
    --primary-purple: #3f3d55;
    --background-gray: #f6f6f6;

    /* Neutrals actually used in the source */
    --white: #ffffff;
    --card-image-bg: #f9f9f9;                   /* course-image-wrapper bg */

    /* Yellow tint scale — derived from rgba(242, 191, 98, x)
       usages across the source. 0.05–0.5. */
    --yellow-05: rgba(242, 191, 98, 0.05);
    --yellow-10: rgba(242, 191, 98, 0.10);      /* faq hover */
    --yellow-15: rgba(242, 191, 98, 0.15);      /* checkmark circle */
    --yellow-20: rgba(242, 191, 98, 0.20);      /* highlight-meta, content-tag */
    --yellow-30: rgba(242, 191, 98, 0.30);      /* icon glow shadow */
    --yellow-40: rgba(242, 191, 98, 0.40);      /* icon glow on hover */
    --yellow-50: rgba(242, 191, 98, 0.50);      /* icon-container border */

    /* Purple tint scale — derived from rgba(63, 61, 85, x).
       Used almost exclusively for soft shadows. */
    --purple-05: rgba(63, 61, 85, 0.05);        /* features-section shadow */
    --purple-08: rgba(63, 61, 85, 0.08);        /* faq-item shadow */
    --purple-10: rgba(63, 61, 85, 0.10);        /* card shadow */
    --purple-15: rgba(63, 61, 85, 0.15);        /* card-hover shadow */
    --purple-20: rgba(63, 61, 85, 0.20);        /* button shadow */

    /* Status colors — only used for form messages */
    --success-color: #4CAF50;                    /* success-message */
    --error-color:   #ff6b6b;                    /* error-message */

    /* -----------------------------------------------------------
     * BACKGROUND ATMOSPHERE
     * The site's signature look: a checkerboard pattern with
     * a white→near-white gradient overlay, plus 12 floating
     * glass bubbles that magnify the pattern behind them.
     * Defined in styles.css lines 26-29 and the .bubble rules.
     * ----------------------------------------------------------- */
    --gradient-top-color: 255, 255, 255;
    --gradient-bottom-color: 240, 240, 240;
    --gradient-top-opacity: 1.0;
    --gradient-bottom-opacity: 0.1;

    /* -----------------------------------------------------------
     * TYPE
     * From body{} in styles.css line 39 and the type rules below.
     * Brandon Grotesque is loaded via Adobe Typekit
     * (https://use.typekit.net/hjo3lsv.css). See header.php.
     * ----------------------------------------------------------- */
    --font-body: 'brandon-grotesque', sans-serif;
    --font-display: 'brandon-grotesque', sans-serif;

    /* Weights actually used: 300 (body), 400 (links/labels),
       500 (titles, buttons, nav, emphasis). No 600+ in source. */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;

    /* Type scale — every size comes from a rule in styles.css.
       Base = 16px (html font-size). On screens < 480px the base
       drops to 14px; on screens ≥ 1920px it grows to 18px. */
    --text-xs:    0.8rem;     /* video-duration, content-tag */
    --text-sm:    0.875rem;   /* body default — styles.css L46 */
    --text-base:  0.9rem;     /* nav links, course-button, content-date */
    --text-md:    1rem;       /* footer-text, course-features li */
    --text-lg:    1.1rem;     /* cta-button, course-description, faq-answer */
    --text-xl:    1.2rem;     /* testimonial-text, feature-text */
    --text-2xl:   1.25rem;    /* section-subtitle, faq-question h3 */
    --text-3xl:   1.3rem;     /* intro-text, content-title */
    --text-4xl:   1.4rem;     /* highlight-card-title */
    --text-5xl:   1.5rem;     /* faq-toggle, profile-name */
    --text-6xl:   1.75rem;    /* course-title, service-title */
    --text-7xl:   2rem;       /* highlight-title, mobile section-title */
    --text-8xl:   2.5rem;     /* section-title (desktop) */
    --text-9xl:   3rem;       /* header-title (desktop) */

    /* Line heights — 3 values used in the source */
    --leading-tight:  1.4;    /* content-title */
    --leading-body:   1.6;    /* body default, descriptions */
    --leading-loose:  1.8;    /* intro-text, about-text */

    /* -----------------------------------------------------------
     * SPACING — rem-based, 16px root.
     * The source doesn't define an explicit spacing scale, but
     * these values recur. Captured here for systematic reuse.
     * ----------------------------------------------------------- */
    --space-1:   0.25rem;     /* 4px  — gaps, micro padding */
    --space-2:   0.5rem;      /* 8px  — small gaps */
    --space-3:   0.75rem;     /* 12px — chip padding */
    --space-4:   1rem;        /* 16px — base */
    --space-5:   1.25rem;     /* 20px */
    --space-6:   1.5rem;      /* 24px — card body padding step */
    --space-8:   2rem;        /* 32px — card padding */
    --space-10:  2.5rem;      /* 40px — section H padding, big card pad */
    --space-12:  3rem;        /* 48px — section vertical spacing */
    --space-16:  4rem;        /* 64px — footer top */
    --space-20:  5rem;        /* 80px — desktop section padding */
    --space-30:  7.5rem;      /* 120px — homepage header container */

    /* Container — the site uses ONE max width everywhere */
    --container-max: 75rem;   /* 1200px */
    --container-narrow: 70rem;
    --container-text: 60rem;  /* FAQ */
    --container-prose: 56.25rem; /* intro-text, testimonial */

    /* -----------------------------------------------------------
     * RADII — mixed in source, captured exactly
     * ----------------------------------------------------------- */
    --radius-xs:   4px;       /* course-button, newsletter inputs */
    --radius-sm:   0.5rem;    /* form inputs, dropdown */
    --radius-md:   0.75rem;   /* faq-item, company-logos-container */
    --radius-lg:   1rem;      /* cards, about-content */
    --radius-pill: 2rem;      /* highlight-meta chip */
    --radius-pill-lg: 50px;   /* account-link, contact-form .cta-button */
    --radius-circle: 50%;     /* avatars, icon containers */

    /* -----------------------------------------------------------
     * SHADOWS
     * ----------------------------------------------------------- */
    --shadow-card:        0 0.5rem 1.5rem  var(--purple-10);
    --shadow-card-hover:  0 1rem   2rem    var(--purple-15);
    --shadow-card-soft:   0 0.5rem 1.5rem  var(--purple-05);
    --shadow-faq:         0 0.25rem 0.75rem var(--purple-08);
    --shadow-button:      0 0.25rem 0.625rem var(--purple-20);
    --shadow-nav:         0 2px 10px rgba(0,0,0,0.1);
    --shadow-nav-scroll:  0 5px 20px rgba(0,0,0,0.1);
    --shadow-profile-halo:0 0.5rem 1rem var(--yellow-30);

    /* The "glow" — used on icon containers and bubbles */
    --glow-yellow:        0 0 30px var(--yellow-30);
    --glow-yellow-hover:  0 0 40px var(--yellow-40);
    --glow-yellow-sm:     0 0 20px var(--yellow-30);
    --glow-yellow-sm-h:   0 0 30px var(--yellow-40);

    /* Inset highlight used on bubbles */
    --inset-bubble:       inset 0 0 20px rgba(255, 255, 255, 0.2);

    /* -----------------------------------------------------------
     * MOTION
     * The source uses ONE transition token for almost everything.
     * Keyframes are declared in atmosphere.css and components.css.
     * ----------------------------------------------------------- */
    --standard-transition: all 0.3s ease;
    --button-shadow: var(--shadow-button);

    --fade-duration: 0.8s;
    --fade-timing:   ease;

    --transition-fast: 0.3s ease;
    --transition-image: 0.5s ease;   /* image scale-on-hover */
    --transition-slide: 0.4s ease;   /* mobile menu */

    /* Hover lift amounts used across components */
    --lift-button: -0.1875rem;       /* 3px — buttons */
    --lift-card:   -0.625rem;        /* 10px — cards */
    --lift-icon:   -0.25rem;         /* 4px — social icons */

    /* -----------------------------------------------------------
     * Z-INDEX LAYERING (styles.css L72-92)
     * ----------------------------------------------------------- */
    --z-bg-pattern: -3;
    --z-bg-overlay: -2;
    --z-bubbles:    -1;
    --z-content:     2;
    --z-nav:      1000;
    --z-mobile-menu: 999;
}

/* -----------------------------------------------------------
 * BASE RESETS — exactly as styles.css L31-44.
 * ----------------------------------------------------------- */
html {
    font-size: 16px;
}

@media (min-width: 1920px) {
    html { font-size: 18px; }
}

@media (max-width: 480px) {
    html { font-size: 14px; }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    line-height: var(--leading-body);
    color: var(--primary-purple);
    background-color: var(--background-gray);
    position: relative;
    overflow-x: hidden;
    font-weight: var(--weight-light);
    font-size: var(--text-sm);
}