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

@import url('./reset.css') layer(reset);

/* Base layer, orphans in this file */
@import url('./base/fonts.css') layer(base);
@import url('./base/typography.css') layer(base);
@import url('./base/layout.css') layer(base);
@import url('./base/content.css') layer(base);

/* Elements */
@import url('./base/brands.css') layer(elements);
@import url('./base/buttons.css') layer(elements);
@import url('./base/forms.css') layer(elements);
@import url('./base/navs.css') layer(elements);
@import url('./base/pills.css') layer(elements);
@import url('./base/tables.css') layer(elements);

/* Components */
@import url('./components/navigation.css') layer(components);
@import url('./components/footer.css') layer(components);

@import url('./components/card.css') layer(components);
@import url('./components/dialog.css') layer(components);
@import url('./components/date_list.css') layer(components);
@import url('./components/notification_banner.css') layer(components);

@import url('./components/search_form.css') layer(components);
@import url('./components/search_dialog.css') layer(components);

@import url('./components/schedule.css') layer(components);
@import url('./components/schedule_block.css') layer(components);
@import url('./components/sponsor_listing.css') layer(components);
@import url('./components/sprints.css') layer(components);

@import url('./components/skip_nav.css') layer(components);

/* Pages */
@import url('./views/homepage.css') layer(pages);
@import url('./views/sub_page.css') layer(pages);
@import url('./views/dashboard.css') layer(pages);
@import url('./views/presentation.css') layer(pages);
@import url('./views/registration.css') layer(pages);
@import url('./views/search.css') layer(pages);
@import url('./views/speaker_profile.css') layer(pages);

/* Miscellaneous */
@import url('./legacy.css') layer(legacy);
@import url('./base/utilities.css') layer(utilities);

/* Custom Styles */
@layer base {
  :root {
    /* Colors */

    --color-white: #FFFFFF; /* White */
    --color-black: #272727; /* Black */

    --color-gray: #8C8C8C; /* Dark Gray */

    --color-purple: #680579; /* Purple */
    --color-pink: #DD04D2; /* Pink */
    --color-yellow: #FFD779; /* Yellow */
    --color-red: #D47454; /* Red */ /* XXX */
    --color-blue: #5833E9; /* Blue */
    --color-dark-blue: #101136; /* Dark Blue */
    --color-cyan: #25C8EB; /* Cyan */

    /* 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-yellow);
    --color-accent-4: var(--color-red);
    --color-accent-5: var(--color-blue);
    --color-accent-6: var(--color-cyan);

    /* 
      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-dark-blue);
    --secondary-color: var(--color-white);
    --bg-color: #090A28;
    --bg-gradient: linear-gradient(180deg, #3B3EA9 23.5%, var(--color-dark-blue) 53.29%);
    --text-color: var(--color-white);
    --error-color: var(--color-red);

    /* Typography */
    --font-family: "Open Sans", serif;
    --font-size: 16px;
    --weight-normal: 400;
    --weight-semibold: 600;
    --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;
    --container-width-max: 1600px;

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

    /* Focus */
    --focus-outline: 4px solid var(--color-accent-2);
    --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: var(--primary-color);
    --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(--bg-color);
    background-image: var(--bg-gradient);
    color: var(--text-color);
  }

  a {
    color: currentColor;
  }

  a:hover {
    text-decoration: none;
  }

  img {
    max-width: 100%;
  }

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

  [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.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;
    }
  }
}