/**
 * Caracal Sports - CSS Variables (Design Tokens)
 * 
 * Global CSS custom properties used throughout the theme.
 * These MUST load on every page before any other styles.
 * 
 * @package HelloElementorChildCaracal
 * @version 1.0.0
 */

/* =========================================================
   Aktiv Grotesk – Global Font System (WOFF2)
   ========================================================= */

/* Thin */
@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/AktivGrotesk_Trial_Th.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* Light */
@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/AktivGrotesk_Trial_Lt.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/AktivGrotesk_Trial_Md.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Black Italic */
@font-face {
    font-family: 'Aktiv Grotesk';
    src: url('../fonts/AktivGrotesk_Trial_BlkIt.woff2') format('woff2');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* =========================================================
   Aktiv Grotesk Condensed (Separate Family)
   ========================================================= */

/* Condensed Thin */
@font-face {
    font-family: 'Aktiv Grotesk Condensed';
    src: url('../fonts/AktivGroteskCd_Trial_Th.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* =========================================================
   Global Default Font
   ========================================================= */

html,
body {
    font-family: 'Aktiv Grotesk', sans-serif;
}

:root {
    /* Colors */
    --caracal-black: #000000;
    --caracal-white: #ffffff;
    --caracal-muted: #9c9c9c;
    --caracal-gray-light: #f2f2f2;
    --caracal-gray-field: #f6f6f6;
    --caracal-stroke-40: rgba(0, 0, 0, 0.4);
    --caracal-stroke-20: rgba(0, 0, 0, 0.2);
    --caracal-discount: #e60000;
    --caracal-tabby: #30E3AC;
    
    /* Typography */
    --font-boldit: 'AktivGrotesk-BlackItalic', system-ui, sans-serif;
    --font-bold: 'AktivGrotesk-Bold', system-ui, sans-serif;
    --font-medium: 'AktivGrotesk-Medium', system-ui, sans-serif;
    --font-regular: 'AktivGrotesk-Light', system-ui, sans-serif;
    --font-thin: 'AktivGrotesk-Thin', system-ui, sans-serif;
    
    /* Design System */
    --skew-angle: -15deg;
    --skew-angle-modal: -14deg;
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.15);
    --blur-backdrop: blur(18px);
}