/*
 * Oppdragsklubbens kanoniske visuelle profil.
 *
 * Typografi:
 * - Roboto Condensed: hovedoverskrifter, faner, etiketter og menyer
 * - Archivo Black: korte kraftord, stempler og viktige markeringer
 * - Source Sans 3: brødtekst, praktisk informasjon og skjema
 * - Roboto Slab: profiloverskrifter og undertitler
 * - Lora: brev, historier og høytidelige tekster
 * - Caveat: notater, signaturer og personlige hilsener
 *
 * Skriftene lastes ikke fra en ekstern tredjepart. Nettstedets tema bør
 * laste dem lokalt. Reservefonter sørger for at tillegget alltid er lesbart.
 */

.orp-postkasse {
  /* Primærfarger */
  --ok-ratatosk-orange: #d8732b;
  --ok-moss-green: #6a8a5b;
  --ok-forest-green: #2f4e3b;
  --ok-bronze-gold: #b88d2c;

  /* Sekundærfarger */
  --ok-owl-brown: #6b4e2e;
  --ok-leather-brown: #8a5a2b;
  --ok-bark-brown: #4a3624;
  --ok-parchment: #e6d7b8;

  /* Nøytraler */
  --ok-cream-beige: #f2e8d6;
  --ok-warm-stone: #b7b1a3;
  --ok-dark-shadow: #2b241c;

  /* Signal- og støttefarger */
  --ok-signal-green: #4e7c5a;
  --ok-signal-blue: #4a6f8e;
  --ok-golden-ochre: #c7922e;
  --ok-rust-red: #9c4a3a;
  --ok-muted-purple: #6b5a8e;

  /* Typografi */
  --ok-font-heading: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --ok-font-emphasis: "Archivo Black", "Arial Black", Arial, sans-serif;
  --ok-font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
  --ok-font-profile: "Roboto Slab", Rockwell, Georgia, serif;
  --ok-font-story: Lora, Georgia, "Times New Roman", serif;
  --ok-font-handwritten: Caveat, "Segoe Print", "Bradley Hand", cursive;

  --orp-forest: var(--ok-forest-green);
  --orp-forest-dark: #233b2d;
  --orp-moss: var(--ok-moss-green);
  --orp-paper: var(--ok-parchment);
  --orp-paper-deep: var(--ok-cream-beige);
  --orp-ink: var(--ok-dark-shadow);
  --orp-gold: var(--ok-bronze-gold);
  --orp-orange: var(--ok-ratatosk-orange);
  --orp-orange-dark: #a95322;
  --orp-red: var(--ok-rust-red);

  font-family: var(--ok-font-body);
}

.orp-postkasse__shell {
  border-color: rgba(74, 54, 36, 0.28);
  background:
    radial-gradient(circle at 80% 5%, rgba(184, 141, 44, 0.22), transparent 30%),
    linear-gradient(180deg, #fbf5e8 0%, var(--ok-cream-beige) 100%);
}

.orp-postkasse__topbar {
  color: var(--ok-cream-beige);
  background:
    linear-gradient(135deg, #233b2d, var(--ok-forest-green)),
    repeating-linear-gradient(45deg, transparent, transparent 13px, rgba(255,255,255,0.025) 13px, rgba(255,255,255,0.025) 26px);
}

.orp-postkasse__topbar h2 {
  color: var(--ok-cream-beige);
  font-family: var(--ok-font-heading);
  font-weight: 700;
  letter-spacing: 0.025em;
}

.orp-postkasse__eyebrow,
.orp-letter__type {
  color: var(--ok-parchment);
  font-family: var(--ok-font-emphasis);
  font-weight: 400;
  letter-spacing: 0.09em;
}

.orp-stage--code > p,
.orp-code-form label,
.orp-code-form input,
.orp-button,
.orp-sound-toggle,
.orp-envelope-intro,
.orp-envelope-help,
.orp-letter-actions,
.orp-status {
  font-family: var(--ok-font-body);
}

.orp-code-form label {
  color: var(--ok-bark-brown);
}

.orp-button--primary {
  border-color: var(--ok-ratatosk-orange);
  color: var(--ok-dark-shadow);
  background: var(--ok-ratatosk-orange);
}

.orp-button--primary:hover:not(:disabled) {
  border-color: #e18440;
  background: #e18440;
}

.orp-button--secondary {
  border-color: rgba(47, 78, 59, 0.34);
  color: var(--ok-forest-green);
}

.orp-code-form input:focus-visible,
.orp-button:focus-visible,
.orp-sound-toggle:focus-visible,
.orp-envelope-trigger:focus-visible,
.orp-letter__close-tab:focus-visible {
  outline-color: rgba(216, 115, 43, 0.55);
}

.orp-letter__paper {
  color: var(--orp-letter-text-color, var(--ok-dark-shadow));
  background-color: var(--orp-letter-paper-color, var(--ok-parchment));
  font-family: var(--orp-letter-font-family, var(--ok-font-story));
}

.orp-letter__title {
  color: var(--orp-letter-heading-color, var(--ok-forest-green));
  font-family: var(--ok-font-story);
  font-weight: 700;
}

.orp-letter__greeting,
.orp-letter__content {
  font-family: var(--orp-letter-font-family, var(--ok-font-story));
}

.orp-letter__close-tab {
  color: var(--orp-close-tab-text, var(--ok-dark-shadow));
  background-color: var(--orp-close-tab-background, var(--ok-cream-beige));
  font-family: var(--ok-font-body);
}

.orp-letter__closing:not(:empty) {
  border-left-color: var(--ok-bronze-gold);
  color: var(--ok-bark-brown);
  background: rgba(184, 141, 44, 0.14);
  font-family: var(--ok-font-story);
}

.orp-letter__signature {
  color: var(--ok-bark-brown);
  font-family: var(--ok-font-handwritten);
  font-size: 1.35em;
}

.orp-letter__seal {
  color: var(--ok-cream-beige);
  background: var(--ok-rust-red);
  font-family: var(--ok-font-emphasis);
}