/* ============================================
    TA — TOKENS
    Fonts (@font-face) and every :root variable — colours, sizes, radii, shadows.
============================================ */

/* ==========================================================================
   FONTS
   Gotham is a commercial font, so it is not bundled. Drop the licensed files
   into assets/fonts/ (names below) or install it locally and it is picked up
   automatically. Until then Montserrat — the usual free Gotham stand-in — is
   used (loaded from Google Fonts in each page <head>).
   ========================================================================== */
@font-face {
    font-family: "Gotham";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: local("Gotham Book"), local("Gotham-Book"),
         url("../fonts/Gotham-Book.woff2") format("woff2"),
         url("../fonts/Gotham-Book.woff") format("woff");
}
@font-face {
    font-family: "Gotham";
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: local("Gotham Book Italic"), local("Gotham-BookItalic"),
         url("../fonts/Gotham-BookItalic.woff2") format("woff2"),
         url("../fonts/Gotham-BookItalic.woff") format("woff");
}
@font-face {
    font-family: "Gotham";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: local("Gotham Bold"), local("Gotham-Bold"),
         url("../fonts/Gotham-Bold.woff2") format("woff2"),
         url("../fonts/Gotham-Bold.woff") format("woff");
}
@font-face {
    font-family: "Gotham";
    font-weight: 900;
    font-style: normal;
    font-display: swap;
    src: local("Gotham Black"), local("Gotham-Black"),
         url("../fonts/Gotham-Black.woff2") format("woff2"),
         url("../fonts/Gotham-Black.woff") format("woff");
}


/* ==========================================================================
   ROOT VARIABLES
   ========================================================================== */
:root {
    /* ---- Font ---- */
    --ta-font: "Gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --ta-fw-book: 400;
    --ta-fw-medium: 500;
    --ta-fw-bold: 700;
    --ta-fw-black: 900;

    /* ---- Brand ---- */
    --ta-primary: #f1aa17;          /* headline accent, icons, star */
    --ta-orange: #f6a233;           /* buttons, frames */
    --ta-orange-hover: #e8921f;
    --ta-orange-dark: #e26a12;      /* primary button gradient: dark end */
    --ta-orange-light: #f9b84f;     /* primary button gradient: light end */
    /* Primary buttons: dark → light orange. 200% wide; hover slides to the other half (light → dark). */
    --ta-grad-orange: linear-gradient(100deg, var(--ta-orange-dark) 0%, var(--ta-orange) 28%, var(--ta-orange-light) 50%, var(--ta-orange) 72%, var(--ta-orange-dark) 100%);
    --ta-yellow: #faca40;           /* bundle card rim */
    --ta-sun: #f9b400;              /* hot deals big % */
    --ta-navy: #163c66;             /* card borders, pagination, archive titles */
    --ta-navy-ink: #02274a;         /* FAQ text */
    --ta-ink: #282e48;              /* dark button */
    --ta-blue: #3b4ee3;             /* image placeholder */
    --ta-link: #3b4fe4;

    /* ---- Neutrals ---- */
    --ta-black: #000000;
    --ta-white: #ffffff;
    --ta-dark: #3f3f3f;             /* dark bands */
    --ta-gray-555: #555555;
    --ta-gray-828: #828282;
    --ta-gray-869: #86919d;
    --ta-gray-b4: #b4b4b4;
    --ta-gray-e1: #e1e1e1;
    --ta-gray-fb: #fbfbfb;

    /* ---- Status ---- */
    --ta-green: #7ed957;
    --ta-green-dark: #31a400;
    --ta-pay: #00c25b;              /* checkout "Complete Payment" (PDF page 6) */
    --ta-red: #dc3942;
    --ta-red-dark: #bc1727;
    --ta-red-badge: #ff3131;

    /* ---- Tints / backgrounds ---- */
    --ta-peach: #fde3c6;            /* chips, FAQ bars, pagination */
    --ta-peach-soft: #fdebd8;
    --ta-mint: #fafdf4;             /* home hero + accreditation tiles */
    --ta-cream: #fef6e2;            /* how-to-get-started band */
    --ta-page-top: #fffefd;
    --ta-page-bottom: #fff3e6;
    --ta-page-bg: linear-gradient(180deg, var(--ta-page-top) 0%, var(--ta-page-bottom) 100%);

    /* ---- Layout ---- */
    --ta-container: 1140px;         /* 832 design px of content */
    --ta-container-wide: 1210px;    /* header */
    --ta-container-xl: 1365px;      /* footer */
    --ta-gutter: 15px;
    --ta-section-y: 80px;

    /* ---- Radius ---- */
    --ta-radius-4: 4px;
    --ta-radius-6: 6px;
    --ta-radius-8: 8px;
    --ta-radius-12: 12px;
    --ta-radius-16: 16px;
    --ta-radius-20: 20px;
    --ta-radius-24: 24px;
    --ta-radius-pill: 999px;

    /* ---- Font sizes (design x 4/3) ---- */
    --ta-fs-60: 3.75rem;            /* hero h1           45   */
    --ta-fs-46: 2.875rem;           /* explore courses   34.3 */
    --ta-fs-39: 2.4375rem;          /* section title     29.1 */
    --ta-fs-37: 2.3125rem;          /* archive title     27.9 */
    --ta-fs-33: 2.0625rem;          /* certificate title 24.7 */
    --ta-fs-30: 1.875rem;           /*                   22.5 */
    --ta-fs-27: 1.6875rem;          /* step title        20   */
    --ta-fs-24: 1.5rem;             /* impact label      18   */
    --ta-fs-21: 1.3125rem;          /* footer title      15.8 */
    --ta-fs-20: 1.25rem;            /*                   15   */
    --ta-fs-18: 1.125rem;           /*                   13.9 */
    --ta-fs-16: 1rem;               /* body              12   */
    --ta-fs-15: 0.9375rem;          /* nav / footer link 11.4 */
    --ta-fs-14: 0.875rem;           /*                   10.5 */
    --ta-fs-13: 0.8125rem;          /*                   10   */
    --ta-fs-12: 0.75rem;            /* card title        9    */
    --ta-fs-11: 0.6875rem;
    --ta-fs-10: 0.625rem;

    /* ---- Shadows ---- */
    --ta-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.08);
    --ta-shadow-soft: 0 4px 16px rgba(0, 0, 0, 0.1);
    --ta-shadow-blob: rgba(30, 28, 28, 0.18);

    /* ---- Motion ---- */
    --ta-ease: 0.2s ease;
}