/* ==========================================================================
   global.css — Project element defaults
   Layers on top of OpenProps normalize, which already provides:
     - Box-sizing border-box, margin reset
     - Smooth scrolling, text-size-adjust
     - Font smoothing (antialiased)
     - text-wrap: balance (headings), pretty (p), max-inline-size on p
     - Media elements: display block, max-inline-size 100%, block-size auto
     - Form elements: font/color inherit
     - prefers-reduced-motion reduction

   Load order: open-props → normalize → theme.css → global.css → utils.css → components.css
   ========================================================================== */

/* ==========================================================================
   DOCUMENT
   ========================================================================== */

body {
  font-family: var(--font-body);
  font-size: var(--font-size-1);
  font-weight: var(--font-weight-4);
  line-height: var(--font-lineheight-3);
  color: var(--text-primary);
  background-color: var(--surface-page);
}

/* ==========================================================================
   TYPOGRAPHY — Headings
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-7);
  line-height: var(--font-lineheight-1);
  color: var(--text-primary);
  max-inline-size: unset;
}

p,
li,
dd,
figcaption,
blockquote,
small,
td {
  max-inline-size: unset;
}

h1 { font-size: var(--font-size-fluid-3); }
h2 { font-size: var(--font-size-fluid-2); }
h3 { font-size: var(--font-size-fluid-1); }
h4 { font-size: var(--font-size-3); }
h5 { font-size: var(--font-size-2); }
h6 { font-size: var(--font-size-1); }

/* ==========================================================================
   TYPOGRAPHY — Body text
   ========================================================================== */

b,
strong {
  font-weight: var(--font-weight-7);
}

small {
  font-size: var(--font-size-0);
}

/* ==========================================================================
   LINKS
   ========================================================================== */

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-3);
}

a:hover {
  color: var(--text-link-hover);
  text-decoration: underline;
}

/* ==========================================================================
   LISTS
   ========================================================================== */

ul,
ol {
  padding-inline-start: var(--space-md);
}

li + li {
  margin-block-start: var(--space-3xs);
}

/* ==========================================================================
   TABLES
   ========================================================================== */

table {
  border-collapse: collapse;
  inline-size: 100%;
  font-variant-numeric: tabular-nums;
}

th,
td {
  padding: var(--space-2xs) var(--space-sm);
  text-align: start;
  border-block-end: 1px solid var(--border-default);
}

th {
  font-weight: var(--font-weight-6);
  color: var(--text-secondary);
  font-size: var(--font-size-0);
  text-transform: uppercase;
  letter-spacing: var(--font-letterspacing-3);
}

tbody tr:nth-child(even) {
  background-color: var(--color-gray-50);
}

/* ==========================================================================
   FOCUS
   ========================================================================== */

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ==========================================================================
   SELECTION
   ========================================================================== */

::selection {
  background-color: var(--color-primary);
  color: var(--text-inverse);
}

/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

/* Webkit / Blink */
::-webkit-scrollbar {
  inline-size: 8px;
  block-size: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-gray-100);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary-200);
  border-radius: var(--radius-round);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-400);
}

/* Firefox */
@supports (scrollbar-color: auto) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary-200) var(--color-gray-100);
  }
}

/* ==========================================================================
   MISC
   ========================================================================== */

hr {
  border: none;
  border-block-start: 1px solid var(--border-default);
}

blockquote {
  padding-inline-start: var(--space-md);
  border-inline-start: 3px solid var(--color-primary-200);
  color: var(--text-secondary);
  font-style: italic;
}

code,
pre {
  font-family: var(--font-mono);
  font-size: var(--font-size-0);
}

pre {
  overflow-x: auto;
  padding: var(--space-sm);
  background-color: var(--color-gray-50);
  border-radius: var(--radius-2);
}

mark {
  background-color: var(--color-accent-light);
  color: inherit;
  padding-inline: var(--space-3xs);
  border-radius: var(--radius-1);
}

/* ==========================================================================
   DETAILS / SUMMARY
   ========================================================================== */

details {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-2);
  padding: var(--space-sm);
}

details[open] > summary {
  margin-block-end: var(--space-2xs);
}

summary {
  font-weight: var(--font-weight-6);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

summary::before {
  content: "\203A";
  font-size: var(--font-size-3);
  line-height: 1;
  transition: rotate var(--duration-fast) var(--ease-out-3);
}

details[open] > summary::before {
  rotate: 90deg;
}

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

summary:hover {
  color: var(--text-link);
}

/* ==========================================================================
   FIGURE / FIGCAPTION
   ========================================================================== */

figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
}

figcaption {
  font-size: var(--font-size-0);
  color: var(--text-muted);
  text-align: center;
}