/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

 @layer reset, bootstrap, plugins, base, blocks, templates, variants;

 @import url('./reset.css') layer(reset);
 @import url('./vendors/bootstrap/bootstrap.min.css') layer(bootstrap);
 
 @layer base {
   :root {
     /* colors */
     --coreneutral-101: #fbfbfc;
     --coreneutral-102: #f7f8f8;
     --coreneutral-103: #eff0f1;
     --coreneutral-104: #e0e2e4;
     --coreneutral-105: #cdd1d4;
     --coreneutral-106: #c0c5c9;
     --coreneutral-107: #a8aeb3;
     --coreneutral-108: #828b93;
     --coreneutral-109: #69747d;
     --coreneutral-110: #505d68;
     --coredark-101: #051727;
     --coredark-101-hover: #082640;
     --coredark-101-active: #0b3559;
     --corered-101: #b3282d;
     --corered-101-hover: #992226;
     --corered-101-active: #801c20;
     --corered-102: #d6311b;
     --corebrightred-101: #d84332;
     --link-color: #b3282d;
     --link-hover-color: #8f2024;
     --background-color: #fafafd;
     --light-color: #ecf2f4;
     --lightgray: #ecf2f4;
     --dark-color: #ccc;
     --core-dark-opaque: rgb(5 23 39 / 25%);
     --text-color: var(--coredark-101);
     --pickled-bluewood: #263746;

     /* gradient colors */
     --grad-cool-101-top: linear-gradient(180.05deg, #e5e5ec 0.05%, var(--coreneutral-103) 99.95%);

     /* nav height */
     --nav-height: 5.5rem;
     --mobile-nav-height: 3.125rem;
 
     /* Grid breakpoints - BS Standards */
     --breakpoint-sm: 576px;
     --breakpoint-md: 768px;
     --breakpoint-lg: 992px;
     --breakpoint-xl: 1200px;
     --breakpoint-xxl: 1400px;
   
     /* Grid gutter */
     --gutter-sm: 0;
     --gutter-md: 1rem;
     --gutter-lg: 2rem;
 
     /* Spacing (px) */
     --spacing-0: 0;
     --spacing-2: 0.125rem;
     --spacing-4: 0.25rem;
     --spacing-8: 0.5rem;
     --spacing-12: 0.75rem;
     --spacing-16: 1rem;
     --spacing-20: 1.25rem;
     --spacing-24: 1.5rem;
     --spacing-32: 2rem;
     --spacing-40: 2.5rem;
     --spacing-48: 3rem;
     --spacing-64: 4rem;
     --spacing-80: 5rem;
     --spacing-96: 6rem;
     --spacing-112: 7rem;
     --spacing-148: 9.25rem;
     --section-spacing-large-mobile: 2rem 1rem;
     --section-spacing-large: 3.75rem 7.0625rem 4.125rem;

     /* animations */
     --animation-duration: 0.3s;

     /* font size adjustments */
     --font-sm: 0.8em;
     --font-lg: 1.2em;

     /* border-radius */
     --rounded-full: 50%;
     --rounded-4: 0.25rem;
     --rounded-10: 0.625rem;
   }

   html {
     scrollbar-gutter: stable;
     scroll-behavior: smooth;
   }

   body {
     margin: 0;
     color: var(--text-color);
     background-color: var(--background-color);
     display: none;
   }

   body.appear {
     display: block;
   }

   h1, h2, h3,
   h4, h5, h6 {
     scroll-margin: calc(var(--nav-height) + 1em);
   }

   p {
     margin: 0 0 1rem;
   }

   li {
     margin: 0 0 0.6rem;
   }
 
   dl, ol, ul, pre, blockquote {
     margin-top: 1em;
     margin-bottom: 1em;
   }

   /* second level indents (numbered) */
   ol > li > ol {
    list-style-type: lower-alpha;
   }

   /* third level indents (numbered) */
   ol > li > ol > li > ol {
    list-style-type: lower-roman;
   }

   code {
     padding: 0.125em;
   }
 
   pre {
     overflow: scroll;
   }
 
   main pre {
     background-color: var(--light-color);
     padding: 1em;
     overflow-x: auto;
     white-space: pre;
   }
 
   /* links */
   a:any-link {
     color: var(--link-color);
     text-decoration: underline;
     word-wrap: break-word;
   }
 
   a:hover {
     text-decoration: underline;
     color: var(--link-hover-color);
   }
 
   /* buttons */
   a.button:any-link, button {
     font-family: var(--body-font-family);
     display: inline-block;
     box-sizing: border-box;
     text-decoration: none;
     border: 0.125rem solid transparent;
     text-align: center;
     font-style: normal;
     cursor: pointer;
     color: var(--background-color);
     background-color: var(--link-color);
     margin: 1rem 0;
     padding: 0.3125rem;
     padding-left: 1rem;
     padding-right: 1rem;
     font-size: calc(calc(1rem - 0.125rem) - 0.25rem);
     font-weight: var(--lighter);
     border-radius: 0;
     white-space: normal;
     overflow: inherit;
     text-overflow: inherit;
     line-height: inherit;
   }
 
   a.button:hover, a.button:focus, button:hover, button:focus  {
     background-color: var(--link-hover-color);
     cursor: pointer;
   }
 
   button:disabled, button:disabled:hover {
     background-color: var(--light-color);
     cursor: unset;
   }
 
   a.button.primary, button.primary {
     background-color: var(--link-color);
     font-family: var(--body-font-family);
     font-weight: var(--normal);
     border: 0.0625rem solid var(--link-color);
     color: var(--coreneutral-101);
     white-space: normal;
     overflow: inherit;
     text-overflow: inherit;
     line-height: inherit;
     padding: 0.3125rem;
     padding-left: 1rem;
     padding-right: 1rem;
     font-size: 1.125rem;
   }
 
   a.button.secondary, button.secondary {
     background-color: unset;
     font-family: var(--body-font-family);
     font-weight: var(--normal);
     border: 0.0625rem solid var(--link-color);
     color: var(--link-color);
     white-space: normal;
     overflow: inherit;
     text-overflow: inherit;
     line-height: inherit;
     padding: 0.3125rem;
     padding-left: 1rem;
     padding-right: 1rem;
     font-size: 1.125rem;
   }
 
   main img {
     max-width: 100%;
     width: auto;
     height: auto;
   }
 
   .icon {
     display: inline-block;
     height: 1.5rem;
     width: 1.5rem;
   }
 
   .icon img {
     height: 100%;
     width: 100%;
   }
 
   /* sections */
   .section,
   .container {
     padding-left: var(--gutter-md);
     padding-right: var(--gutter-md);
     margin: 2.5rem auto;
     box-sizing: border-box;
   }
 
   /* section metadata */
   main .section.highlight {
     background-color: var(--light-color);
     padding: 2rem 1rem;
     margin: 2rem auto;
   }

   main .section.grad-cool-101-top {
    background: var(--grad-cool-101-top);
   }

   main .section.section-spacing-large {
     padding: var(--section-spacing-large-mobile);
   }

   hr {
     margin: 2rem 0;
   }
 
   .top-divider {
     margin-top: 1.25rem;
   }
 
   .top-divider p,
   .top-divider li {
       font-size: 1rem;
       line-height: 1.375rem;
   }
 
   .hidden {
     visibility: hidden;
     height: 0;
     width: 0;
   }
 
   /**
   * Responsive adjustments 
   */
   @media (width >= 768px) { /* --breakpoint-md */
     .section,
     .container {
         max-width: calc(100vw - (var(--gutter-md) * 2));
     }
   }
 
   @media (width >= 992px) { /* --breakpoint-lg */
     .section,
     .container {
         max-width: calc(100vw - (var(--gutter-md) * 2));
     }
 
     main .section.light,
     main .section.highlight {
       padding: 48px;
     }

    main .section.section-spacing-large {
      padding: var(--section-spacing-large);
    }
   }
 
   @media (width >= 1200px) { /* --breakpoint-xl */
     .section,
     .container {
         max-width: calc(100vw - (var(--gutter-lg) * 2));
     }
   }
 
   @media (width >= 1400px) { /* --breakpoint-xxl */
     .section,
     .container {
         max-width: 86rem;
     }
   }
 }