/**
 * TPG Addons for WooCommerce — Design Tokens
 *
 * Single source of truth for all CSS custom properties used across the
 * checkout flow. Values are derived from Aarya's approved Version 5
 * Figma designs and their CSS exports.
 *
 * IMPORTANT: This file must load FIRST among all plugin stylesheets.
 * Other CSS files reference these tokens but never redefine them.
 *
 * @package TPG_Addons_WooCommerce
 * @since   3.0.0
 */


/* ==========================================================================
   1. COLOUR PALETTE
   ========================================================================== */

:root {

    /* --- Primary: Blue --- */
    --tpg-dark-blue: #294196;
    --tpg-blue: #1D75BC;
    --tpg-light-blue: #294196;

    /* --- Primary: Orange --- */
    --tpg-dark-orange: #F05A28;
    --tpg-orange: #F99351;
    --tpg-light-orange: #FFC99D;

    /*
     * CTA Gradient — corrected from Figma.
     *   Old: 135deg, #F05A28 → #F99351
     *   New: 180deg (top→bottom), #F88E4E → #F1612D
     */
    --tpg-cta-gradient-start: #F88E4E;
    --tpg-cta-gradient-end: #F1612D;
    --tpg-cta-gradient: linear-gradient(
        180deg,
        var(--tpg-cta-gradient-start) 0%,
        var(--tpg-cta-gradient-end) 100%
    );

    /* Legacy aliases (kept for backward-compat with existing selectors) */
    --tpg-orange-gradient-start: #F88E4E;
    --tpg-orange-gradient-end: #F1612D;

    /* --- Neutrals --- */
    --tpg-black: #212122;
    --tpg-dark-gray: #4A4B4C;
    --tpg-medium-gray: #8A8E90;
    --tpg-gray: #D8DDE2;
    --tpg-light-gray: #F0F4F7;
    --tpg-white: #FFFFFF;

    /* --- Semantic --- */
    --tpg-success: #01C0A6;
    --tpg-success-dark: #079D88;
    --tpg-error: #D32F2F;
    --tpg-error-bg: #FDEDED;
    --tpg-error-dark: #B71C1C;
    --tpg-warning: #F9A825;
    --tpg-info: #1D75BC;

    /* --- Checkout-specific (from Figma CSS exports) --- */
    --tpg-page-bg: #F0F4F7;
    --tpg-card-bg: #FFFFFF;
    --tpg-sidebar-bg: #F9FBFC;
    --tpg-price-highlight: #F37139;
    --tpg-trust-badge-color: #686869;
    --tpg-divider: #E7E7E7;
    --tpg-divider-light: rgba(0, 0, 0, 0.1);
    --tpg-paypal-green: #00D76E;
    --tpg-star-rating: #F88E4E;
    --tpg-category-text: #8D8F90;
    --tpg-tag-bg: #F0F4F7;
    --tpg-tag-text: #595A5B;
    --tpg-best-seller-bg: #F88E4E;
    --tpg-edit-link: #F88E4E;


/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */

    /* --- Font families --- */
    --tpg-font-heading: 'Lora', Georgia, serif;
    --tpg-font-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* --- Font sizes (B5/B6 desktop base) --- */
    --tpg-text-h1: 2.375rem;       /* 38px */
    --tpg-text-h2: 1.75rem;        /* 28px */
    --tpg-text-h3: 1.625rem;       /* 26px */
    --tpg-text-h4: 1.25rem;        /* 20px */
    --tpg-text-body: 1.125rem;     /* 18px */
    --tpg-text-small: 1rem;        /* 16px */
    --tpg-text-caption: 0.875rem;  /* 14px */

    /*
     * Line heights — corrected from Figma.
     * Previously not specified; many elements inherited browser defaults.
     */
    --tpg-lh-h1: 1.3;
    --tpg-lh-h2: 1.35;
    --tpg-lh-h3: 1.385;            /* 36px / 26px */
    --tpg-lh-h4: 1.3;              /* 26px / 20px */
    --tpg-lh-body: 1.778;          /* 32px / 18px */
    --tpg-lh-small: 1.625;          /* 26px / 16px */
    --tpg-lh-caption: 1.43;        /* 20px / 14px */

    /* --- Letter spacing --- */
    --tpg-ls-small: 0.013em;       /* Small Text & Caption — per Base Typography */
    --tpg-ls-caption: 0.013em;     /* Caption — same as Small Text */
    --tpg-ls-cta: 0.013em;         /* CTA buttons — aligned to Small Text */
    --tpg-ls-stepper: -0.01em;
    --tpg-ls-heading: -0.006em;


/* ==========================================================================
   3. SPACING
   ========================================================================== */

    --tpg-spacing-xs: 4px;
    --tpg-spacing-sm: 8px;
    --tpg-spacing-md: 16px;
    --tpg-spacing-lg: 24px;
    --tpg-spacing-xl: 32px;
    --tpg-spacing-2xl: 48px;
    --tpg-spacing-3xl: 64px;


/* ==========================================================================
   4. BORDERS & RADII
   ========================================================================== */

    --tpg-radius-sm: 4px;
    --tpg-radius-md: 8px;
    --tpg-radius-lg: 12px;
    --tpg-radius-pill: 102px;
    --tpg-radius-full: 9999px;


/* ==========================================================================
   5. SHADOWS (from Figma CSS exports)
   ========================================================================== */

    /*
     * CTA button shadow — corrected from Figma.
     *   Old: 0 1px 2px rgba(0,0,0,0.05)
     *   New: 0px 2px 4px rgba(0,0,0,0.25)
     */
    --tpg-shadow-cta: 0px 2px 4px rgba(0, 0, 0, 0.25);
    --tpg-shadow-card: 0px 10px 58px rgba(0, 0, 0, 0.02);
    --tpg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --tpg-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --tpg-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);


/* ==========================================================================
   6. TRANSITIONS
   ========================================================================== */

    --tpg-transition-fast: 150ms ease;
    --tpg-transition-base: 200ms ease;
    --tpg-transition-slow: 300ms ease;


/* ==========================================================================
   7. BUTTON DIMENSIONS (from Figma: 256×44px at B5)
   ========================================================================== */

    --tpg-btn-height: 44px;
    --tpg-btn-width-desktop: 256px;
    --tpg-btn-font-size: 1rem;        /* 16px */
    --tpg-btn-font-weight: 600;
    --tpg-btn-line-height: 1.625;    /* 26px / 16px — Small Text line-height */
    --tpg-btn-letter-spacing: 0.013em;
    --tpg-btn-radius: var(--tpg-radius-sm);

    /* NEXT button (smaller variant) */
    --tpg-btn-next-width: 135px;
}


/* ==========================================================================
   8. RESPONSIVE TYPOGRAPHY SCALING
   ==========================================================================
   Mobile-first. The :root block above defines B5/B6 (desktop).
   These overrides scale down for smaller breakpoints.
   ========================================================================== */

/* B1-B2 (360–599px): Compact typography */
@media (max-width: 599px) {
    :root {
        --tpg-text-h1: 1.5rem;        /* 24px */
        --tpg-text-h2: 1.5rem;        /* 24px */
        --tpg-text-h3: 1.5rem;        /* 24px — H3 global B1-B2 */
        --tpg-text-h4: 1.25rem;       /* 20px — H4 global B1-B2 */
        --tpg-text-body: 1rem;        /* 16px */
    }
}

/* B3 (600–839px): Mid-range typography */
@media (min-width: 600px) and (max-width: 839px) {
    :root {
        --tpg-text-h1: 2rem;          /* 32px */
        --tpg-text-h2: 1.625rem;      /* 26px */
        --tpg-text-h3: 1.5rem;        /* 24px — H3 global B3 */
        --tpg-text-h4: 1.25rem;       /* 20px */
        --tpg-text-body: 1rem;        /* 16px */
    }
}

/* B4 (840–1023px): Tablet/small desktop */
@media (min-width: 840px) and (max-width: 1023px) {
    :root {
        --tpg-text-h1: 2rem;          /* 32px */
        --tpg-text-h2: 1.625rem;      /* 26px */
        --tpg-text-h3: 1.625rem;      /* 26px — H3 global B4 */
        --tpg-text-h4: 1.25rem;       /* 20px */
        --tpg-text-body: 1rem;        /* 16px */
    }
}

/* B5 (1024–1279px): Desktop — uses the :root defaults above (H3 = 26px). */

/* B6 (1280px+): Large desktop — H3 scales up to 28px */
@media (min-width: 1280px) {
    :root {
        --tpg-text-h3: 1.75rem;       /* 28px — H3 global B6 */
        --tpg-text-h4: 1.375rem;      /* 22px — H4 global B6 */
        --tpg-text-body: 1.25rem;     /* 20px — Body global B6 */
    }
}