/* theme colors */
:root {
  --theme-c-desert-sand: #e7c7b1;
  --theme-c-woody-brown: #493428;
  --theme-c-walnut-brown: #422322;
  --theme-c-deep-oak: #341c1c;
  --theme-c-crystal-blue: #6bb9db;
  --theme-c-antique-white: #f8ebdd;
  --theme-c-jagged-ice: #a7eef1;
  --theme-c-glacier-blue: #6dabd1;
  --theme-c-dark-grey-blue: #2d4c5a;

  --theme-c-white: #ffffff;
  --theme-c-black: #000000;

  --theme-c-desert-sand-translucent: #e7c7b1bf;
  --theme-c-woody-brown-translucent: #493428bf;
  --theme-c-walnut-brown-translucent: #422322bf;
  --theme-c-deep-oak-translucent: #341c1cbf;
  --theme-c-crystal-blue-translucent: #6bb9dbbf;
  --theme-c-antique-white-translucent: #f8ebddbf;
  --theme-c-jagged-ice-translucent: #a7eef1bf;
  --theme-c-glacier-blue-translucent: #6dabd1bf;
  --theme-c-dark-grey-blue-translucent: #2d4c5abf;
  --theme-c-white-translucent: #ffffffbf;
  --theme-c-black-translucent: #000000bf;

  --theme-c-text-light: var(--theme-c-woody-brown);
  --theme-c-text-dark: var(--theme-c-antique-white);
}

/* general purpose variables */
:root {
  --font-family-copy: sans-serif;
  --font-family-headings: serif;

  --font-size: 18px;
  --text-line-height: 1.5em;

  --margin-paragraph: 1rem;

  --container-width-text: 40rem;
  --container-width-images: 40rem;
  --container-width-tables: 40rem;
  --container-width-timeline: calc(var(--timeline-circle-size) * 15);

  --container-spacing-top-safe: max(1rem, env(safe-area-inset-top));
  --container-spacing-right-safe: max(1rem, env(safe-area-inset-right));
  --container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom));
  --container-spacing-left-safe: max(1rem, env(safe-area-inset-left));

  --content-spacing: 0 var(--container-spacing-right-safe) 0
    var(--container-spacing-left-safe);

  --navigation-item-font-size: 1.75rem;
  --navigation-item-line-height: 3.25rem;
  --navigation-width: 100vw;

  --timeline-circle-size: 4rem;
  --timeline-circle-font-size: calc(var(--timeline-circle-size) * 0.2);
  --timeline-circle-background-color: rgba(107, 185, 219, 0.5);
  --timeline-circle-padding: calc(var(--timeline-circle-font-size) * 0.5);

  --timeline-position-top: var(--timeline-circle-size);

  --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
  --timeline-stroke-color: var(--theme-c-crystal-blue);
  --timeline-stroke-border: var(--timeline-stroke-thickness) solid
    var(--timeline-stroke-color);
  --timeline-stroke-length: calc(100% - var(--timeline-circle-size) + 1.5rem);
  --timeline-stroke-position: calc(
    var(--timeline-circle-size) / 2 - var(--timeline-stroke-thickness) / 2
  );

  --timeline-item-margin: 1.5rem 0;
  --timeline-item-margin-odd: 0 0 0 calc(50% - var(--timeline-circle-size) / 2);
  --timeline-item-margin-even: 0 calc(50% - var(--timeline-circle-size) / 2) 0 0;

  --color-table-border-radius: 1rem;
  --color-table-color-cell-width: 10vw;
  --color-table-spacing: 0 var(--container-spacing-right-safe) 0
    var(--container-spacing-left-safe);
}

/* semantic color variables for this project */
:root {
  --color-background: var(--theme-c-antique-white);

  --color-border: var(--theme-c-crystal-blue);

  --color-heading: var(--theme-c-text-light);
  --color-text: var(--theme-c-text-light);
  --color-link-text: var(--theme-c-text-light);
  --color-link-text-hover: var(--theme-c-text-dark);
  --color-link-text-underline: var(--theme-c-text-light);

  --color-header-bar: var(--theme-c-deep-oak-translucent);
  --color-header-bar-title: var(--theme-c-white);

  --color-navigation-toggle: var(--theme-c-antique-white);
  --color-navigation-background: var(--theme-c-walnut-brown);
  --color-router-link: var(--theme-c-antique-white);
  --color-router-link-hover: var(--theme-c-walnut-brown);
  --color-router-link-active: var(--theme-c-crystal-blue);

  --color-table-row-hover: var(--theme-c-walnut-brown);
  --color-table-heading-background: var(--theme-c-dark-grey-blue);
  --color-table-heading-text-color: var(--theme-c-text-dark);
  --color-table-cell-background: var(--theme-c-desert-sand);
  --color-table-cell-text-color: var(--theme-c-text-light);
  --color-table-cell-text-color-hover: var(--theme-c-text-dark);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: var(--theme-c-dark-grey-blue);

    --color-border: var(--theme-c-desert-sand);

    --color-heading: var(--theme-c-text-dark);
    --color-text: var(--theme-c-text-dark);
    --color-link-text: var(--theme-c-text-dark);
    --color-link-text-hover: var(--theme-c-text-light);
    --color-link-text-underline: var(--theme-c-text-dark);

    --color-table-row-hover: var(--theme-c-walnut-brown);
    --color-table-heading-background: var(--theme-c-deep-oak);
    --color-table-heading-text-color: var(--theme-c-text-dark);
    --color-table-cell-background: var(--theme-c-woody-brown);
    --color-table-cell-text-color: var(--theme-c-text-dark);
    --color-table-cell-text-color-hover: var(--theme-c-text-dark);
  }
}

@media (min-width: 45em) {
  :root {
    --font-size: 20px;
    --navigation-width: 20rem;
    --color-table-color-cell-width: 10rem;
    --content-spacing: auto;
    --color-table-spacing: 0;
  }
}

@media (min-width: 64em) {
  :root {
    --font-size: 24px;
    --timeline-stroke-length: calc(100% - var(--timeline-circle-size));
  }
}

@media (min-width: 125em) {
  :root {
    --font-size: 24px;
  }
}