// ============================================================
//  RESET / PREFLIGHT
//  Modern normalization in the spirit of Tailwind's preflight.
//  Every reset rule reads its value from a custom property
//  defined on :root, so themes can override the defaults without
//  touching this file.
// ============================================================

// Defaults for every custom property consumed by the reset rules below.
// Override any of them from your own theme to customize the preflight.
:root {
  --m-reset: 0;                  // default margin for all elements
  --p-reset: 0;                  // default padding for all elements
  --box-sizing: border-box;      // width/height include padding + border
  --bg-repeat: no-repeat;        // default background-repeat
  --bg-position: initial;        // default background-position
  --min-w-reset: auto;           // default min-width for all elements
  --text-size-adjust: 100%;      // disables mobile font-size inflation
  --min-h-screen: 100vh;         // min-height applied to <html>
  --border-default: 0 solid currentColor; // default border shorthand
  --color-scheme: light dark;    // tells the browser which UA styles to use
  --placeholder-color: #9ca3af;  // color of input/textarea ::placeholder
  --root-font-size: 62.5%;       // 10px on a 16px browser → 1rem = 10px
}

// Universal reset: every element and pseudo-element starts with zero
// margin/padding, border-box sizing and no border.
*,
*::before,
*::after {
  margin: var(--m-reset);
  padding: var(--p-reset);
  box-sizing: var(--box-sizing);
  background-repeat: var(--bg-repeat);
  background-position: var(--bg-position);
  min-width: var(--min-w-reset);
  border: var(--border-default);
}

// Root element: sets the rem baseline (10px by default), text scaling,
// min-height, color-scheme and misc UA normalization.
html {
  font-size: var(--root-font-size);
  -webkit-text-size-adjust: var(--text-size-adjust);
  text-size-adjust: var(--text-size-adjust);
  min-height: var(--min-h-screen);
  color-scheme: var(--color-scheme);
  tab-size: 4;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

// Body: full viewport height with a dvh fallback (better on mobile),
// system font stack and smooth text rendering.
body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

// === Base typography ===

// Horizontal rule rendered as a thin top border instead of the
// browser-default double rule; border color follows the text color.
hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

// Abbreviations with a title attribute get a dotted underline.
abbr:where([title]) {
  text-decoration: underline dotted;
}

// Headings inherit font-size/weight so they read as plain text
// until styled explicitly.
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

// Bold text renders one step bolder than the inherited weight.
b, strong {
  font-weight: bolder;
}

// Code-like elements share a monospace stack and a 1em size.
code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1em;
}

// <small> shrinks to 80% of the surrounding text.
small {
  font-size: 80%;
}

// Sub/superscripts: smaller and shifted vertically without
// affecting line height.
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub { bottom: -0.25em; }
sup { top: -0.5em; }

// Tables: remove text indent, inherit border color, collapse cell borders.
table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

// === Media ===

// Block-level, responsive media: never wider than its container.
img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
  vertical-align: middle;
}

// === Forms ===

// Form controls inherit typography and drop default spacing.
input,
button,
textarea,
select,
optgroup {
  font: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

// Undo the uppercase text-transform some UAs apply to these controls.
button,
select {
  text-transform: none;
}

// Buttons render with the native button appearance but no default
// background, letting utilities control their look.
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  appearance: button;
  background-color: transparent;
  background-image: none;
}

// Interactive elements show a pointer cursor.
button,
[role="button"] {
  cursor: pointer;
}

// Disabled controls fall back to the default arrow cursor.
:disabled {
  cursor: default;
}

// Remove Firefox's inner focus border on buttons.
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

// Progress bars align to the text baseline.
progress {
  vertical-align: baseline;
}

// <summary> keeps its disclosure marker and pointer cursor.
summary {
  display: list-item;
  cursor: pointer;
}

// Fieldsets and legends drop their default margin/padding.
fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

// Textareas can only be resized vertically by default.
textarea {
  resize: vertical;
}

// Placeholders are fully opaque and use the --placeholder-color token.
input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: var(--placeholder-color);
}

// WebKit search inputs lose their decoration.
::-webkit-search-decoration {
  -webkit-appearance: none;
}

// File upload buttons inherit the button appearance and typography.
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

// === Lists and links ===

// Lists are stripped of bullets, numbers and default spacing.
ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

// Links inherit the surrounding text color instead of the UA blue.
a {
  color: inherit;
}

// === Preflight helpers ===

// The [hidden] attribute always wins: display none.
[hidden] {
  display: none;
}

// Block-level text containers start with zero margin.
blockquote,
dl,
dd,
figure,
pre {
  margin: 0;
}

// Text blocks wrap long words instead of overflowing their container.
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}