/* Fiagril DS — Base styles + reset + typography + layout */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  font-family: var(--ds-font-family-sans);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  background: var(--ds-color-bg-base);
  color: var(--ds-color-text-primary);
  font-size: var(--ds-font-size-14);
  line-height: var(--ds-line-height-normal);
  transition: background var(--ds-duration-base) var(--ds-easing-standard),
              color var(--ds-duration-base) var(--ds-easing-standard);
}

/* Text primitives */
.ds-display-1 { font-size: var(--ds-font-size-60); line-height: var(--ds-line-height-tight); font-weight: var(--ds-font-weight-semibold); letter-spacing: -0.022em; font-family: var(--ds-font-family-display); }
.ds-display-2 { font-size: var(--ds-font-size-48); line-height: var(--ds-line-height-tight); font-weight: var(--ds-font-weight-semibold); letter-spacing: -0.02em; font-family: var(--ds-font-family-display); }
.ds-h1 { font-size: var(--ds-font-size-36); line-height: var(--ds-line-height-tight); font-weight: var(--ds-font-weight-semibold); letter-spacing: -0.018em; font-family: var(--ds-font-family-display); }
.ds-h2 { font-size: var(--ds-font-size-30); line-height: var(--ds-line-height-snug); font-weight: var(--ds-font-weight-semibold); letter-spacing: -0.016em; font-family: var(--ds-font-family-display); }
.ds-h3 { font-size: var(--ds-font-size-24); line-height: var(--ds-line-height-snug); font-weight: var(--ds-font-weight-semibold); letter-spacing: -0.012em; }
.ds-h4 { font-size: var(--ds-font-size-20); line-height: var(--ds-line-height-snug); font-weight: var(--ds-font-weight-semibold); letter-spacing: -0.008em; }
.ds-h5 { font-size: var(--ds-font-size-16); line-height: var(--ds-line-height-snug); font-weight: var(--ds-font-weight-semibold); }
.ds-body-lg { font-size: var(--ds-font-size-16); line-height: var(--ds-line-height-normal); }
.ds-body    { font-size: var(--ds-font-size-14); line-height: var(--ds-line-height-normal); }
.ds-body-sm { font-size: var(--ds-font-size-13); line-height: var(--ds-line-height-normal); }
.ds-caption { font-size: var(--ds-font-size-12); line-height: var(--ds-line-height-snug); color: var(--ds-color-text-secondary); }
.ds-overline { font-size: var(--ds-font-size-11); line-height: 1; font-weight: var(--ds-font-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-color-text-secondary); }
.ds-code, .ds-mono { font-family: var(--ds-font-family-mono); font-size: var(--ds-font-size-13); }

.ds-muted { color: var(--ds-color-text-secondary); }
.ds-dim { color: var(--ds-color-text-tertiary); }

/* Link */
a { color: var(--ds-color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Utilities */
.ds-stack { display: flex; flex-direction: column; }
.ds-row   { display: flex; flex-direction: row; align-items: center; }
.ds-gap-2 { gap: var(--ds-space-3); }
.ds-gap-3 { gap: var(--ds-space-4); }
.ds-gap-4 { gap: var(--ds-space-5); }
.ds-gap-5 { gap: var(--ds-space-6); }
.ds-gap-6 { gap: var(--ds-space-7); }
.ds-gap-8 { gap: var(--ds-space-8); }

/* Scrollbar (subtle) */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--ds-color-border-default); border-radius: 999px; border: 2px solid var(--ds-color-bg-base); }
*::-webkit-scrollbar-thumb:hover { background: var(--ds-color-border-strong); }

/* Focus */
:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); border-radius: var(--ds-radius-sm); }