@charset "UTF-8";

/* =========================================================
   RONNIE'S HAULING & HOTSHOT
   BASE.CSS

   Purpose:
   Global element defaults only.

   Owns:
   - box-sizing
   - document defaults
   - body defaults
   - element resets
   - typography defaults
   - media defaults
   - form inheritance
   - accessibility baselines

   Does not own:
   - layout selectors
   - component selectors
   - utility selectors
   - header presentation
   - page-specific styling
========================================================= */


/* =========================================================
   BOX MODEL
========================================================= */

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


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

html {
  text-size-adjust:
    100%;

  scroll-behavior:
    var(--scroll-behavior-smooth);
}


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

body {
  margin:
    var(--inset-0);

  background:
    var(--surface-page-bg);

  color:
    var(--fg-primary);

  font-family:
    var(--type-body-font);

  font-size:
    var(--type-body-size);

  font-weight:
    var(--type-body-weight);

  line-height:
    var(--type-body-leading);

  letter-spacing:
    var(--type-body-tracking);

  -webkit-font-smoothing:
    antialiased;

  -moz-osx-font-smoothing:
    grayscale;
}


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

main {
  display:
    block;
}

/* =========================================================
   TYPOGRAPHY FOUNDATION
========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin:
    var(--inset-0);

  color:
    var(--fg-primary);

  font-family:
    var(--font-heading);

  font-weight:
    var(--weight-bold);

  line-height:
    var(--lh-tight);

  letter-spacing:
    var(--track-wide);
}

h1 {
  font-size:
    var(--text-fluid-5xl);
}

h2 {
  font-size:
    var(--text-fluid-4xl);
}

h3 {
  font-size:
    var(--text-fluid-3xl);
}

h4 {
  font-size:
    var(--text-fluid-2xl);
}

h5 {
  font-size:
    var(--text-fluid-xl);
}

h6 {
  font-size:
    var(--text-fluid-lg);
}

p,
blockquote,
figure,
figcaption {
  margin:
    var(--inset-0);
}

small {
  font-family:
    var(--type-body-sm-font);

  font-size:
    var(--type-body-sm-size);

  font-weight:
    var(--type-body-sm-weight);

  line-height:
    var(--type-body-sm-leading);

  letter-spacing:
    var(--type-body-sm-tracking);
}

strong {
  font-weight:
    var(--weight-semibold);
}

em {
  font-style:
    italic;
}


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

ul,
ol {
  margin:
    var(--inset-0);

  padding-inline-start:
    var(--space-6);
}

li {
  margin:
    var(--inset-0);
}


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

a {
  color:
    var(--fg-brand-primary);

  text-decoration:
    var(--decoration-none);

  transition:
    var(--transition-colors);
}

a:hover {
  color:
    var(--brand-primary-hover);
}

a:focus-visible {
  outline:
    none;

  border-radius:
    var(--radius-control-sm);

  box-shadow:
    var(--focus-ring);
}


/* =========================================================
   MEDIA
========================================================= */

img,
picture,
svg,
video,
canvas {
  display:
    block;

  max-width:
    var(--content-full);
}

img {
  height:
    auto;
}

svg {
  fill:
    currentColor;
}

iframe {
  display:
    block;

  max-width:
    var(--content-full);

  border:
    var(--stroke-0);
}


/* =========================================================
   FORM INHERITANCE
========================================================= */

input,
button,
textarea,
select {
  color:
    inherit;

  font:
    inherit;
}

input,
textarea,
select {
  width:
    var(--content-full);

  background:
    var(--input-bg);

  border:
    var(--stroke-control)
    solid
    var(--input-border);

  border-radius:
    var(--radius-input);

  color:
    var(--input-text);

  transition:
    var(--input-transition);
}

input,
select {
  min-height:
    var(--size-input-h);

  padding:
    var(--space-input-y)
    var(--space-input-x);
}

textarea {
  min-height:
    var(--textarea-min-h);

  padding:
    var(--textarea-padding-y)
    var(--textarea-padding-x);

  resize:
    var(--textarea-resize);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline:
    none;

  background:
    var(--input-bg-focus);

  border-color:
    var(--input-border-focus);

  box-shadow:
    var(--input-shadow-focus);
}

button {
  padding:
    var(--inset-0);

  background:
    var(--background-transparent);

  border:
    var(--stroke-0);

  color:
    inherit;

  cursor:
    var(--cursor-pointer);
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  cursor:
    var(--cursor-disabled);
}

label {
  display:
    inline-block;

  color:
    var(--label-text);

  font-family:
    var(--label-font);

  font-size:
    var(--label-size);

  font-weight:
    var(--label-weight);

  line-height:
    var(--label-leading);

  letter-spacing:
    var(--label-tracking);
}


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

table {
  width:
    var(--content-full);

  border-collapse:
    collapse;

  border-spacing:
    var(--inset-0);
}

th,
td {
  text-align:
    left;
}


/* =========================================================
   RULES AND SEPARATORS
========================================================= */

hr {
  margin:
    var(--inset-0);

  border:
    var(--stroke-0);

  border-block-start:
    var(--divider-size-thin)
    solid
    var(--divider-default);
}


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

:focus-visible {
  outline:
    none;

  box-shadow:
    var(--focus-ring);
}


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

::selection {
  background:
    var(--surface-primary-standard);

  color:
    var(--fg-primary);
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      var(--scroll-behavior-reduced);
  }

  a,
  input,
  textarea,
  select {
    transition:
      var(--transition-reduced);
  }

}