/* Go Ask Auntie typographical styles */

@theme {
  --font-sans:      "Passion One", sans-serif;
  --font-headings:  "Passion One", cursive;
  --line-height:    1.6;

  --text-base: 1rem;
  --text-14px: clamp(0.75rem,  calc(0.7212rem + 0.1282vw), 0.875rem);
  --text-16px: clamp(0.875rem, calc(0.8462rem + 0.1282vw), 1rem);
  --text-18px: clamp(0.875rem, calc(0.8173rem + 0.2564vw), 1.125rem);
  --text-20px: clamp(1rem,     calc(0.9423rem + 0.2564vw), 1.25rem);
  --text-22px: clamp(1.1rem,   calc(1.0365rem + 0.2821vw), 1.375rem);
  --text-25px: clamp(1.125rem, calc(1.024rem  + 0.4487vw), 1.5625rem);
  --text-30px: clamp(1.185rem, calc(1.0258rem + 0.7077vw), 1.875rem);
  --text-35px: clamp(1.25rem,  calc(1.0337rem + 0.9615vw), 2.1875rem);
  --text-38px: clamp(1.4rem,   calc(1.175rem  + 1vw),      2.375rem);
  --text-40px: clamp(1.5rem,   calc(1.2692rem + 1.0256vw), 2.5rem);
  --text-45px: clamp(1.6rem,   calc(1.3202rem + 1.2436vw), 2.8125rem);
  --text-50px: clamp(1.7rem,   calc(1.3712rem + 1.4615vw), 3.125rem);
  --text-70px: clamp(1.9rem,   calc(1.3288rem + 2.5385vw), 4.375rem);
  --text-75px: clamp(2rem,     calc(1.3798rem + 2.7564vw), 4.6875rem);

  --h1: calc(var(--text-base) * 2.25);
  --h2: calc(var(--text-base) * 1.75);
  --h3: calc(var(--text-base) * 1.5);
  --h4: calc(var(--text-base) * 1.25);
  --h5: calc(var(--text-base) * 1.125);
  --h6: calc(var(--text-base) * 1.05);
}

body {
    background-color: var(--color-teal-light);
    color: var(--color-navy);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--line-height);
}

::selection { background: var(--color-teal); color: var(--color-white); }

@layer components {
    h1, h2, h3,
    h4, h5, h6 {
        font-family: var(--font-headings);
        font-weight: 700;
        margin: 0 0 1rem;
    }

    h1, .h1 {
        font-size: var(--h1);
        line-height: 1.2;
    }

    h2, .h2 {
        font-size: var(--h2);
        line-height: 1.3;
    }

    h3, .h3 {
        font-size: var(--h3);
        line-height: 1.4;
    }

    h4, .h4 {
        font-size: var(--h4);
        line-height: 1.5;
    }

    h5, .h5 { font-size: var(--h5); }

    h6, .h6 { font-size: var(--h6); }
}

a, .link {
    color: var(--color-navy);
    text-decoration: none;
    transition: color 200ms;
    cursor: pointer;

    &:hover { color: var(--color-red); text-decoration: underline; }
}

h1 a, .h1 a,
h2 a, .h2 a,
h3 a, .h3 a {
    color: inherit;
    text-decoration: underline;
}

p {
    margin-top: 0;
    margin-bottom: 1rem;
}

ul { list-style-type: disc; }

ol { list-style-type: decimal; }

li ul, li ol { margin: 0 1rem; }

ol ol { list-style-type: lower-alpha; }

ol ol ol { list-style-type: lower-roman; }

ol ol ol ol { list-style-type: lower-alpha; }

pre, code,
samp, style { font-family: monospace; }

pre {
    font-size: 0.875rem;
    overflow: auto;
    padding: 1.5rem;
}

pre code {
    background-color: inherit;
    border-radius: 0;
    color: inherit;
    padding: 0;
}

code {
  @apply bg-navy/30 px-[3px] py-0.5 font-mono text-navy text-xs rounded-sm;
}

hr {
    background-color: var(--color-navy);
    border: none;
    display: block;
    height: 1px;
    margin: 1rem 0;
    width: 100%;
}