@layer base {
/* Base element styling with CSS3 nesting */

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text);
}

h1 {
  font-size: var(--font-size-3xl);
  padding: var(--spacing-3);
}

h2 {
  font-size: var(--font-size-2xl);
  padding: var(--spacing-2);
}

h3 {
  font-size: var(--font-size-xl);
  padding: var(--spacing-2);
}

h4 {
  font-size: var(--font-size-lg);
  padding: var(--spacing-1);
}

h5 {
  font-size: var(--font-size-base);
  padding: var(--spacing-1);
}

h6 {
  font-size: var(--font-size-sm);
}

p {
  margin-top: 0;
  margin-bottom: var(--spacing-4);
  line-height: var(--line-height-base);
}

a {
  color: var(--brand);
  text-decoration: none;

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

  &:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }
}

/* Buttons */
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);
  background-color: var(--brand);
  color: var(--on-brand);
  transition:
    color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);

  &:hover {
    background-color: var(--brand-hover);
  }

  &:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
  }

  &:disabled {
    opacity: 0.65;
    cursor: not-allowed;
  }

  /* Button variants */
  &.secondary {
    background-color: var(--text-muted);

    &:hover {
      background-color: var(--gray-900);
    }
  }

  &.success {
    background-color: var(--green-700);

    &:hover {
      background-color: var(--green-900);
    }
  }

  &.danger {
    background-color: var(--red-700);

    &:hover {
      background-color: var(--red-900);
    }
  }

  &.warning {
    background-color: var(--accent);
    color: var(--on-accent);

    &:hover {
      background-color: var(--accent-hover);
      color: var(--on-accent);
    }
  }

  &.info {
    background-color: var(--blue-600);

    &:hover {
      background-color: var(--brand-hover);
    }
  }

  /* Button sizes */
  &.small {
    min-height: calc(var(--tap-min) * 0.75);
    padding: var(--spacing-1) var(--spacing-2);
    font-size: var(--font-size-sm);
  }

  &.large {
    padding: var(--spacing-3) var(--spacing-6);
    font-size: var(--font-size-lg);
  }

  /* Outline buttons */
  &.outline {
    background-color: transparent;
    border-color: currentColor;

    &:not(.secondary):not(.success):not(.danger):not(.warning):not(.info) {
      color: var(--brand);

      &:hover {
        background-color: var(--brand);
        color: var(--on-brand);
      }
    }

    &.secondary {
      color: var(--text-muted);

      &:hover {
        background-color: var(--text-muted);
        color: var(--on-brand);
      }
    }

    &.success {
      color: var(--green-700);

      &:hover {
        background-color: var(--green-700);
        color: var(--on-brand);
      }
    }

    &.danger {
      color: var(--red-700);

      &:hover {
        background-color: var(--red-700);
        color: var(--on-brand);
      }
    }

    &.warning {
      color: var(--accent);

      &:hover {
        background-color: var(--accent);
        color: var(--on-accent);
      }
    }

    &.info {
      color: var(--blue-600);

      &:hover {
        background-color: var(--blue-600);
        color: var(--on-brand);
      }
    }
  }
}

/* Form elements */
form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  align-items: flex-start;
  background-color: var(--surface);
  padding: var(--spacing-4);
}

fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--spacing-4) 0;

  & legend {
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-2);
    padding: 0;
  }
}

label {
  display: block;
  margin-bottom: var(--spacing-1);
  font-weight: var(--font-weight-medium);

  &.required::after {
    content: "*";
    color: var(--red-700);
    margin-inline-start: var(--spacing-1);
  }
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  display: block;
  width: 100%;
  min-height: var(--tap-min);
  padding: 0.5em;
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  text-align: start;
  color: var(--text);
  background-color: var(--surface);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);

  &:focus {
    border-color: var(--brand);
    outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
  }

  &:disabled {
    background-color: var(--surface-sunken);
    cursor: not-allowed;
  }

  &.error {
    border-color: var(--red-700);
  }
}

textarea {
  min-height: 100px;
  resize: vertical;
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%233a424d' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-2) center;
  background-size: 16px 12px;
  padding-inline-end: var(--spacing-10);
}

[dir="rtl"] select {
  background-position: left var(--spacing-2) center;
}

input[type="checkbox"] {
  width: 1.5em;
  height: 1.5em;
  min-height: 0;
}

/* Tables */
table {
  width: 100%;
  margin-bottom: var(--spacing-6);
  border-collapse: collapse;

  & th,
  & td {
    padding: var(--spacing-2) var(--spacing-3);
    border-bottom: var(--border-width) solid var(--border);
    text-align: start;
  }

  & th {
    font-weight: var(--font-weight-semibold);
    background-color: var(--surface-sunken);
  }

  & tbody tr {
    &:hover {
      background-color: var(--surface-sunken);
    }
  }
}

/* Keep raw tables from forcing horizontal scroll on mobile: fixed layout +
   word wrapping so long cell content can't push the page wider than 390px. */
@media (max-width: 700px) {
  table {
    table-layout: fixed;
  }

  table th,
  table td {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
}

/* Lists */
ul, ol {
  margin-top: 0;
  margin-bottom: var(--spacing-4);
  padding-inline-start: var(--spacing-6);

  & li {
    margin-bottom: var(--spacing-1);
  }

  & ul,
  & ol {
    margin-top: var(--spacing-1);
    margin-bottom: 0;
  }
}

/* Code */
code, pre {
  font-family: monospace;
  font-size: var(--font-size-sm);
  background-color: var(--surface-sunken);
  border-radius: var(--radius);
}

code {
  padding: var(--spacing-1) var(--spacing-2);
}

pre {
  padding: var(--spacing-3);
  margin-bottom: var(--spacing-4);
  overflow-x: auto;

  & code {
    padding: 0;
    background-color: transparent;
  }
}

/* Horizontal rule */
hr {
  margin: var(--spacing-6) 0;
  border: 0;
  border-top: var(--border-width) solid var(--border);
}

/* Images */
img {
  max-width: 100%;
  height: auto;
}

/* Alerts */
.alert {
  padding: var(--spacing-3) var(--spacing-4);
  margin-bottom: var(--spacing-4);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius);

  &[role="alert"] {
    position: relative;
  }

  &.success {
    color: var(--status-approved-fg);
    background-color: var(--status-approved-bg);
    border-color: var(--status-approved-border);
  }

  &.danger {
    color: var(--status-rejected-fg);
    background-color: var(--status-rejected-bg);
    border-color: var(--status-rejected-border);
  }

  &.warning {
    color: var(--status-pending-fg);
    background-color: var(--status-pending-bg);
    border-color: var(--status-pending-border);
  }

  &.info {
    color: var(--status-review-fg);
    background-color: var(--status-review-bg);
    border-color: var(--status-review-border);
  }

  & .close-button {
    position: absolute;
    top: var(--spacing-2);
    inset-inline-end: var(--spacing-2);
    background: none;
    border: none;
    font-size: var(--font-size-xl);
    cursor: pointer;
    opacity: 0.5;
    min-width: var(--tap-min);
    min-height: var(--tap-min);

    &:hover {
      opacity: 1;
    }
  }
}
}