@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Fraunces"), url(/fonts/Fraunces.woff2);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url(/fonts/JetBrainsMono.ttf);
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer base {
  :root {
    /* Couleurs */
    --paper:      #FAFAF7;
    --ink:        #171717;
    --ink-soft:   #4A4A47;
    --line:       #D8D5CC;
    --line-strong:#171717;
    --coral:      #FF6B4A;
    --coral-soft: #FFE2D8;
    --yellow:     #FFD23F;
    --yellow-soft:#FFF6D6;
    --teal:       #7FB5B5;
    --teal-soft:  #E3EFEF;
    --lavender:   #B8A9FF;
    --lavender-soft:#EDE8FF;

    /* Typo */
    --font-display: "Fraunces", serif;
    --font-body: system-ui, sans-serif;
    --font-mono: "JetBrains Mono", monospace;

    /* Scale */
    --s: 0.25rem;
  }

  :host {
    display: block;
  }

  /* Anything that has been anchored to should have extra scroll margin */
  :target {
    scroll-margin-block-start: 5ex;
  }

  ::search-text {
    background-color: var(--yellow);
  }

  ::search-text:current {
    background-color: var(--coral);
  }

  ::selection {
    background-color: var(--lavender);
  }

  :focus-visible {
    outline: 3px solid var(--teal);
    outline-offset: 3px;
  }

  body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
  }

  input {
    font-size: 0.95rem;
    padding: 0.8em 1em;
    border: 1px solid var(--ink);
    background: var(--paper);
  }

  :user-invalid:not(:focus-visible), .user-invalid, [aria-invalid="true"] {
    outline: 3px solid var(--coral);
    outline-offset: 3px;
  }

  button {
    border: none;
    background: none;
    cursor: pointer;
  }

  .btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.8em 1.5em;
    border: 1px solid var(--ink);

    &.btn-primary {
      background-color: var(--ink);
      color: var(--paper);
    }
  }

  dialog {
    /* non scrollable background page */
    overscroll-behavior: contain;
    &::backdrop {
      overflow: hidden;
      overscroll-behavior: contain;
    }
  }
}

@layer components {

  .underline-on-hover {
    text-decoration: none;

    anchor-name: --underline-target;

    &::after {
      content: '';
      position: absolute;
      position-anchor: --underline-target;
      position-area: end center;

      background-color: currentColor;
      width: anchor-size();
      height: var(--underline-thickness, 1px);
      transform: scaleX(0);
      transform-origin: right;

      transition: transform 200ms ease;
    }

    &:hover::after {
      transform: scaleX(1);
      transform-origin: left;
    }
  }

  .container {
    margin-inline: round(down, 5vw, 2rem);
    padding-inline: round(5vw, var(--s));
  }
}