/*
 * ============================================================
 *  CONFIG.CSS — Theme & Design Tokens
 *  Change colors, fonts, spacing from this ONE file.
 *  All other styles use these variables automatically.
 * ============================================================
 */

:root {

    /* ── PRIMARY COLOR PALETTE ─────────────────────────────── */
    /*  Exact teal from the LY TRADERS screenshot               */
    --color-primary: #00a7b5;
    --color-primary-dark: #007d89;
    --color-primary-darker: #005f69;
    --color-primary-light: #39c7d4;
    --color-primary-xlight: #e9fbfd;

    /* ── ACCENT / CTA COLOR ────────────────────────────────── */
    /*  Warm amber-orange from "Learn More", "07+", badges      */
    --color-accent: #f4b400;
    --color-accent-dark: #d99800;
    --color-accent-light: #ffd04d;

    /* ── NEUTRAL COLORS ────────────────────────────────────── */
    --color-white: #ffffff;
    --color-off-white: #fbfeff;
    --color-bg-light: #f2fbfc;
    --color-bg-gray: #eef7f8;
    --color-border: #d7edf0;

    /* ── TEXT COLORS ───────────────────────────────────────── */
    --color-text-dark: #16353a;
    --color-text-body: #4d666b;
    --color-text-muted: #7d9aa0;
    --color-text-light: #ffffff;
    --color-text-primary: #00a7b5;

    /* ── TOP BAR ───────────────────────────────────────────── */
    --topbar-bg: #008d99;
    --topbar-text: #ffffff;
    --topbar-height: 42px;

    /* ── NAVBAR ────────────────────────────────────────────── */
    --navbar-height: 72px;
    --navbar-bg: #ffffff;
    --navbar-link-color: #16353a;
    --navbar-link-hover: #00a7b5;
    --navbar-shadow: 0 2px 18px rgba(0, 128, 120, 0.11);
    --navbar-sticky-shadow: 0 4px 28px rgba(0, 128, 120, 0.17);

    /* HERO */
    --hero-bg: #ffffff;
    --hero-pretitle-color: #00a7b5;
    --hero-title-color: #16353a;
    --hero-title-accent: #00a7b5;
    --hero-badge-bg: #008d99;
    --hero-badge-text: #ffffff;
    --hero-exp-bg: #f4b400;
    --hero-exp-text: #ffffff;

    /* ABOUT */
    --about-bg: #008b97;
    --about-text: #ffffff;
    --about-label-bg: #f4b400;
    --about-label-text: #ffffff;
    --about-check-color: #ffd04d;
    --about-exp-bg: #f4b400;
    --about-exp-text: #ffffff;

    /* SERVICES */
    --services-bg: #ffffff;
    --services-label-color: #00a7b5;
    --services-card-bg: #ffffff;
    --services-card-border: #d9edf0;
    --services-card-hover: #00a7b5;
    --services-icon-color: #00a7b5;
    --services-cta-bg: #f4b400;
    --services-cta-text: #ffffff;

    /* WHY */
    --why-bg: #f2fbfc;
    --why-card-bg: #ffffff;
    --why-icon-bg: #eaf9fb;
    --why-icon-color: #00a7b5;
    --why-card-hover-bg: #00a7b5;
    --why-card-hover-text: #ffffff;

    /* TESTIMONIAL */
    --testimonials-bg: #007884;
    --testimonials-text: #ffffff;

    /* ── FOOTER ────────────────────────────────────────────── */
    --footer-bg: #0c1f1d;
    /* Very dark teal-black                       */
    --footer-text: #a8ceca;
    --footer-heading: #ffffff;
    --footer-link-color: #6dbdb7;
    --footer-link-hover: #e8a000;
    --footer-border: rgba(255, 255, 255, 0.07);
    --footer-bottom-bg: #071413;

    /* ── BUTTONS ───────────────────────────────────────────── */
    --btn-primary-bg: #e8a000;
    /* All primary buttons — amber                */
    --btn-primary-text: #ffffff;
    --btn-primary-hover-bg: #c47e00;
    --btn-outline-color: #008078;
    --btn-outline-hover-bg: #008078;
    --btn-radius: 50px;
    --btn-padding: 12px 32px;

    /* ── TYPOGRAPHY ────────────────────────────────────────── */
    --font-heading: 'Poppins', sans-serif;
    --font-body: 'Lato', sans-serif;
    --font-size-base: 16px;
    --font-weight-heading: 700;
    --line-height-body: 1.75;

    /* ── SPACING & LAYOUT ──────────────────────────────────── */
    --section-py: 90px;
    --section-py-sm: 60px;
    --container-max: 1200px;
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --border-radius-lg: 20px;
    --border-radius-xl: 30px;

    /* ── SHADOWS ───────────────────────────────────────────── */
    --shadow-sm: 0 2px 10px rgba(0, 128, 120, 0.08);
    --shadow-md: 0 6px 25px rgba(0, 128, 120, 0.14);
    --shadow-lg: 0 12px 45px rgba(0, 128, 120, 0.18);
    --shadow-xl: 0 20px 60px rgba(0, 128, 120, 0.22);

    /* ── TRANSITIONS ───────────────────────────────────────── */
    --transition-fast: 0.2s ease;
    --transition-base: 0.35s ease;
    --transition-slow: 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* ── CARD ──────────────────────────────────────────────── */
    --card-radius: var(--border-radius);
    --card-shadow: var(--shadow-md);
    --card-padding: 32px;
}