/* Sofna — warm Nordic design tokens (from the component sheet in design/Sofna Mockup.dc.html) */
/* Brandets skrifter (12/10, «Sofna brand.pdf»): ligger på sofna.dk selv, så Google aldrig får de besøgendes IP-adresse.
   Kun latin (dækker dansk, svensk og norsk) og kun de vægte, brandet bruger. Licens: SIL OFL 1.1 (web/fonts/OFL-*.txt). */
@font-face { font-family: 'Young Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/young-serif-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/nunito-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/nunito-sans-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('../fonts/nunito-sans-latin-800-normal.woff2') format('woff2'); }

/* Brandets farver (12/10, designet «Sofna app» og brandguiden). De gamle navne bærer de nye værdier, så alle skærme
   følger med; de nye navne bruges i ny kode. */
:root {
  --havre: #F5EFE6;          /* grund om dagen */
  --nat: #1C1815;            /* tekst om dagen, grund om natten */
  --lygte: #E8A33C;          /* Lygtepunktet, primær knap, afspil — aldrig tekst på Havre */
  --hoer: #E8DED0;           /* linjer og rammer om dagen */
  --lys-flade: #FBF8F3;      /* kort og felter på Havre */
  --sek: #6A5D52;            /* sekundær tekst om dagen (5,57:1 på Havre) */
  --rav: #8A5410;            /* links og fremhævet tekst om dagen (5,47:1) */
  --nat-haevet: #28221D;     /* kort og felter om natten */
  --nat-kant: #3A322B;       /* linjer om natten */
  --nattekst: #EBE2D6;       /* tekst om natten (13,76:1 på Nat) */
  --nattekst-sek: #A89A8A;   /* metadata om natten (6,43:1 på Nat) */
  --gloed: #7A4226;          /* illustration og fremdrift om natten — bærer aldrig alene en oplysning */
  --kobber: #CB7556;         /* kanten om nattens vigtigste knap og mikrofonen (designet 12/10); Lygte er kun Afspil */
  --hvile: #0F0D0B;          /* skærmen under historien */
  /* ground */
  --paper: var(--havre);
  --paper-2: var(--hoer);
  --card: var(--lys-flade);
  --canvas: var(--hoer);
  /* text */
  --ink: var(--nat);
  --mid: var(--sek);
  --muted: var(--sek);
  --soft: var(--nattekst-sek); /* lys tekst på mørk grund */
  /* den ene primære handling pr. skærm */
  --terra: var(--lygte);
  --terra-dark: var(--rav);    /* links og fejltekst */
  --moon: var(--lygte);
  /* borders: --line skiller flader, --line-2 er kanten på det, man kan trykke på (mindst 3:1) */
  --line: var(--hoer);
  --line-2: var(--sek);
  /* type */
  --serif: 'Young Serif', Georgia, 'Times New Roman', serif;   /* kun titler og navne, aldrig under 22 px */
  --sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mono: ui-monospace, Menlo, Monaco, Consolas, monospace;
  /* geometry */
  --phone-w: 390px;
  --phone-h: 844px;
  --r-phone: 44px;
  --r-btn: 999px;
  --r-field: 6px;
  --r-card: 12px;
  --r-flade: 20px;
  --btn-h: 56px;
  --field-h: 52px;
  --gutter: 24px;
  --shadow-phone: 0 2px 14px rgba(28, 24, 21, .08);   /* kun rammen om demoen på en computer */
  --shadow-rec: none;                                  /* brandet bruger ingen skygger */
}
/* Natten (12/10): de samme navne med nattens værdier inde i en mørk skærm. Grunden er Nat, teksten Nattekst. */
.dark, .nat {
  --paper: var(--nattekst);
  --card: var(--nat-haevet);
  --line: var(--nat-kant);
  --line-2: var(--nattekst-sek);
  --mid: var(--nattekst-sek);
  --muted: var(--nattekst-sek);
  --soft: var(--nattekst-sek);
  --terra-dark: var(--lygte);
}

/* Månen ånder ikke længere (4/10, Rabii: lyset skal være det samme, mens historien bliver lavet): ingen sofnaBreathe og
   ingen sofnaRing. */
@keyframes sofnaBar { 0%, 100% { transform: scaleY(.35) } 50% { transform: scaleY(1) } }
@keyframes sofnaFadeIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
@keyframes sofnaSheetIn { from { transform: translateY(40px); opacity: 0 } to { transform: none; opacity: 1 } }