/* Custom Variables */
:root {
  /* Spacing */
  --nano: 0.6rem;
  --sm: 0.8rem;
  --nm: 1rem;
  --lg: 1.25rem;
  --xl: 1.5rem;

  /* Colors */
  --clr-black: hsl(0, 0%, 14%);
  --clr-dark: hsl(0, 0%, 28%);
  --clr-light: hsl(0, 0%, 57%);
  --clr-ligher: hsl(0, 0%, 79%);
  --clr-white: hsl(0, 0%, 89%);

  --clr-warning: hsl(47, 100%, 62%);
  --clr-error: hsl(352, 82%, 55%);
  --clr-info: hsl(210, 77%, 57%);
  --clr-success: hsl(78, 74%, 49%);

  --invert-logo: 1;
}

/* Pico.css overrides */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: hsl(287, 65%, 40%);
    --primary-hover: hsl(287, 65%, 50%);
    --primary-focus: hsla(293, 78%, 48%, 0.25);
    --primary-inverse: #fff;
    --invert-logo: 1;
  }
}

/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --primary: hsl(287, 65%, 40%);
  --primary-hover: hsl(287, 65%, 30%);
  --primary-focus: hsla(293, 78%, 48%, 0.125);
  --primary-inverse: #fff;
  --invert-logo: 0;
}

/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
  --primary: hsl(287, 65%, 40%);
  --primary-hover: hsl(287, 65%, 50%);
  --primary-focus: hsla(293, 78%, 48%, 0.25);
  --primary-inverse: #fff;
  --invert-logo: 1;
}

/* Apply over common styles */
:root {
  --form-element-active-border-color: var(--primary);
  --form-element-focus-color: var(--primary-focus);
  --switch-color: var(--primary-inverse);
  --switch-checked-background-color: var(--primary);
}

/* Custom Reset Properties */
h1 {
  margin-top: 0px;
  padding-top: 1rem;
}

/* Utility Classes */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.primary {
  color: var(--primary);
}

#nav-logo {
  height: 2rem;
  filter: invert(var(--invert-logo));
}

p {
  font-size: var(--sm);
  line-height: var(--lg);
}

a {
  font-weight: bold;
}

hgroup {
  line-height: 2em;
}

#about-me-text {
  grid-column: 1 / span 2;
}

#experience > div > ul {
  margin-bottom: 0;
}

#experience > div > ul > li {
  font-size: var(--nano);
}