/**
 * Base Element Styles
 * Typography, links, and fundamental elements
 */

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-base);
  background-color: var(--color-bg-base);
}

/* Typography */
h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-4);
}

h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  margin-bottom: var(--space-3);
}

h3 {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-tight);
   margin-bottom: var(--space-3);
}

h4 {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-tight);
   margin-bottom: var(--space-3);
}

h5 {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-tight);
   margin-bottom: var(--space-2);
}

h6 {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weight-semibold);
   line-height: var(--line-height-tight);
   margin-bottom: var(--space-2);
}

p {
   margin-bottom: var(--space-4);
}

/* Links */
/* Links: inherit color by default, only colorize in content areas */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Inline text links inside main content — exclude navigation & table links */
main a:not(.btn):not(.tab):not(.discreet):not(.internal-link):not(.navbar__item):not(.navbar__logo),
.card-body a:not(.btn) {
  color: var(--color-link);
}

main a:not(.btn):not(.tab):not(.discreet):not(.internal-link):not(.navbar__item):not(.navbar__logo):hover,
.card-body a:not(.btn):hover {
  color: var(--color-link-hover);
  text-decoration: underline;
}

/* Internal Entity Links (seminars, users, chats, groups) */
.internal-link {
  color: var(--color-text-base);
  text-decoration: underline;
  text-decoration-color: rgba(var(--color-text-base-rgb), 0.3);
}

.internal-link:hover {
  color: var(--color-text-base);
  text-decoration-color: rgba(var(--color-text-base-rgb), 0.6);
}

/* Code */
code,
pre {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

code {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-subtle);
  border-radius: var(--radius-sm);
}

pre code {
  padding: 0;
  background: none;
}

/* Tables (general) */
table {
  width: 100%;
  border-collapse: collapse;
}

/* Form elements */
input,
textarea,
select {
   border: 1px solid var(--color-border-base);
   border-radius: var(--radius-md);
   padding: var(--space-1) var(--space-3);
   font-size: var(--font-size-sm);
   line-height: 1.25;
   transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select {
   height: 36px;
   box-sizing: border-box;
}


input:not([type="checkbox"]):not([type="radio"]),
textarea {
   width: 100%;
}

select {
   height: 36px;
   width: 100%;
   width: 100%;
   appearance: none;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
   background-repeat: no-repeat;
   background-position: right var(--space-3) center;
   background-size: 1em;
   padding-right: var(--space-8);
}

input:focus,
textarea:focus,
select:focus {
   outline: none;
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px var(--color-focus-ring);
}

input::placeholder,
textarea::placeholder {
   color: var(--color-text-subtle);
}

/* Fieldset and legend */
fieldset {
   border: 1px solid var(--color-border-base);
   border-radius: var(--radius-md);
   padding: var(--space-4);
   margin-bottom: var(--space-4);
}

legend {
   padding: 0 var(--space-2);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-base);
}

/* Small text */
small {
   font-size: var(--font-size-xs);
   color: var(--color-text-subtle);
}

/* Buttons */
button {
  cursor: pointer;
  font-weight: var(--font-weight-medium);
}

button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--color-border-base);
  margin: var(--space-6) 0;
}