@import 'animations.css';

:root {
  color-scheme: light dark;

  /* Color system */
  --soft-blush: #f4dbd8ff;
  --lilac-ash: #bea8a7ff;
  --rosy-taupe: #c09891ff;
  --mauve-bark: #775144ff;
  --rich-mahogany: #2a0800ff;

  /* Typography */
  --font-body: system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, monospace;

  --line-height-body: 1.6;
  --line-height-heading: 1.25;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;

  /* Measure */
  --measure: 60ch;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
}

html {
  background-color: var(--soft-blush);
  color: var(--rich-mahogany);
}

body {
  background-color: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: var(--space-2);
}

section,
article,
aside,
nav {
  padding: var(--space-2);
}

a {
  color: var(--mauve-bark);
  text-decoration-color: var(--rosy-taupe);


  &:is(:hover, :focus-visible) {

    color: var(--rich-mahogany);
    text-decoration-color: var(--rich-mahogany);
  }
}

header,
footer {
  background-color: var(--mauve-bark);
  color: var(--soft-blush);
  padding: var(--space-1);
  a {
    color: var(--soft-blush);
    text-decoration-color: var(--lilac-ash);
  }
}

main {
  background-color: var(--soft-blush);
}

section,
article,
aside {
  background-color: white;
  color: var(--rich-mahogany);
  border-color: var(--lilac-ash);
}

nav {
  background-color: var(--mauve-bark);

  a {
    color: var(--soft-blush);

    &:is(:hover, :focus-visible) {
      background-color: var(--rosy-taupe);
      color: var(--rich-mahogany);
    }
  }
}

input,
select,
textarea {
  background-color: white;
  color: var(--rich-mahogany);
  border-color: var(--lilac-ash);
  caret-color: var(--mauve-bark);

  &:is(:focus) {
    border-color: var(--mauve-bark);
    outline-color: var(--mauve-bark);
  }
}

button {
  background-color: var(--mauve-bark);
  color: var(--soft-blush);
  border-color: var(--mauve-bark);
  border-radius: .5rem;


  &:is(:hover, :focus-visible) {
    background-color: var(--rich-mahogany);
  }
}

fieldset {
  background-color: var(--soft-blush);
  border-color: var(--lilac-ash);

  legend {
    color: var(--mauve-bark);
  }
}

table {
  border-color: var(--lilac-ash);

  th {
    background-color: var(--rosy-taupe);
    color: var(--rich-mahogany);
  }

  td {
    border-color: var(--lilac-ash);
  }

}

blockquote,
q {
  color: var(--mauve-bark);
  border-color: var(--rosy-taupe);
}

dialog {
  background-color: inherit;
  animation: scale-in 0.6s ease-out;

  form[method="dialog"] {
    display: contents;
  }
}

dialog::backdrop {
  background-color: rgba(42, 8, 0, 0.6);
}