/*
 * semantic.css — v1.0.0
 * A CSS library oriented towards semantic HTML elements.
 * No utility classes. No divs. No spans.
 * HTML describes the what; CSS handles the how.
 *
 * Sections:
 *   1. Tokens & variables
 *   2. Reset & base
 *   3. Structure & layout
 *   4. Typography
 *   5. Navigation
 *   6. Forms
 *   7. Tables
 *   8. Lists
 *   9. Alerts & states
 *  10. Semantic utilities
 */

/* ─────────────────────────────────────────
   1. TOKENS & VARIABLES
   ───────────────────────────────────────── */

:root {
  /* Color scale */
  --color-bg-page:             #f5f4f0;
  --color-bg-surface:          #ffffff;
  --color-bg-subtle:           #f0eeea;

  --color-text-primary:        #1a1916;
  --color-text-secondary:      #5a5850;
  --color-text-tertiary:       #8a8880;
  --color-text-inverted:       #ffffff;

  --color-border-subtle:       #e2dfda;
  --color-border-default:      #ccc9c2;
  --color-border-emphasis:     #9a9790;

  --color-accent:              #1a1916;
  --color-accent-hover:        #3a3830;

  /* Semantic states */
  --color-success-bg:          #eaf3de;
  --color-success-border:      #639922;
  --color-success-text:        #27500a;

  --color-warning-bg:          #faeeda;
  --color-warning-border:      #ba7517;
  --color-warning-text:        #633806;

  --color-error-bg:            #fcebeb;
  --color-error-border:        #a32d2d;
  --color-error-text:          #501313;

  --color-info-bg:             #e6f1fb;
  --color-info-border:         #185fa5;
  --color-info-text:           #0c447c;

  /* Typography */
  --font-body:                 'Georgia', 'Times New Roman', serif;
  --font-ui:                   system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:                 'Courier New', Courier, monospace;

  --text-xs:                   0.75rem;
  --text-sm:                   0.875rem;
  --text-base:                 1rem;
  --text-md:                   1.125rem;
  --text-lg:                   1.25rem;
  --text-xl:                   1.5rem;
  --text-2xl:                  2rem;
  --text-3xl:                  2.75rem;

  --leading-tight:             1.3;
  --leading-normal:            1.6;
  --leading-loose:             1.8;

  /* Spacing */
  --space-xs:                  0.25rem;
  --space-sm:                  0.5rem;
  --space-md:                  1rem;
  --space-lg:                  1.5rem;
  --space-xl:                  2rem;
  --space-2xl:                 3rem;
  --space-3xl:                 5rem;

  /* Geometry */
  --radius-sm:                 4px;
  --radius-md:                 8px;
  --radius-lg:                 12px;
  --radius-pill:               999px;

  /* Content widths */
  --width-narrow:              45ch;
  --width-reading:             65ch;
  --width-content:             80ch;
  --width-full:                1200px;

  /* Transitions */
  --duration-fast:             120ms;
  --duration-normal:           220ms;
  --easing-default:            ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-page:             #141412;
    --color-bg-surface:          #1e1d1a;
    --color-bg-subtle:           #252420;

    --color-text-primary:        #f0eeea;
    --color-text-secondary:      #a8a59e;
    --color-text-tertiary:       #706e68;
    --color-text-inverted:       #1a1916;

    --color-border-subtle:       #2e2c28;
    --color-border-default:      #3e3c38;
    --color-border-emphasis:     #5e5c58;

    --color-accent:              #e8e5df;
    --color-accent-hover:        #ffffff;

    --color-success-bg:          #0d2205;
    --color-success-border:      #3b6d11;
    --color-success-text:        #c0dd97;

    --color-warning-bg:          #2a1a04;
    --color-warning-border:      #854f0b;
    --color-warning-text:        #fac775;

    --color-error-bg:            #220808;
    --color-error-border:        #791f1f;
    --color-error-text:          #f7c1c1;

    --color-info-bg:             #021828;
    --color-info-border:         #0c447c;
    --color-info-text:           #b5d4f4;
  }
}


/* ─────────────────────────────────────────
   2. RESET & BASE
   ───────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Remove default list styles when inside nav */
nav ol,
nav ul {
  list-style: none;
}

/* Lists inside nav always flow horizontally */
nav ol,
nav ul {
  flex-direction: row;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
}

/* Fluid media by default */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Form elements inherit font */
input,
button,
textarea,
select {
  font: inherit;
}

/* Prevent text overflow */
p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}


/* ─────────────────────────────────────────
   3. STRUCTURE & LAYOUT
   ───────────────────────────────────────── */

/*
 * <body> acts as the root container.
 * Expected structure inside body:
 *   <header>, <nav>, <main>, <aside>, <footer>
 */

body > header {
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  padding: var(--space-md) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  position: sticky;
  top: 0;
  z-index: 100;
}

body > header > nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

main {
  max-width: var(--width-full);
  margin-inline: auto;
  padding: var(--space-2xl) var(--space-xl);
}

/*
 * <article>: self-contained content with its own semantics.
 * Ideal for blog posts, product cards, etc.
 */
article {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  max-width: var(--width-reading);
}

article > header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border-subtle);
  background: transparent;
  border-radius: 0;
  position: static;
}

article + article {
  margin-top: var(--space-xl);
}

/*
 * <section>: thematic grouping of content
 */
section {
  margin-bottom: var(--space-2xl);
}

section > header {
  margin-bottom: var(--space-lg);
  background: transparent;
  border: none;
  padding: 0;
  position: static;
}

/*
 * <aside>: related but tangential content
 */
aside {
  background-color: var(--color-bg-subtle);
  border-left: 3px solid var(--color-border-emphasis);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-block: var(--space-lg);
}

aside > p:first-child {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
  font-size: var(--text-base);
}

/*
 * <footer>
 */
body > footer {
  border-top: 1px solid var(--color-border-subtle);
  padding: var(--space-xl);
  color: var(--color-text-tertiary);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  text-align: center;
}

/*
 * Grid layouts using <section> with data-* attributes.
 * Usage: <section data-layout="grid">
 */
section[data-layout="grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}

section[data-layout="grid"] > header {
  grid-column: 1 / -1;
}

section[data-layout="two-columns"] {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

@media (max-width: 768px) {
  body > header {
    padding: var(--space-md);
    flex-wrap: wrap;
  }

  main {
    padding: var(--space-lg) var(--space-md);
  }

  section[data-layout="two-columns"] {
    grid-template-columns: 1fr;
  }
}


/* ─────────────────────────────────────────
   4. TYPOGRAPHY
   ───────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  font-weight: 700;
}

h1 {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-lg);
}

h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-md);
  margin-top: var(--space-2xl);
}

h3 {
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-md);
  margin-top: var(--space-xl);
}

h4 {
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
  margin-top: var(--space-lg);
}

h5 {
  font-size: var(--text-md);
  font-weight: 600;
  margin-bottom: var(--space-sm);
}

h6 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}

p {
  margin-bottom: var(--space-md);
  max-width: var(--width-reading);
}

p:last-child {
  margin-bottom: 0;
}

/* <strong> and <em> */
strong {
  font-weight: 700;
  color: var(--color-text-primary);
}

em {
  font-style: italic;
}

/*
 * <small>: support text, metadata, footnotes
 */
small {
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  font-family: var(--font-ui);
  display: inline-block;
}

/*
 * <time>: dates and times
 */
time {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
  letter-spacing: 0.02em;
}

/*
 * <address>: contact information
 */
address {
  font-style: normal;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
}

/*
 * <blockquote>: featured quote
 */
blockquote {
  border-left: 3px solid var(--color-text-tertiary);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-xl) 0;
  max-width: var(--width-reading);
}

blockquote > p {
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--color-text-secondary);
  line-height: var(--leading-loose);
}

blockquote > footer {
  border: none;
  padding: 0;
  text-align: left;
  margin-top: var(--space-sm);
  background: transparent;
}

blockquote > footer > cite {
  font-style: normal;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-tertiary);
}

/*
 * <code>, <kbd>, <samp>, <pre>
 */
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
  color: var(--color-text-primary);
}

kbd {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border-default);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  padding: 0.15em 0.5em;
  color: var(--color-text-secondary);
}

pre {
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  overflow-x: auto;
  margin-block: var(--space-lg);
  font-size: var(--text-sm);
  line-height: 1.7;
}

pre > code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
}

/*
 * <mark>: highlighted text / search result
 */
mark {
  background-color: #fef08a;
  color: var(--color-text-primary);
  border-radius: 2px;
  padding: 0 0.2em;
}

@media (prefers-color-scheme: dark) {
  mark {
    background-color: #713f12;
    color: #fef9c3;
  }
}

/*
 * <hr>: thematic break
 */
hr {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin-block: var(--space-2xl);
}

/*
 * <a>: link
 */
a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: opacity var(--duration-fast) var(--easing-default);
}

a:hover {
  opacity: 0.6;
}

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

/*
 * <abbr>: abbreviations
 */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}


/* ─────────────────────────────────────────
   5. NAVIGATION
   ───────────────────────────────────────── */

/*
 * <nav>: primary navigation (inside header).
 * Use <ul> with <li> and <a> for links.
 */
nav > ul {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

nav > ul > li > a {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  transition:
    color var(--duration-fast) var(--easing-default),
    background-color var(--duration-fast) var(--easing-default);
  display: block;
}

nav > ul > li > a:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-subtle);
  opacity: 1;
}

nav > ul > li > a[aria-current="page"] {
  color: var(--color-text-primary);
  font-weight: 600;
  background-color: var(--color-bg-subtle);
}

/*
 * Breadcrumb navigation: <nav aria-label="Breadcrumb">
 * Structure: <ol> with <li> and <a>
 */
nav[aria-label="Breadcrumb"] > ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
}

nav[aria-label="Breadcrumb"] > ol > li {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-tertiary);
}

nav[aria-label="Breadcrumb"] > ol > li + li::before {
  content: "/";
  color: var(--color-text-tertiary);
}

nav[aria-label="Breadcrumb"] > ol > li > a {
  color: var(--color-text-secondary);
  text-decoration: none;
}

nav[aria-label="Breadcrumb"] > ol > li > a:hover {
  color: var(--color-text-primary);
  opacity: 1;
}

nav[aria-label="Breadcrumb"] > ol > li:last-child {
  color: var(--color-text-primary);
  font-weight: 500;
}

/*
 * Pagination: <nav aria-label="Pagination">
 * Structure: <ol> with <li> and <a> or <strong> (current page)
 */
nav[aria-label="Pagination"] > ol {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  font-family: var(--font-ui);
}

nav[aria-label="Pagination"] > ol > li > a,
nav[aria-label="Pagination"] > ol > li > strong {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  text-decoration: none;
  border: 1px solid transparent;
  padding-inline: var(--space-sm);
  transition: all var(--duration-fast) var(--easing-default);
}

nav[aria-label="Pagination"] > ol > li > a {
  color: var(--color-text-secondary);
  border-color: var(--color-border-subtle);
}

nav[aria-label="Pagination"] > ol > li > a:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-subtle);
  border-color: var(--color-border-default);
  opacity: 1;
}

nav[aria-label="Pagination"] > ol > li > strong {
  background-color: var(--color-accent);
  color: var(--color-text-inverted);
  font-weight: 600;
}

@media (prefers-color-scheme: dark) {
  nav[aria-label="Pagination"] > ol > li > strong {
    color: var(--color-bg-page);
  }
}


/* ─────────────────────────────────────────
   6. FORMS
   ───────────────────────────────────────── */

/*
 * <form>: form container
 * <fieldset>: group of related fields
 * <legend>: fieldset title
 * <label>: field label
 * <input>, <textarea>, <select>: input fields
 */

form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: var(--width-narrow);
}

fieldset {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

legend {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  padding-inline: var(--space-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

label {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
}

/* Help text: <small> inside <label> */
label > small {
  font-weight: 400;
  color: var(--color-text-tertiary);
  margin-top: 2px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  transition:
    border-color var(--duration-fast) var(--easing-default),
    box-shadow var(--duration-fast) var(--easing-default);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

input:hover,
textarea:hover,
select:hover {
  border-color: var(--color-border-emphasis);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

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

textarea {
  resize: vertical;
  min-height: 8rem;
  line-height: var(--leading-normal);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%235a5850' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-right: var(--space-2xl);
  cursor: pointer;
}

/* Checkboxes and radios */
label:has(input[type="checkbox"]),
label:has(input[type="radio"]) {
  flex-direction: row;
  align-items: center;
  gap: var(--space-sm);
  font-weight: 400;
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--color-accent);
  margin: 0;
}

/* Submit button */
button[type="submit"],
input[type="submit"] {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-inverted);
  background-color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--easing-default),
    transform var(--duration-fast) var(--easing-default);
  align-self: flex-start;
  outline: none;
}

button[type="submit"]:hover,
input[type="submit"]:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

button[type="submit"]:active,
input[type="submit"]:active {
  transform: scale(0.98);
}

button[type="submit"]:focus-visible,
input[type="submit"]:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent);
}

button[type="reset"] {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-lg);
  cursor: pointer;
  transition: all var(--duration-fast) var(--easing-default);
  outline: none;
}

button[type="reset"]:hover {
  border-color: var(--color-border-emphasis);
  color: var(--color-text-primary);
}

/* Validation states */
input:invalid:not(:placeholder-shown),
textarea:invalid:not(:placeholder-shown) {
  border-color: var(--color-error-border);
}

input:valid:not(:placeholder-shown):required,
textarea:valid:not(:placeholder-shown):required {
  border-color: var(--color-success-border);
}

/* Disabled fields */
input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

@media (prefers-color-scheme: dark) {
  button[type="submit"],
  input[type="submit"] {
    color: var(--color-bg-page);
  }

  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23a8a59e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  }
}


/* ─────────────────────────────────────────
   7. TABLES
   ───────────────────────────────────────── */

/*
 * Standard usage with <table>, <thead>, <tbody>,
 * <tfoot>, <tr>, <th>, <td>, <caption>
 */

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  background-color: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
}

caption {
  caption-side: top;
  text-align: left;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-primary);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border-subtle);
}

thead > tr {
  background-color: var(--color-bg-subtle);
}

th {
  text-align: left;
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
  padding: var(--space-sm) var(--space-lg);
  border-bottom: 1px solid var(--color-border-subtle);
  white-space: nowrap;
}

th[scope="row"] {
  font-size: var(--text-sm);
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-secondary);
  font-weight: 500;
}

td {
  padding: var(--space-sm) var(--space-lg);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

td[data-type="number"],
th[data-type="number"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

td[data-type="status"] {
  text-align: center;
}

tbody > tr:last-child > td {
  border-bottom: none;
}

tbody > tr:hover > td {
  background-color: var(--color-bg-subtle);
}

tfoot > tr > td,
tfoot > tr > th {
  font-weight: 600;
  color: var(--color-text-primary);
  border-top: 2px solid var(--color-border-default);
  background-color: var(--color-bg-subtle);
}

/* Horizontal scroll on mobile */
@media (max-width: 640px) {
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ─────────────────────────────────────────
   8. LISTS
   ───────────────────────────────────────── */

/*
 * <ul>: unordered list
 * <ol>: ordered list
 * <dl>: description list
 * <dt>: term
 * <dd>: definition
 */

ul,
ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

ul {
  list-style-type: disc;
}

ul > li::marker {
  color: var(--color-text-tertiary);
}

ol {
  list-style-type: decimal;
}

ol > li::marker {
  color: var(--color-text-tertiary);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
}

li {
  line-height: var(--leading-normal);
}

/* Nested list */
li > ul,
li > ol {
  margin-top: var(--space-xs);
  margin-bottom: 0;
}

/*
 * <dl>: description list, ideal for metadata,
 * glossaries, product specs, FAQs
 */
dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-xs) var(--space-xl);
  margin-bottom: var(--space-md);
  font-family: var(--font-ui);
}

dt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 2px;
}

dd {
  color: var(--color-text-primary);
  font-size: var(--text-sm);
}

/*
 * <details> and <summary>: native accordion
 */
details {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

summary {
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  padding: var(--space-md) var(--space-lg);
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color var(--duration-fast) var(--easing-default);
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: "+";
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--color-text-tertiary);
  transition: transform var(--duration-normal) var(--easing-default);
}

details[open] > summary::after {
  transform: rotate(45deg);
}

summary:hover {
  background-color: var(--color-bg-subtle);
}

details[open] > summary {
  border-bottom: 1px solid var(--color-border-subtle);
}

details > p,
details > ul,
details > ol {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}


/* ─────────────────────────────────────────
   9. ALERTS & STATES
   ───────────────────────────────────────── */

/*
 * ARIA roles are used to differentiate alert types:
 *
 *   <aside role="status">   → success / confirmation
 *   <aside role="alert">    → error / danger
 *   <aside role="note">     → informational
 *   <aside role="warning">  → warning / caution
 *
 * Each alert may contain:
 *   <strong>: alert title
 *   <p>: message body
 */

aside[role="status"],
aside[role="alert"],
aside[role="note"],
aside[role="warning"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  border-left: none;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  margin-block: var(--space-lg);
}

aside[role="status"] {
  background-color: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success-text);
}

aside[role="alert"] {
  background-color: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text);
}

aside[role="note"] {
  background-color: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  color: var(--color-info-text);
}

aside[role="warning"] {
  background-color: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  color: var(--color-warning-text);
}

aside[role] > strong {
  font-weight: 700;
  display: block;
}

aside[role] > p {
  margin: 0;
  max-width: none;
  color: inherit;
}

/*
 * <meter>: range value indicator (battery, disk usage, etc.)
 * <progress>: task progress bar
 */
meter,
progress {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  border: none;
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--color-bg-subtle);
  overflow: hidden;
  display: block;
}

meter::-webkit-meter-bar,
progress::-webkit-progress-bar {
  background-color: var(--color-bg-subtle);
  border-radius: var(--radius-pill);
}

meter::-webkit-meter-optimum-value,
progress::-webkit-progress-value {
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
  transition: width var(--duration-normal) var(--easing-default);
}

meter::-moz-meter-bar,
progress::-moz-progress-bar {
  background-color: var(--color-accent);
  border-radius: var(--radius-pill);
}


/* ─────────────────────────────────────────
   10. SEMANTIC UTILITIES
   ───────────────────────────────────────── */

/*
 * Support rules that don't belong to a single element
 * but are not utility classes either.
 * They rely on attributes or combinations of elements.
 */

/* Article header: <time> before the heading */
article > header > time {
  display: block;
  margin-bottom: var(--space-xs);
}

article > header > h1,
article > header > h2 {
  margin-top: 0;
  margin-bottom: var(--space-sm);
}

/* Figure with caption: <figure> and <figcaption> */
figure {
  margin: var(--space-xl) 0;
}

figure > img {
  border-radius: var(--radius-md);
  width: 100%;
}

figcaption {
  font-family: var(--font-ui);
  font-size: var(--text-xs);
  color: var(--color-text-tertiary);
  margin-top: var(--space-sm);
  text-align: center;
}

/* Accessibility: screen-reader-only elements */
[aria-hidden="true"] {
  display: none !important;
}

/* Add help cursor to elements with a title attribute */
[title]:not(abbr) {
  cursor: help;
}

/* Highlight focused element */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}