/* =========================================================
   File: assets/css/base.css
   Project: DumagueteAA QCS Lite
   Version: 0.2.0

   Purpose:
   Document defaults, typography foundation,
   accessibility foundation, and content rhythm.

   No component styling.
   No layout systems.
   No event styling.
   ========================================================= */


/* =========================================================
   01) DOCUMENT DEFAULTS
   ========================================================= */

html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;

  color: var(--daa-text);
  background: var(--daa-bg-page);

  font-family:
    "Segoe UI",
    "Trebuchet MS",
    "Helvetica Neue",
    Arial,
    sans-serif;

  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.7;

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


/* =========================================================
   02) TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 1rem;

  color: var(--daa-text);

  line-height: 1.2;
  font-weight: 700;
}

h1 {
  font-size: 3.5rem;
}

h2 {
  font-size: 2.75rem;
}

h3 {
  font-size: 2rem;
}

h4,
h5,
h6 {
  font-size: 1.25rem;
}

p {
  margin-top: 0;
  margin-bottom: 1.25rem;

  font-size: 1.125rem;
  line-height: 1.7;
}

small {
  color: var(--daa-text-muted);
}


/* =========================================================
   03) LINKS
   ========================================================= */

a {
  color: var(--daa-link);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--daa-link-hover);
}


/* =========================================================
   04) LISTS
   ========================================================= */

ul,
ol {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}


/* =========================================================
   05) TABLES
   ========================================================= */

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

th,
td {
  text-align: left;
}


/* =========================================================
   06) ACCESSIBILITY
   ========================================================= */

:focus-visible {
  outline: 2px solid var(--daa-border-dark);
  outline-offset: 2px;
}


/* =========================================================
   07) SELECTION
   ========================================================= */

::selection {
  background: var(--daa-bg-section);
  color: var(--daa-text);
}