/* Define layers */
@layer reset, base, elements, components, pages, legacy, utilities;

@import url("./reset.e1030567246d.css") layer(reset);

/* Base layer, orphans in this file */
@import url("./base/fonts.2213af03bbe0.css") layer(base);
@import url("./base/typography.35672349c38d.css") layer(base);
@import url("./base/layout.3d13f24b2bc9.css") layer(base);
@import url("./base/content.6f8996729b72.css") layer(base);

/* Elements */
@import url("./base/brands.6e8b99e67773.css") layer(elements);
@import url("./base/buttons.d443fe213bfe.css") layer(elements);
@import url("./base/forms.2d3a48dc087f.css") layer(elements);
@import url("./base/navs.1a57a90f0265.css") layer(elements);
@import url("./base/pills.fcb2daf8b0ee.css") layer(elements);
@import url("./base/tables.971b9d6ab05c.css") layer(elements);

/* Components */
@import url("./components/navigation.7d5dc13e051a.css") layer(components);
@import url("./components/footer.2b6ff5300ec5.css") layer(components);

@import url("./components/card.2921f6f950b2.css") layer(components);
@import url("./components/dialog.0a1d885139e1.css") layer(components);
@import url("./components/date_list.9fe8ecd19f5d.css") layer(components);
@import url("./components/notification_banner.63c5d808981c.css") layer(components);

@import url("./components/search_form.7cb857536608.css") layer(components);
@import url("./components/search_dialog.8d6d32546fcb.css") layer(components);

@import url("./components/schedule.95cea81689cb.css") layer(components);
@import url("./components/schedule_block.d1a28dca284e.css") layer(components);
@import url("./components/sponsor_listing.84aa353d9d23.css") layer(components);
@import url("./components/sprints.0ccd963dc008.css") layer(components);

@import url("./components/skip_nav.68164291c49e.css") layer(components);

/* Pages */
@import url("./views/homepage.1ca17aefdb8b.css") layer(pages);
@import url("./views/dashboard.020194dff03a.css") layer(pages);
@import url("./views/presentation.b617c7ff3368.css") layer(pages);
@import url("./views/registration.b10ceb081311.css") layer(pages);
@import url("./views/search.0e19e41ade2c.css") layer(pages);
@import url("./views/speaker_profile.35997d6fa385.css") layer(pages);

/* Miscellaneous */
@import url("./legacy.62b2e0466f39.css") layer(legacy);
@import url("./base/utilities.bb97d244cb39.css") layer(utilities);

/* Custom Styles */
@layer base {
  :root {
    /* Colors */
    --color-white: #FFFFFF; /* White */
    --color-black: #1E1E1E; /* Black */

    --color-dark-gray: #343332; /* Dark Gray */
    --color-beige: #F6EAD8; /* Beige */

    --color-purple: #7574B6; /* Purple */
    --color-pink: #E495B1; /* Pink */
    --color-orange: #F1A076; /* Orange */
    --color-yellow: #F5bF64; /* Yellow */
    --color-red: #D47454; /* Red */
    --color-blue: #7CB9E8; /* Blue */

    /* Accent colors can be used for highlighting or other design elements */
    --color-accent-1: var(--color-purple);
    --color-accent-2: var(--color-pink);
    --color-accent-3: var(--color-orange);
    --color-accent-4: var(--color-yellow);
    --color-accent-5: var(--color-red);
    --color-accent-6: var(--color-blue);

    /* 
      Color application

      Primary and secondary colors should always contrast, light on dark or dark on light.
      Primary and secondary colors should be used for buttons, text, or other high visibility items.
    */
    --primary-color: var(--color-beige);
    --secondary-color: var(--color-dark-gray);
    --bg-color: var(--color-beige);
    --text-color: var(--color-dark-gray);
    --error-color: var(--color-red);

    /* Typography */
    --font-family: "Cooper", serif;
    --font-size: 16px;
    --weight-normal: 400;
    --weight-bold: 700;
    --weight-black: 800;

    /* Type scaling */

    /* Base sizing, primarily for content */
    --size-1: 3.815rem;
    --size-2: 3.052rem;
    --size-3: 2.441rem;
    --size-4: 1.953rem;
    --size-5: 1.563rem;
    --size-6: 1.25rem;
    --size-7: 1rem;
    --size-8: .825rem;
    --size-9: .64rem;

    /* Display sizing, primarily for block headings and callouts */
    --size-display-1: calc(var(--size-1) * 1.5);
    --size-display-2: calc(var(--size-2) * 1.5);
    --size-display-3: calc(var(--size-3) * 1.5);
    --size-display-4: calc(var(--size-4) * 1.5);
    --size-display-5: calc(var(--size-5) * 1.5);
    --size-display-6: calc(var(--size-6) * 1.5);
    --size-display-7: calc(var(--size-7) * 1.5);
    --size-display-8: calc(var(--size-8) * 1.5);
    --size-display-9: calc(var(--size-9) * 1.5);

    --heading-line-height: 1.18;

    /* Layout */
    --gutters: 1rem;
    --h-spacing: var(--gutters);
    --v-spacing: 1.5rem;
    --container-width: 1200px;

    /* Forms */
    --field-border-color: #CCCCCC;
    --field-disabled-color: #EEEEEE;

    /* Focus */
    --focus-outline: 4px dashed var(--color-accent-1);
    --focus-offset: 2px;

    /* Card styles */
    --card-border-radius: .25rem;
    --card-border: 2px solid var(--secondary-color);
    --card-shadow: 0 6px 0 0 var(--secondary-color);

    /* Tables */
    --table-stripe-bg: #F9F3E7;
    --table-selected: var(--color-purple);

    /* Components */
    --cal-spacing: .65rem;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  *:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
  }

  html {
    scroll-behavior: smooth;
    background-color: var(--primary-color);
    color: var(--text-color);
  }

  a {
    color: currentColor;
  }

  a:hover {
    text-decoration: none;
  }

  img {
    max-width: 100%;
  }

  main {
    margin: calc(2 * var(--v-spacing)) 0;
  }

  [rel="external"]::after {
    position: relative;
    top: -2px;
    display: inline-block;
    vertical-align: middle;
    margin-left: .5ch;
    width: 1.08em;
    height: 1.08em;
    mask-image: url("../icons/external-link.2a067e31c6d2.svg");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
    background-color: currentColor;
    text-indent: -9999rem;
    content: '↗';
  }

  .value-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .value-list dt {
    font-weight: var(--weight-bold);
  }

  .value-list dd {
    margin-left: 0;
  } 

  .video-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  
  .video-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
  }

  @media (min-width: 768px) {
    :root {
      --font-size: 20px;
    }
  }
}