/*
 * Design tokens for direction A, "Hyttebogen" (plan.md §13).
 * Token names are semantic, so another theme only has to change the values here.
 * Fonts are OFL, self-hosted from Fontsource (latin subset, covers æøå).
 */

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/zilla-slab-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Zilla Slab";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/zilla-slab-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/karla-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/karla-latin-400-italic.woff2") format("woff2");
}

@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/karla-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/caveat-latin-400-normal.woff2") format("woff2");
}

:root {
  /* Surfaces */
  --dh-bg: #F3EADB;
  --dh-surface: #FFFDF8;
  --dh-border: #D8C9AE;

  /* Text */
  --dh-text: #2A211C;
  --dh-text-muted: #5C4B3B;

  /* Links, icons, primary actions */
  --dh-link: #4F5B2E;
  --dh-link-hover: #3C4622;
  --dh-link-contrast: #FFFDF8;

  /* Header and footer chrome */
  --dh-chrome-text: #F3EADB;
  --dh-chrome-text-muted: #CBB99C;
  --dh-chrome-text-soft: #E9DDC8;
  --dh-chrome-border: #8C7560;
  --dh-accent: #E7B868;
  --dh-accent-text: #2E211A;

  /* "Vigtigt" callouts in pages */
  --dh-callout-bg: #FBF1DC;
  --dh-callout-border: #C9923A;

  /* Form errors (role="alert") */
  --dh-danger: #9B3B2A;
  --dh-danger-bg: #F8E4DD;
  --dh-header-bg:
    repeating-linear-gradient(
      90deg,
      #35271E 0,
      #35271E 46px,
      #1F1611 46px,
      #1F1611 48px,
      #2E211A 48px,
      #2E211A 94px,
      #1F1611 94px,
      #1F1611 96px
    );
  --dh-footer-bg: var(--dh-header-bg);
  --dh-tabbar-bg: #2E211A;

  /* The one strong call to action on paper (the front page's login button) */
  --dh-cta-bg: #2E211A;
  --dh-cta-text: #F3EADB;

  /* Front page: guestbook rules */
  --dh-paper-line: #E6DAC4;

  /* Type */
  --dh-font-body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dh-font-heading: "Zilla Slab", Georgia, "Times New Roman", serif;
  --dh-font-hand: "Caveat", "Bradley Hand", cursive;

  /* Shape */
  --dh-radius: 6px;
  --dh-radius-lg: 10px;
  --dh-shadow: 0 1px 2px rgb(46 33 26 / 8%), 0 4px 14px rgb(46 33 26 / 8%);

  /* Layout */
  --dh-content-width: 640px;
  --dh-wide-width: 1120px;
  --dh-directory-width: 920px;
}