/* ========================== */
/* Imports */
/* ========================== */
@import url('../css/global-styles.css');
@import url('../css/header.css');
@import url('../css/swiper-hero-card.css');
@import url('../css/globe.css');
@import url('../css/hero.css');
@import url('../css/tab-bar.css');
@import url('../css/section-image-text.css');
@import url('../css/section-full-width.css');
@import url('../css/swiper-image-text.css');
@import url('../css/footer.css');
@import url('../css/button.css');
@import url('../css/overlay.css');
@import url('../css/flip-card.css');
@import url('../css/flip-card-overlay.css');
@import url('../css/swiper-comics.css');
@import url('../css/section-basic-text.css');
@import url('../css/section-newsletter.css');

/* Google Fonts - Noto Sans */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,600;0,700;0,800&family=Noto+Sans+JP:wght@400;600;700;800&family=Noto+Sans+Arabic:wght@400;600;700;800&display=swap');

:root {
    /* ========================== */
    /* Colors */
    /* ========================== */
    /* Accent Colors */
    --color-accent: #D2EDED;

    /* Neutral Colors */
    --color-neutral-0: #FFFFFF;
    --color-neutral-50: #F4F5F6;
    --color-neutral-100: #F0F0F0;
    --color-neutral-200: #C9C9C9;
    --color-neutral-300: #767676;
    --color-neutral-400: #686868;
    --color-neutral-500: #292929;
    --color-neutral-600: #000000;

    /* Toast Colors */
    --color-toast-100: #BDA89D;
    --color-toast-200: #896B5C;
    --color-toast-300: #7E6253;
    --color-toast-400: #6B5348;
    --color-toast-500: #5C473D;
    --color-toast-600: #4C3C33;

    /* ========================== */
    /* Border radius */
    /* ========================== */
    --border-radius-none: none;
    --border-radius-1: 1px;
    --border-radius-2: 2px;
    --border-radius-4: 4px;
    --border-radius-8: 8px;
    --border-radius-full: 100%;

    /* ========================== */
    /* Top padding */
    /* ========================== */
    /* Mobile First */
    --top-padding-none: 0px;
    --top-padding-small: 24px;
    --top-padding-medium: 48px;
    --top-padding-large: 64px;
    --top-padding-xlarge: 96px;

    /* ========================== */
    /* Typography */
    /* ========================== */
    --font-family-primary: 'Noto Sans', sans-serif;
    --font-family-japanese: 'Noto Sans JP', sans-serif;
    --font-family-arabic: 'Noto Sans Arabic', sans-serif;

    /* Text H1 */
    --text-h1-font-size: clamp(2rem, 1.8100490196078431rem + 0.8104575163398696vw, 2.3875rem);
    --text-h1-letter-spacing: clamp(-0.02rem, -0.015686274509803921rem + -0.015686274509803921vw, -0.02375rem);
    --text-h1-line-height: clamp(2.4rem, 2.0901960784313727rem + 1.3235294117647059vw, 2.865rem);

    /* Text H2 */
    --text-h2-font-size: clamp(1.4375rem, 1.2965686274509804rem + 0.6013071895424837vw, 1.725rem);
    --text-h2-letter-spacing: clamp(-0.0175rem, -0.020588235294117647rem + 0.013071895424836601vw, -0.013125rem);
    --text-h2-line-height: clamp(1.725rem, 1.3583333333333334rem + 1.5686274509803921vw, 2.2425rem);

    /* Text H3 */
    --text-h3-font-size: clamp(1.3125rem, 1.2205882352941178rem + 0.39215686274509803vw, 1.5rem);
    --text-h3-letter-spacing: clamp(-0.014375rem, -0.014686274509803922rem + 0.0013071895424836601vw, -0.015rem);
    --text-h3-line-height: clamp(1.70625rem, 1.4635294117647058rem + 1.0392156862745099vw, 1.95rem);

    /* Text H4 */
    --text-h4-font-size: clamp(1.1875rem, 1.0955882352941178rem + 0.39215686274509803vw, 1.375rem);
    --text-h4-letter-spacing: clamp(-0.01125rem, -0.01218137254901961rem + 0.003921568627450981vw, -0.013125rem);
    --text-h4-line-height: clamp(1.425rem, 1.2025490196078432rem + 0.9516993464052288vw, 1.65rem);

    /* Text P */
    --text-p-font-size: clamp(0.9375rem, 0.8455882352941176rem + 0.39215686274509803vw, 1.125rem);
    --text-p-letter-spacing: clamp(-0.15px, -0.16px, -0.18px);
    --text-p-line-height: clamp(1.284375rem, 1.0015625rem + 1.209150326797386vw, 1.575rem);

    /* Text P Small */
    --text-p-small-font-size: clamp(0.8125rem, 0.7512254901960784rem + 0.261437908496732vw, 0.9375rem);
    --text-p-small-letter-spacing: clamp(-0.06px, -0.10px, -0.15px);
    --text-p-small-line-height: clamp(1.096875rem, 0.8813725490196079rem + 0.9196078431372549vw, 1.3125rem);

    /* Text Span */
    --text-span-font-size: clamp(0.75rem, 0.6887254901960784rem + 0.261437908496732vw, 0.875rem);
    --text-span-letter-spacing: clamp(1.68px, 1.82px, 1.96px);
    --text-span-line-height: clamp(0.9rem, 0.7470588235294118rem + 0.6535947712418301vw, 1.05rem);

    /* Text Button */
    --text-button-font-size: 0.75rem;
    --text-button-letter-spacing: 1.12px;
    --text-button-line-height: 0.875rem;

    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Font Features */
    --font-features-stylistic: 'salt' on, 'ss04' on;

    /* Box Shadows */
    --box-shadow-base: 2px 2px 5px 0 rgba(0, 0, 0, 0.04), 2px 2px 5px 0 rgba(0, 0, 0, 0.04);
}

/* ========================== */
/* Media Queries - Desktop Overrides */
/* ========================== */
@media (min-width: 768px) {
    :root {
        --top-padding-none: 0px;
        --top-padding-small: 32px;
        --top-padding-medium: 56px;
        --top-padding-large: 72px;
        --top-padding-xlarge: 120px;
    }
}