/*
 * site-tokens.css — the type layer of the design tokens for the site's own
 * pages: front page, /me/, /posts/, permalinks, 404, 410 and the test pages (ADR 0007, 0008,
 * docs/design/site.md). Loaded after tokens.css and before style.css by
 * base.njk (block siteStyles). Never loaded together with longread-tokens.css,
 * so both type files may use the same token names with their own values.
 *
 * Dark only, for now (ADR 0007 pkt. 2): the dark values sit directly on :root,
 * without the theme selectors of tokens.css. The type layer wins over the base
 * layer whatever the system theme, so the light defaults in tokens.css never
 * apply here. A light theme later gets the selectors from ADR 0005.
 *
 * Rules as for every token file (ADR 0006, scripts/check.js): starts with the
 * layer order, everything in @layer type, each token once per context, no
 * !important.
 */

@layer base, type;

@layer type {
  :root {
    /* Colour: the longread's dark base values (tavle Accent / designsystem Longread) */
    --paper: #0F1622;                          /* page background */
    --ink: #DCE3EB;                            /* body text, link text, page title */
    --muted: #97A3B4;                          /* site description, top bar, footer, dates */
    --rule: #243247;                           /* footer rule, pill and update borders */
    --card: #182230;                           /* code background, project cards */
    --card-hover: #1D2939;                     /* project card on hover/focus-within (runde 2, PR C) */
    --selection: #1D364C;                      /* ::selection background */
    --field: #0F1622;                          /* input background (test pages) */
    --field-rule: #5A6A80;                     /* field border, ≥ 3:1 against --field */
    --img-filter: brightness(.86);
    --img-filter-hover: brightness(.94);       /* project cover on hover/focus-within (runde 2, PR C) */
    color-scheme: dark;

    /* Accent: amber, only focus ring now and projects later (threads 3fa800f3, 89a41506) */
    --accent: #E7B464;

    /* Links: hybrid C/B (thread 98adf31f). Text is --ink; the underline carries the link. */
    --link-rule: #5A6A80;                      /* underline at rest, 1px; 3.3:1 against --paper */
    --link-hover: #7295CA;                     /* underline on hover/focus, 2px; pill border on hover */

    /* Wave mark in the top bar (tavle Bølgemærket) */
    --wave: #4A76AB;
    /* Wave rule between posts on the front page (thread 9d4f2190); decorative */
    --wave-rule: #34465F;

    /* Rhythm and layout (mobile first; 768px below) */
    --line: 28px;                              /* body line height; vertical spaces are whole or half lines */
    --half: 14px;
    --measure: 660px;                          /* text column */
    --gutter: 16px;                            /* page side padding */
    --bar: 56px;                               /* top bar min-height (thread d5f89a02) */
  }

  @media (min-width: 768px) {
    :root { --line: 30px; --half: 15px; --gutter: 32px; }
  }

  /* Project cards (ADR 0008, PR #46 §6/§12): the rest underline needs 3:1 against
     --card too (#5A6A80 gives 2.91), and hover inside projects is amber. Scoped
     here so style.css keeps defining no tokens and the site's value stays. */
  .post--project {
    --link-rule: #66768C;                      /* 3.46:1 against --card, 3.58:1 against --ink */
    --link-hover: var(--accent);
  }
}