/* Linked first: declares the cascade layers every other stylesheet writes into. */
@layer reset, tokens, base, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: none; text-size-adjust: none; }
  body { min-block-size: 100vh; line-height: 1.5; }
  img, picture, svg { display: block; max-inline-size: 100%; block-size: auto; }
  input, button, textarea, select { font: inherit; }
  p, h1, h2, h3, h4, li, dd, dt, figcaption { overflow-wrap: break-word; }
  table { border-collapse: collapse; }
}

@layer tokens {
  :root {
    /* The CI of www.evang.ro: white page, cream boxes, coral headings, the logo's mosaic colours.
       Coral #ff6a4e is 2.8:1 on white, so it never carries text; headings use a darker red. */
    --color-paper: #ffffff;
    --color-cream: #faede0;         /* evang.ro's sidebar boxes */
    --color-cream-light: #fdf5ee;   /* table stripes, row hover */
    --color-text: #222222;          /* on white 15.9:1, on cream 13.8:1 */
    --color-muted: #5c5450;         /* on white 7.4:1, on cream 6.4:1 */
    --color-heading: #d63a1c;       /* on white 4.7:1; on cream 4.1:1 = large bold only */
    --color-accent: #b5321a;        /* links, buttons: on white 6.1:1, on cream 5.3:1, white on it 6.1:1 */
    --color-accent-dark: #8f2614;   /* hover: on white 8.6:1 */
    --color-coral: #ff6a4e;         /* rules and squares only */
    --color-rule: #ecdccf;          /* decorative lines */
    --color-control: #7a6e66;       /* form control borders: 4.9:1 */
    --color-danger: #a12a22;
    --color-success: #2f6b2f;

    /* The logo's squares, used for the three-square marker after headings */
    --mosaic-pale: #fab69e;
    --mosaic-mid: #f8aeb0;
    --mosaic-strong: #f16237;

    /* evang.ro sets everything in Verdana; long texts read better in Georgia. No web fonts. */
    --font-ui: Verdana, 'DejaVu Sans', 'Bitstream Vera Sans', Geneva, sans-serif;
    --font-text: Georgia, 'Noto Serif', 'DejaVu Serif', serif;

    --step--1: 0.8125rem;
    --step-0: 0.9375rem;
    --step-text: 1.0625rem;
    --step-1: 1.1875rem;
    --step-2: clamp(1.3rem, 1.15rem + 0.6vw, 1.55rem);
    --step-3: clamp(1.55rem, 1.3rem + 1.1vw, 2.1rem);

    --space-xs: 0.25rem;
    --space-s: 0.5rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;
    --measure: 68ch;
    --page-width: 70rem;
    --header-height: 4.5rem;
  }
}

@layer base {
  html { scroll-padding-block-start: var(--space-l); }
  body { font-family: var(--font-ui); font-size: var(--step-0); color: var(--color-text); background: var(--color-paper); }
  h1, h2, h3 { font-family: var(--font-ui); font-weight: 700; line-height: 1.25; color: var(--color-heading); }
  h1 { font-size: var(--step-3); }
  h2 { font-size: var(--step-2); }
  h3 { font-size: var(--step-1); color: var(--color-text); }
  a { color: var(--color-accent); text-underline-offset: 0.15em; }
  a:hover { color: var(--color-accent-dark); }
  :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
  ::selection { background: var(--color-cream); color: var(--color-text); }
  hr { border: 0; border-block-start: 1px solid var(--color-rule); }
  small { font-size: var(--step--1); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .muted { color: var(--color-muted); }
  .wrap { inline-size: min(100% - 2 * var(--space-m), var(--page-width)); margin-inline: auto; }
  .stack > * + * { margin-block-start: var(--space-m); }

  /* Reading text: the editors' descriptions, the home page intro */
  .prose { font-family: var(--font-text); font-size: var(--step-text); line-height: 1.6; }

  /* evang.ro's marker after box headings: three of the logo's squares */
  .squares::after {
    content: ''; display: inline-block; inline-size: 0.5em; block-size: 0.5em; margin-inline: 0.5em 1.2em;
    vertical-align: 0.1em; background: var(--mosaic-pale);
    box-shadow: 0.65em 0 0 var(--mosaic-mid), 1.3em 0 0 var(--mosaic-strong);
  }
}