/* ==========================================================================
   Cybele Blog — Design Tokens
   Source: Figma variables (Desktop 1920px / Mobile 375px)
   All fluid values use clamp(min, preferred, max) in rem
   ========================================================================== */

:root {

  /* -----------------------------------------------------------------------
     COLORS
     ----------------------------------------------------------------------- */
  --primary-color:      #0a74d6;
  --blog-main:          var(--primary-color);
  --blog-default-type:  #000000;
  --blog-p-article:     #262626;
  --blog-details:       #6e6e6e;
  --line-grey:          #d9d9d9;
  --bg-light:           #eff7fe;
  --bg-dark:            #032748;
  --bg-white:           #ffffff;
  --accent-light:       #5dadf7;
  --accent-bright:      #0b84f4;

  /* gradients */
  --gradient-hero-blog: linear-gradient(89.37deg, #4c6ceb 0%, #9f00f5 89.58%);

  /* -----------------------------------------------------------------------
     CORNER RADIUS
     ----------------------------------------------------------------------- */
  --radius-blogs:      6px;
  --radius-components: 10px;
  --radius-pill:       30px;

  /* -----------------------------------------------------------------------
     STROKE
     desktop: 2 / mobile: 1
     ----------------------------------------------------------------------- */
  --stroke-weight: clamp(0.0625rem, 0.0221rem + 0.0649vw, 0.125rem);

  /* -----------------------------------------------------------------------
     SHADOW
     desktop: 10 / mobile: 5
     ----------------------------------------------------------------------- */
  --shadow-position: clamp(0.3125rem, 0.1101rem + 0.3247vw, 0.625rem);
  --shadow-default: var(--shadow-position) var(--shadow-position) 0 rgba(0, 0, 0, 0.07);

  /* -----------------------------------------------------------------------
     MARGIN
     ----------------------------------------------------------------------- */

  /* margin-global: 140 / 20 */
  --margin-global: clamp(1.25rem, -1.7327rem + 7.7922vw, 8.75rem);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Font Size
     ----------------------------------------------------------------------- */

  /* H1: 50 / 27 */
  --font-size-h1: clamp(1.6875rem, 0.7569rem + 1.4935vw, 3.125rem);

  /* H2: 38 / 24 */
  --font-size-h2: clamp(1.5rem, 0.9338rem + 0.9091vw, 2.375rem);

  /* H3: 28 / 21 */
  --font-size-h3: clamp(1.3125rem, 0.9695rem + 0.5519vw, 1.75rem);

  /* H4: 23 / 19 */
  --font-size-h4: clamp(1.1875rem, 1.0257rem + 0.2597vw, 1.4375rem);

  /* H5: 19 / 15 */
  --font-size-h5: clamp(0.9375rem, 0.7757rem + 0.2597vw, 1.1875rem);

  /* H6: 23 / 18 */
  --font-size-h6: clamp(1.125rem, 0.9228rem + 0.3247vw, 1.4375rem);

  /* p: 20 / 16 */
  --font-size-p: clamp(1rem, 0.8382rem + 0.2597vw, 1.25rem);

  /* p-article: 22 / 16 */
  --font-size-p-article: clamp(1rem, 0.7573rem + 0.3896vw, 1.375rem);

  /* p-small: 16 / 13 */
  --font-size-p-small: clamp(0.8125rem, 0.6912rem + 0.1948vw, 1rem);

  /* details-small: 16 / 11 */
  --font-size-details-small: clamp(0.6875rem, 0.4853rem + 0.3247vw, 1rem);

  /* title-small: 18 / 14 */
  --font-size-title-small: clamp(0.875rem, 0.7132rem + 0.2597vw, 1.125rem);

  /* -----------------------------------------------------------------------
     TYPOGRAPHY — Line Height
     ----------------------------------------------------------------------- */

  /* H1: 61 / 33 */
  --line-height-h1: clamp(2.0625rem, 0.9293rem + 1.8182vw, 3.8125rem);

  /* H2: 46 / 31 */
  --line-height-h2: clamp(1.9375rem, 1.3309rem + 0.974vw, 2.875rem);

  /* H3: 36 / 28 */
  --line-height-h3: clamp(1.75rem, 1.4265rem + 0.5195vw, 2.25rem);

  /* H4: 33 / 25 */
  --line-height-h4: clamp(1.5625rem, 1.2389rem + 0.5195vw, 2.0625rem);

  /* H5: 29 / 21 */
  --line-height-h5: clamp(1.3125rem, 0.989rem + 0.5195vw, 1.8125rem);

  /* H6: 31 / 23 */
  --line-height-h6: clamp(1.4375rem, 1.114rem + 0.5195vw, 1.9375rem);

  /* p: 34 / 26 */
  --line-height-p: clamp(1.625rem, 1.3015rem + 0.5195vw, 2.125rem);

  /* p-article: 37 / 26 */
  --line-height-p-article: clamp(1.625rem, 1.1801rem + 0.7143vw, 2.3125rem);

  /* p-small: 23 / 19 */
  --line-height-p-small: clamp(1.1875rem, 1.0257rem + 0.2597vw, 1.4375rem);

  /* details-small: 20 / 16 */
  --line-height-details-small: clamp(1rem, 0.8382rem + 0.2597vw, 1.25rem);

  /* title-small: 27 / 21 */
  --line-height-title-small: clamp(1.3125rem, 1.0699rem + 0.3896vw, 1.6875rem);

  /* -----------------------------------------------------------------------
     SPACING — Gap
     ----------------------------------------------------------------------- */

  /* gap-categories-navbar: 4 / 0 */
  --gap-categories-navbar: clamp(0rem, -0.1618rem + 0.2597vw, 0.25rem);

  /* gap-subtitle-text: 8 / 4 */
  --gap-subtitle-text: clamp(0.25rem, 0.0882rem + 0.2597vw, 0.5rem);

  /* gap-button: 8 / 6 */
  --gap-button: clamp(0.375rem, 0.2941rem + 0.1299vw, 0.5rem);

  /* gap-pagination-items: 8 / 8 */
  --gap-pagination-items: 0.5rem;

  /* gap-grid-cta: 12 / 10 */
  --gap-grid-cta: clamp(0.625rem, 0.5441rem + 0.1299vw, 0.75rem);

  /* gap-categories-footer: 12 / 10 */
  --gap-categories-footer: clamp(0.625rem, 0.5441rem + 0.1299vw, 0.75rem);

  /* gap-navbar-elements: 12 / 14 — mobile is larger */
  --gap-navbar-elements: clamp(0.75rem, 0.831rem - 0.1299vw, 0.875rem);

  /* gap-items: 16 / 10 */
  --gap-items: clamp(0.625rem, 0.3824rem + 0.3896vw, 1rem);

  /* gap-title-text: 20 / 12 */
  --gap-title-text: clamp(0.75rem, 0.4265rem + 0.5195vw, 1.25rem);

  /* gap-hero-banner: 24 / 16 */
  --gap-hero-banner: clamp(1rem, 0.6765rem + 0.5195vw, 1.5rem);

  /* gap-pagination-arrows: 24 / 16 */
  --gap-pagination-arrows: clamp(1rem, 0.6765rem + 0.5195vw, 1.5rem);

  /* gap-grid-cards: 28 / 12 */
  --gap-grid-cards: clamp(0.75rem, 0.1029rem + 1.039vw, 1.75rem);

  /* gap-title-content: 38 / 30 */
  --gap-title-content: clamp(1.875rem, 1.5515rem + 0.5195vw, 2.375rem);

  /* gap-grid-items: 56 / 28 */
  --gap-grid-items: clamp(1.75rem, 0.6168rem + 1.8182vw, 3.5rem);

  /* gap-strip-elements: 68 / 48 */
  --gap-strip-elements: clamp(3rem, 2.1912rem + 1.2987vw, 4.25rem);

  /* -----------------------------------------------------------------------
     SPACING — Padding
     ----------------------------------------------------------------------- */

  /* padding-input-block: 15 / 12 */
  --padding-input-block: clamp(0.75rem, 0.6287rem + 0.1948vw, 0.9375rem);

  /* padding-input-inline: 30 / 22 */
  --padding-input-inline: clamp(1.375rem, 1.0515rem + 0.5195vw, 1.875rem);

  /* padding-pill-block: 10 / 8 */
  --padding-pill-block: clamp(0.5rem, 0.4191rem + 0.1299vw, 0.625rem);

  /* padding-pill-inline: 15 / 10 */
  --padding-pill-inline: clamp(0.625rem, 0.4228rem + 0.3247vw, 0.9375rem);

  /* padding-cards-s: 28 / 16 */
  --padding-cards-s: clamp(1rem, 0.5147rem + 0.7792vw, 1.75rem);

  /* padding-cards-m: 34 / 24 */
  --padding-cards-m: clamp(1.5rem, 1.0956rem + 0.6494vw, 2.125rem);

  /* padding-cards-l: 48 / 24 */
  --padding-cards-l: clamp(1.5rem, 0.5294rem + 1.5584vw, 3rem);

  /* padding-strip-s: 80 / 40 */
  --padding-strip-s: clamp(2.5rem, 0.8824rem + 2.5974vw, 5rem);

  /* padding-strip-m: 120 / 50 */
  --padding-strip-m: clamp(3.125rem, 0.2923rem + 4.5455vw, 7.5rem);

  /* padding-bottom-hero: 100 / 50 */
  --padding-bottom-hero: clamp(3.125rem, 1.1029rem + 3.2468vw, 6.25rem);

  /* padding-top-hero: 160 / 100 */
  --padding-top-hero: clamp(6.25rem, 3.8235rem + 3.8961vw, 10rem);

  /* padding-menu-category-block: 7 / 12 — mobile is larger */
  --padding-menu-category-block: clamp(0.4375rem, 0.6393rem - 0.3247vw, 0.75rem);

  /* padding-menu-category-inline: 16 / 16 */
  --padding-menu-category-inline: 1rem;

  /* padding-footer-block: 38 / 28 */
  --padding-footer-block: clamp(1.75rem, 1.3456rem + 0.6494vw, 2.375rem);

  /* padding-bottom-blogs-footer: 110 / 60 */
  --padding-bottom-blogs-footer: clamp(3.75rem, 1.7279rem + 3.2468vw, 6.875rem);

  /* padding-top-hero-s: 120 / 95 */
  --padding-top-hero-s: clamp(5.9375rem, 4.9265rem + 1.6234vw, 7.5rem);

  /* padding-bottom-hero-s: 30 / 15 */
  --padding-bottom-hero-s: clamp(0.9375rem, 0.3309rem + 0.974vw, 1.875rem);
}

/* ==========================================================================
   UTILITY CLASSES — Gap
   ========================================================================== */
.gap-categories-navbar  { gap: var(--gap-categories-navbar); }
.gap-subtitle-text      { gap: var(--gap-subtitle-text); }
.gap-button             { gap: var(--gap-button); }
.gap-pagination-items   { gap: var(--gap-pagination-items); }
.gap-grid-cta           { gap: var(--gap-grid-cta); }
.gap-categories-footer  { gap: var(--gap-categories-footer); }
.gap-navbar-elements    { gap: var(--gap-navbar-elements); }
.gap-items              { gap: var(--gap-items); }
.gap-title-text         { gap: var(--gap-title-text); }
.gap-hero-banner        { gap: var(--gap-hero-banner); }
.gap-pagination-arrows  { gap: var(--gap-pagination-arrows); }
.gap-grid-cards         { gap: var(--gap-grid-cards); }
.gap-title-content      { gap: var(--gap-title-content); }
.gap-grid-items         { gap: var(--gap-grid-items); }
.gap-strip-elements     { gap: var(--gap-strip-elements); }

/* ==========================================================================
   UTILITY CLASSES — Padding
   ========================================================================== */
.padding-input-block            { padding-block: var(--padding-input-block); }
.padding-input-inline           { padding-inline: var(--padding-input-inline); }
.padding-pill-block             { padding-block: var(--padding-pill-block); }
.padding-pill-inline            { padding-inline: var(--padding-pill-inline); }
.padding-cards-s                { padding: var(--padding-cards-s); }
.padding-cards-m                { padding: var(--padding-cards-m); }
.padding-cards-l                { padding: var(--padding-cards-l); }
.padding-strip-s                { padding-block: var(--padding-strip-s); }
.padding-strip-m                { padding-block: var(--padding-strip-m); }
.padding-bottom-hero            { padding-bottom: var(--padding-bottom-hero); }
.padding-top-hero               { padding-top: var(--padding-top-hero); }
.padding-menu-category-block    { padding-block: var(--padding-menu-category-block); }
.padding-menu-category-inline   { padding-inline: var(--padding-menu-category-inline); }
.padding-footer-block           { padding-block: var(--padding-footer-block); }
.padding-bottom-blogs-footer    { padding-bottom: var(--padding-bottom-blogs-footer); }
.padding-top-hero-s             { padding-top: var(--padding-top-hero-s); }
.padding-bottom-hero-s          { padding-bottom: var(--padding-bottom-hero-s); }

/* ==========================================================================
   UTILITY CLASSES — Radius & Shadow
   ========================================================================== */
.radius-blogs       { border-radius: var(--radius-blogs); }
.radius-components  { border-radius: var(--radius-components); }
.radius-pill        { border-radius: var(--radius-pill); }
.shadow-default     { box-shadow: var(--shadow-default); }