/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

/* ==========================================================================
   Responsive Type + Spacing System
   Base breakpoint: 1400px
   Breakpoints: 1140, 991, 820, 478
   Notes:
   - Large display sizes (mega/h1/h2) step down more aggressively.
   - Body sizes step down subtly to preserve readability.
   - Missing sizes were interpolated from your available values:
     --h2-font (between h1 70 and h3 30) -> 48
     --h4-font (between h3 30 and h5 20) -> 24
     --xlb-font (extra-large body) -> 20
     --sb-font (small body) -> 14
   ========================================================================== */

:root {
  /* --- Typography (1400 base) --- */
  --mega-font: 70px;
  --h1-font: 70px;
  --h2-font: 48px;
  --h3-font: 30px;
  --h4-font: 24px;
  --h5-font: 20px;
  --h6-font: 18px;

  --xlb-font: 20px;        /* extra large body */
  --lb-font: 18px;         /* large body */
  --body-font-size: 16px;  /* body */
  --sb-font: 14px;         /* small body */

  /* --- Spacing (1400 base) --- */
  --10-space: 10px;
  --15-space: 15px;
  --20-space: 20px;
  --25-space: 25px;
  --30-space: 30px;
  --40-space: 40px;
  --50-space: 50px;
  --60-space: 60px;
  --70-space: 70px;
  --80-space: 80px;
  --90-space: 90px;
  --100-space: 100px;
  --110-space: 110px;
  --120-space: 120px;
  --130-space: 130px;
  --140-space: 140px;
  --150-space: 150px;

  --reg-space: 30px; /* general-purpose gutter / section padding */
}

/* Laptop <= 1140px */
@media (max-width: 1140px) {
  :root {
    /* Typography */
    --mega-font: 63px;
    --h1-font: 63px;
    --h2-font: 43px;
    --h3-font: 28px;
    --h4-font: 22px;
    --h5-font: 19px;
    --h6-font: 17px;

    --xlb-font: 19px;
    --lb-font: 18px;
    --body-font-size: 16px;
    --sb-font: 14px;

    /* Spacing */
    --10-space: 8px;
    --15-space: 12px;
    --20-space: 16px;
    --25-space: 19px;
    --30-space: 24px;
    --40-space: 32px;
    --50-space: 40px;
    --60-space: 48px;
    --70-space: 56px;
    --80-space: 64px;
    --90-space: 72px;
    --100-space: 80px;
    --110-space: 88px;
    --120-space: 96px;
    --130-space: 104px;
    --140-space: 112px;
    --150-space: 120px;

    --reg-space: 24px;
  }
}

/* Tablet <= 991px */
@media (max-width: 991px) {
  :root {
    /* Typography */
    --mega-font: 57px;
    --h1-font: 57px;
    --h2-font: 39px;
    --h3-font: 26px;
    --h4-font: 20px;
    --h5-font: 18px;
    --h6-font: 16px;

    --xlb-font: 19px;
    --lb-font: 17px;
    --body-font-size: 15px;
    --sb-font: 13px;

    /* Spacing */
    --10-space: 9px;
    --15-space: 13px;
    --20-space: 17px;
    --25-space: 21px;
    --30-space: 26px;
    --40-space: 33px;
    --50-space: 41px;
    --60-space: 49px;
    --70-space: 55px;
    --80-space: 62px;
    --90-space: 70px;
    --100-space: 78px;
    --110-space: 83px;
    --120-space: 90px;
    --130-space: 98px;
    --140-space: 105px;
    --150-space: 113px;

    --reg-space: 26px;
  }
}

/* Mobile Landscape <= 820px */
@media (max-width: 820px) {
  :root {
    /* Typography */
    --mega-font: 52px;
    --h1-font: 52px;
    --h2-font: 36px;
    --h3-font: 23px;
    --h4-font: 19px;
    --h5-font: 17px;
    --h6-font: 15px;

    --xlb-font: 19px;
    --lb-font: 17px;
    --body-font-size: 15px;
    --sb-font: 13px;

    /* Spacing */
    --10-space: 8px;
    --15-space: 12px;
    --20-space: 16px;
    --25-space: 20px;
    --30-space: 23px;
    --40-space: 30px;
    --50-space: 38px;
    --60-space: 45px;
    --70-space: 49px;
    --80-space: 56px;
    --90-space: 63px;
    --100-space: 70px;
    --110-space: 73px;
    --120-space: 79px;
    --130-space: 86px;
    --140-space: 92px;
    --150-space: 99px;

    --reg-space: 23px;
  }
}

/* Mobile Portrait <= 478px */
@media (max-width: 478px) {
  :root {
    /* Typography */
    --mega-font: 43px;
    --h1-font: 43px;
    --h2-font: 30px;
    --h3-font: 20px;
    --h4-font: 16px;
    --h5-font: 16px;
    --h6-font: 14px;

    --xlb-font: 18px;
    --lb-font: 17px;
    --body-font-size: 15px;
    --sb-font: 13px;

    /* Spacing */
    --10-space: 7px;
    --15-space: 11px;
    --20-space: 14px;
    --25-space: 18px;
    --30-space: 21px;
    --40-space: 26px;
    --50-space: 33px;
    --60-space: 39px;
    --70-space: 41px;
    --80-space: 46px;
    --90-space: 52px;
    --100-space: 58px;
    --110-space: 57px;
    --120-space: 62px;
    --130-space: 68px;
    --140-space: 73px;
    --150-space: 78px;

    --reg-space: 21px;
  }
}