/* All base stylings are set here */
@layer theme, components, utility;

@font-face {
  font-family: "manrope";
  font-style: normal;
  font-display: swap;
  src: url("./assets/fonts/Manrope-VariableFont_wght.ttf") format("ttf");
}
@font-face {
  font-family: "manrope";
  font-style: italic;
  font-display: swap;
  src: url("./assets/fonts/Manrope-VariableFont_wght.ttf") format("ttf");
}

/* reset values */
*,
*::before,
*::after {
  box-sizing: border-box;
  interpolate-size: allow-keywords; /* allow animation for height: auto and width: fit-content, etc */
}

body {
  margin: 0;
  padding: 0;
  user-select: none;
  font-weight: 500;
  font-family: "manrope", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code { font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace }

@layer theme {
  /* here we define the brand fonts, colors, variables */
  :root {
    /*  Typography */
    font-family: "manrope", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-weight: normal;
    font-size:    1rem;
    line-height:  1.25rem;

    --headline-1: 2rem;
    --headline-2: 1.5rem;
    --headline-3: 1.25rem;
    --headline-4: 1rem;
    --font-lg:    1.4rem;
    --font-normal: 1rem;
    --font-sm: 0.8rem;
    --font-xs: 0.6rem;

    /* Polygraph Color Palette */
    --bot: #ff8723;
    --fraud-high: var(--bot);
    --fraud-mid: #ffc391;
    --fraud-low: var(--primary);
    --primary: #33b9f7;
    --primary-bright: #24daff;
    --primary-dark: #009de6;
    --primary-hover: #33b9f7;
    --warning: #d42c2c;
    --black: #000;
    --black-900: #151c2d;
    --black-800: #2c384e;
    --black-500: #8c98ad;
    --black-300: #ced3df;
    --black-100: #f7f8f9;
    --white: #fff;

    /* Buttons */
    --secondary: #ced3df;
    --secondary-hover: #ffffff;
    --tertiary: transparent;
    --tertiary-hover: rgba(0, 157, 230, 0.3);

    /* Icon sizes */
    --icon-mid: 25px;

    /* Components */
    --bg-dark-component: #151c2d;
    --bg-dark-component-50: rgba(21, 28, 45, 0.5);
    --txt-dark-midcontrast: #b1bbcd;
    --disabled: hsl(0, 0%, 35%);
    --border-radius: 4px;
    --border-radius-lg: 10px;

    /* Breakpoints */
    --mobile: 450px;
    --tablet: 650px;

    /* Default spacing */
    --gap: 1rem;
    --gap-half: 0.5rem;
    --gap-wide: 1.5rem;
    --gap-wider: 2rem;

    /* Widths */
    --section-max-width: 66rem;
    --column-base-width: 18rem;
  }

  /* HEADLINES */
  :is(h1, h2, h3, h4, h5) { text-wrap: pretty; }

  h1 {
    font-size: clamp(2rem, 4vw + 1rem, var(--headline-1));
    line-height: clamp(2rem, 4vw + 1rem, var(--headline-1));
  }
  h2 {
    font-size: clamp(1.5rem, 1.5vw + 1rem, var(--headline-2));
    line-height: clamp(1.5rem, 2vw + 1rem, var(--headline-2));
    font-weight: 700;
  }
  h3 {
    font-size: clamp(1.6rem, 2vw + 1rem, var(--headline-3));
    line-height: clamp(1.8rem, 3vw + 1rem, var(--headline-3));
  }
  h4 {
    font-size: var(--headline-4);
    line-height: calc(var(--headline-4) * 1.1);
    font-weight: 800;
    margin-block-end: 1.5rem;
  }

  /* Dark and Light Theme Typography */
  .dark-theme :is(h1, h2, h3, h4, h5, strong)   { color: var(--white); }
  .light-theme :is(h1, h2, h3, h4, h5, strong)  { color: var(--black); }

  :is(h1, h2, h3, h4, h5) strong { color: var(--primary-hover); }

  /* PARAGRAPHS AND LISTS */
  p {
    font-size: var(--font-normal);
    color: var(--txt-dark-midcontrast);
    line-height: calc(var(--font-normal) * 1.2);
  }
  .light-theme p { color: var(--black);}

  small {
    font-size: var(--font-sm);
    color: var(--txt-dark-midcontrast);
  }

  /* LINKS */
  a {
    text-decoration: none;
    color: var(--white);
    transition: color 0.2s ease-in-out;
  }
  a:hover { color: var(--primary-hover); }

  .light-theme a { color: var(--black-800); }

  /* LISTS */
  ul { color: var(--txt-dark-midcontrast); }
  ul li { margin-bottom: var(--gap-half); }

  /* FORMS */
  .input {
    border-radius: var(--border-radius);
    margin-top: var(--gap);
    overflow: auto;
    border: 1px solid;
    position: relative;
    width: 100%;
  }
  .input .icon {
    position: absolute;
    right: var(--gap);
    top: 50%;
  }
  input {
    width: 100%;
    padding: var(--gap);
    border: none;
    outline: none;
    background-color: transparent;
    color: inherit;
  }
  input.disabled,
  .input.disabled {
    color: var(--black-500);
  }
  label {
    font-size: 0.8rem;
    padding-left: var(--gap);
    font-weight: bold;
  }

  /* TABLES */
  table {
    width: 100%;
    border-collapse: collapse;
  }
  td {
    padding: var(--gap);
    border-bottom: 1px solid;
  }
  .dark-theme td {border-color: var(--black-500); }
  @media screen and (max-width: 768px) {
    td {
      padding: var(--gap-half);
    }
  }

  /* SVG */
  svg { fill: var(--black-500); }

  /* TEMP, WILL REMOVE IN NEXT UPDATE */
  .total-wave,
  .bot-wave {
    fill: transparent;
  }

  /* ANIMATINOS */
  @keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes fade-in-zoom {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
  }
}

/*  Utility classes. Used to modify or override component classes.
    Try to limit to one css definition per class */

@layer utility {
  .relative { position: relative;}
  /* COLORS */
  .color-grey { color: var(--black-300); }

  /* FLEXBOX */
  .simple-row.space-between { justify-content: space-between; }
  .simple-row.center { justify-content: center; align-items: center; }
  .simple-row.wrap { flex-wrap: wrap; }
  .simple-row.flex-align-right { justify-content: flex-end; }
  .simple-row.top { align-items: flex-start;}

  /* WIDTHS */
  .width-full { width: 100%; }

  /* ICON SIZING */
  .icon.lg { height: 2rem; }
  .icon.md { height: 1.5rem; }
  .icon.sm { height: 1.25rem; }
  .icon.xs { height: 0.75rem; }

  /* MARGINS & PADDING */
  .margin-none { margin: 0; }
  .padding-none { padding: 0; }
  .padding-b { padding-bottom: var(--gap); }

  @media screen and (max-width: 768px) {
    .hide-mobile {  display: none; }
  }
}