global.css

:root {
  /* Accent Colors */
  --monero-orange: #e2611f;

  /* Text Colors */
  --heading-color: light-dark(#191b23, #f0f0f0);
  --text-primary: light-dark(#2e3038, #c6c6d0);
  --text-secondary: light-dark(#5c5e67, #9a9ba3);
  --paragraph-main: light-dark(#44464e, #c6c6d0);
  --paragraph-subtitle: light-dark(#75767f, #a9aab4);

  /* Surface Colors */
  --bg-color: light-dark(#fff, #171717);
  --card-color: light-dark(#f9f7fc, #211f26);
  --card-hover-color: color-mix(
    in srgb,
    var(--card-color),
    var(--heading-color) 5%
  );
  --footer-color: light-dark(#f0ecf4, #211f26);

  /* Button Colors */
  --secondary-button-color: light-dark(#f0ecf4, #36343b);

  /* Border Colors */
  --border-color: light-dark(#e4e1e9, #36343b);

  /* Border Radius */
  --radius-sm: 0.25rem; /* 4px - tooltips, small elements */
  --radius-md: 0.5rem; /* 8px - cards, buttons (primary) */
  --radius-lg: 0.75rem; /* 12px - large cards, dropdowns, modals */
  --radius-xl: 1rem; /* 16px - hero elements */
  --radius-full: 999px; /* pills, circular */

  /* Shadows */
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 5%);
  --shadow-sm: 0 2px 4px rgb(0 0 0 / 15%);
  --shadow-md: 0 4px 8px rgb(0 0 0 / 20%);
  --shadow-lg: 0 12px 30px rgb(0 0 0 / 35%);

  /* Z-Index */
  --z-dropdown: 10;
  --z-header: 20;
  --z-overlay: 100;
  --z-modal-background: 1000;
  --z-modal-content: 1001;

  /* Spacing */
  --space-2xs: 0.35rem; /* 4px - tight gaps, icon spacing */
  --space-xs: 0.5rem; /* 8px - compact elements, small gaps */
  --space-sm: 0.75rem; /* 12px - list items, form inputs */
  --space-md: 1rem; /* 16px - (primary) standard spacing, card gaps */
  --space-lg: 1.25rem; /* 20px - card padding, medium gaps */
  --space-xl: 1.5rem; /* 24px - section gaps, large padding */
  --space-2xl: 2rem; /* 32px - section margins, page spacing */
  --space-3xl: 2.5rem; /* 40px - large section gaps */
  --space-4xl: 3rem; /* 48px - hero sections, major divisions */

  /* Layout Spacing */
  --page-top-margin: var(--space-2xl);
  --header-height: 4.5rem;
  --anchor-offset: calc(var(--header-height) + var(--space-xs));
  --desktop-padding-inline: 5rem;
  --mobile-padding-inline: var(--space-2xl);

  /* Typography - Font Sizes */
  --font-size-base: 1rem; /* body-base */
  --font-size-xs: 0.75rem; /* extra small text */
  --font-size-sm: 0.875rem; /* small text */
  --font-size-lg: 1.125rem; /* body-lg */
  --font-size-xl: clamp(1.25rem, 2vw, 1.5rem);
  --font-size-2xl: clamp(1.5rem, 3vw, 1.875rem);
  --font-size-3xl: clamp(1.875rem, 4vw, 2.25rem);
  --font-size-4xl: clamp(2.25rem, 5vw, 3rem);
  --font-size-5xl: clamp(3rem, 6vw, 3.75rem);

  /* Typography - Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extra-bold: 800;

  /* Typography - Line Heights */
  --line-height-body: 1.6;
  --line-height-caption: 1.4;
  --line-height-heading: 1.1;
  --line-height-title: 1.2;

  /* Maximum Content Width */
  --content-max-width: 1600px;
}

/* ========================================
   Global HTML Element Styles (do not define classes here!)
   ======================================== */

a {
  color: var(--monero-orange);
  text-decoration: none;
  font-weight: var(--font-weight-medium);

  &:hover {
    text-decoration: underline;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
}

hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: var(--space-2xl) 0;
}

p {
  line-height: var(--line-height-body);
}

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: var(--space-sm) var(--space-md);
  text-align: start;
  vertical-align: middle;
}

th {
  background: var(--card-hover-color);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--heading-color);
}

tbody tr {
  box-shadow: inset 0 -1px 0 var(--border-color);

  &:last-child {
    box-shadow: none;
  }
}

/* ========================================
   Locale-specific styles
   ======================================== */

[lang="ar"] ol,
[lang="fa"] ol,
[lang="ur"] ol {
  list-style-type: arabic-indic;
}

[lang="he"] ol {
  list-style-type: hebrew;
}

/* ========================================
   Third-Party Overrides
   ======================================== */

body,
html {
  /* stylelint-disable-next-line selector-class-pattern */
  .__ns__pop2top {
    z-index: unset !important;
  }
}