// CSS Variables for HTML

html{

  // Values

  // Padding

  --columnPaddingNone:0;
  --columnPaddingXSmall:8px;
  --columnPaddingSmall:16px;
  --columnPaddingMedium:32px;
  --columnPaddingLarge:64px;
  --columnPaddingXLarge:112px;

  --gapNone:0;
  --gapXSmall:24px;
  --gapSmall:32px;
  --gapMedium:64px;
  --gapLarge:112px;
  --gapXLarge:224px;
  
  // Type

  // Titles

  --titleFontSizeXSmall:15px;
  --titleLineHeighteXSmall:23px;

  --titleFontSizeSmall:18px;
  --titleLineHeightSmall:23px;

  --titleFontSizeMedium:24px;
  --titleLineHeightMedium:32px;

  --titleFontSizeLarge:35px;
  --titleLineHeightLarge:44px;

  --titleFontSizeXLarge:41px;
  --titleLineHeightXLarge:49px;

  // Text

  --textFontSizeXSmall:13px;
  --textLineHeightXSmall:19px;

  --textFontSizeSmall:14px;
  --textLineHeightSmall:22px;

  --textFontSizeMedium:15px;
  --textLineHeightMedium:25px;

  --textFontSizeLarge:16px;
  --textLineHeightLarge:29px;

  --textFontSizeXLarge:17px;
  --textLineHeightXLarge:28px;


  // Variables for assignment

  --accent-color: #{$blue};

  --titleColor: #{$black};
  --subtitleColor: #{$black};
  --textColor: #{$blue-grey};


  // Code
  --codePaddingLeft: var(--columnPaddingSmall);
  --codePaddingRight: var(--columnPaddingSmall);

}

.theme--red{
  --accent-color: #{$red};
}

.theme--blue{
  --accent-color: #{$blue};
}

.theme--yellow{
  --accent-color: #{$yellow};
}

// TEMP Styles

.temp-beaxy{
  background-color: lime;
}

.temp-drgn{
  background-color: aqua;
}

.photo-card{
  margin-bottom:40px;

  &:last-child{
    margin-bottom:0;
  }

  & > .inner{
    background-color:$white;
    box-shadow:0 4px 15px 0 rgba(0,0,0,0.1);
  }

  .photo-card-photo{
    background-color:#00000025;
    width:100%;
    height:200px;
  }

  .photo-card-content{
    padding:20px;
  }

  .text{
    margin-bottom:20px;
  }
}

.temp-code{
  padding:0 var(--codePaddingRight) 0 var(--codePaddingLeft);

  & > .inner{
    background-color:$blue-black;
    border-radius:5px;
    padding:24px;
    color:$white;
  }

  pre{
    white-space:pre-wrap;
  }
}

@include breakpoint($tablet-portrait){
  .temp-code{
    --codePaddingLeft: 0;
    --codePaddingRight: 0;
  }
}