/* ================================================================
   Global Stylesheet - Loaded first (via _ prefix)
   Declares CSS layers and contains global variables & base styles
   ================================================================ */

/* Define cascade layers - order matters! */
@layer reset, base, components, layouts, utilities;

/* ================================================================
   CSS Custom Properties (Variables)
   ================================================================ */

:root {
  /* Colors */
  --color-primary: #1261F1;
  --color-primary-darker: #0c51ce;
  --color-primary-lighter: #4180F3;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-blue: #1261F1;
  --color-blue-custom: #007bff;
  --color-teal: #007db5;
  --color-orange: #ff8a00;
  --color-grey-050: #F5F7FA;
  --color-grey-100: #DEE1E5;
  --color-grey-200: #C7CBD1;
  --color-grey-300: #B0B4BC;
  --color-grey-400: #999EA7;
  --color-grey-500: #818893;
  --color-grey-600: #6A727E;
  --color-grey-700: #535B69;
  --color-grey-800: #3C4555;
  --color-grey-900: #252F40;
  --color-green: #33C353;
  --color-green-darker: #228738;
  --color-amber: #ECBA15;
  --color-amber-darker: #876B0C;
  --color-amber-highlight: #D8BA15;
  --color-red: #FF6340;
  --color-red-darker: #E02900;
  --color-red-recording: #AD0000;

  /* Text colors */
  --color-text: #333333;
  --color-text-muted: #666666;
  --color-text-light: #888888;
  --color-text-medium: #555555;

  /* RGB channel values for use with opacity */
  --rgb-primary: 18, 97, 241;
  --rgb-grey-200: 199, 203, 209;
  --rgb-grey-600: 106, 114, 126;
  --rgb-grey-900: 37, 47, 64;
  --rgb-teal: 0, 125, 181;
  --rgb-black: 0, 0, 0;
  --rgb-amber: 236, 186, 21;
  --rgb-green: 51, 195, 83;
  --rgb-red: 255, 99, 64;
  --rgb-red-recording: 173, 0, 0;
  --rgb-white: 255, 255, 255;

  /* Breakpoints - stored as values for reference */
  --breakpoint-x-large: 1439.98px;
  --breakpoint-large: 1199.98px;
  --breakpoint-medium: 991.98px;
  --breakpoint-small: 639.98px;
  --breakpoint-x-small: 399.98px;

  /* Gutters */
  --gutter-default: 24px;
  --gutter-x-large: 20px;
  --gutter-large: 20px;
  --gutter-medium: 16px;
  --gutter-small: 16px;
  --gutter-x-small: 16px;
}

/* ================================================================
   Global Base Styles
   ================================================================ */

@layer base {
  /* Text selection */
  ::selection {
    background-color: #FFCE2D;
    color: #000;
  }

  ::-moz-selection {
    background-color: #FFCE2D;
    color: #000;
  }

  /* Smooth scrolling */
  html {
    scroll-behavior: smooth;
  }

  /* Fade-in content */
  body {
    animation: fadein 0.5s;
  }

  @keyframes fadein {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Horizontal rule */
  hr {
    border: 0;
    border-top: 1px solid var(--color-grey-100);
    height: 0;
    margin: 1rem 0;
    padding: 0;
  }

  /* Details/Summary elements */
  details {
    background: #eee;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
  }

  summary {
    cursor: pointer;

    & > * {
      display: inline;
    }
  }
}