/* ========================== */
/* 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');
@import url('../css/swiper-full-width.css');
@import url('../css/sticky-cta.css');
@import url('../css/section-logo.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');

/* Variable font for condensed styles */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wdth,wght@0,62.5..100,400..800;1,62.5..100,400..800&display=swap');

:root {
  /* ========================== */
  /* Colors */
  /* ========================== */
  /* Red Colors */
  --color-red-100: #EE0000;
  --color-red-200: #d10a0a;

  /* 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: #3a3a3a;
  --color-neutral-500: #292929;
  --color-neutral-600: #222222;

  /* Globe Colors */
  --color-globe-100: #dbdbdb;

  /* ========================== */
  /* 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: 14px;
  --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;
  }
}