@import "fontfaces";

/* 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: "Arvo", sans-serif;
  --font-family-headings: "Secular One", serif;

  --font-size: 18px;
  --text-line-height: 1.5;
  --link-inset-box-shadow: 1.5rem;

  --page-background-image: url(@/assets/layered-waves-light.svg);
  --page-background-image-height: 100vw;
  --page-background-image-max-height: 50vh;

  --paragraph-margin: 1rem;

  --textblock-max-width: 34rem;
  --refimage-max-width: 50rem;

  --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));

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

  --welcome-padding: 2rem var(--container-spacing-right-safe) 2rem
    var(--container-spacing-left-safe);
  --welcome-headings-text-align: center;

  --navigation-flow: row nowrap;
  --navigation-justify: space-evenly;
  --navigation-align: center;
  --navigation-position-top: auto;
  --navigation-position-right: 0;
  --navigation-position-bottom: 0;
  --navigation-position-left: 0;

  --navigation-size: 4rem;
  --navigation-width: 100%;
  --navigation-width-expanded: auto;
  --navigation-height: auto;
  --navigation-padding: 0 0 0 env(safe-area-inset-left);

  --navigation-cutout: 0 0
    calc(var(--navigation-size) + env(safe-area-inset-bottom)) 0;
  --navigation-cutout-page-background: calc(
    var(--navigation-size) + env(safe-area-inset-bottom)
  );
  --navigation-cutout-main: 0;

  --navigation-link-display: none;
  --navigation-link-flex: 1 0 var(--navigation-size);
  --navigation-link-justify: center;
  --navigation-link-height: calc(
    var(--navigation-size) + env(safe-area-inset-bottom)
  );
  --navigation-link-padding: 0 0 env(safe-area-inset-bottom) 0;
  --navigation-link-icon-size: calc(var(--navigation-size) / 2);
  --navigation-link-icon-spacing: calc(var(--navigation-size) * 0.25);
  --navigation-link-text-font-size: 1.5rem;
  --navigation-link-box-shadow: inset 0 calc(var(--navigation-size) * -1) 0 0
    var(--color-router-link);
  --navigation-link-last-child-margin: 0;

  --timeline-max-width: calc(var(--timeline-circle-size) * 15);
  --timeline-circle-size: 4rem;
  --timeline-circle-font-size: calc(var(--timeline-circle-size) * 0.2);
  --timeline-circle-background-color: var(--theme-c-woody-brown);
  --timeline-circle-padding: calc(var(--timeline-circle-font-size));

  --timeline-stroke-thickness: calc(var(--timeline-circle-size) / 16);
  --timeline-stroke-length: calc(100% - var(--timeline-circle-size) + 1.5rem);
  --timeline-stroke-position-top: var(--timeline-circle-size);
  --timeline-stroke-position-horizontal: 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;

  --table-border-radius: 1rem;
  --table-outer-spacing: 0 var(--container-spacing-right-safe) 0
    var(--container-spacing-left-safe);
  --table-cell-padding: 0.25rem 0.5rem;
}

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

  --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-footer-background: var(--theme-c-desert-sand);

  --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);

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

  --timeline-stroke-color: var(--theme-c-dark-grey-blue);
  --timeline-circle-background: var(--theme-c-dark-grey-blue-translucent);
  --timeline-icon-color: var(--theme-c-antique-white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-background-image: url(@/assets/layered-waves-dark.svg);
    --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-footer-background: var(--theme-c-deep-oak);

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

    --timeline-stroke-color: var(--theme-c-crystal-blue);
    --timeline-circle-background: var(--theme-c-crystal-blue-translucent);
    --timeline-icon-color: var(--theme-c-antique-white);
  }
}

@media (min-width: 35em) {
  :root {
    --table-cell-padding: 0.5rem 1rem;
    --font-size: 20px;
  }
}

@media (min-width: 50em) {
  :root {
    --page-background-image-height: 20vw;
    --page-background-image-max-height: 100vh;

    --color-table-color-cell-width: 10rem;
    --textblock-padding: 0 var(--container-spacing-right-safe) 0
      var(--container-spacing-left-safe);

    --navigation-cutout: 0 0 0
      calc(var(--navigation-size) + env(safe-area-inset-left));
    --navigation-cutout-page-background: 0;
    --navigation-cutout-main: var(--navigation-cutout);

    --navigation-flow: column nowrap;
    --navigation-justify: flex-start;
    --navigation-align: stretch;
    --navigation-position-top: 0;
    --navigation-position-right: auto;
    --navigation-position-bottom: 0;
    --navigation-position-left: 0;

    --navigation-width: calc(
      var(--navigation-size) + env(safe-area-inset-left)
    );
    --navigation-width-expanded: var(--navigation-width);

    --navigation-link-display: block;
    --navigation-link-flex: 0 0 --navigation-size;
    --navigation-link-justify: flex-start;
    --navigation-link-height: var(--navigation-size);
    --navigation-link-padding: 0 0 0 env(safe-area-inset-left);
    --navigation-link-box-shadow: inset var(--navigation-width-expanded) 0 0 0
      var(--color-router-link);
    --navigation-link-last-child-margin: auto 0 0 0;

    --table-cell-padding: 0.5rem 1rem;
  }
}

@media (min-width: 55em) {
  :root {
    --welcome-padding: 2rem var(--container-spacing-right-safe) 2rem
      var(--container-spacing-left-safe);
    --welcome-headings-align-items: center;
    --welcome-headings-text-align: left;
  }
}

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

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

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

@media (hover: hover) {
  :root {
    --navigation-width-expanded: calc(
      var(--navigation-size) * 3.75 + env(safe-area-inset-left)
    );
  }
}