@layer config, resets, elements;

@layer config {
  :root {

    /* ── COLORS ─────────────────────────────────────────────────────────── */
    --color-paper:         #F4F0E6;
    --color-ink:           #1A1814;
    --color-ink-mid:       #4A4640;
    --color-ink-muted:     #8A847A;
    --color-rule:          #D8D2C4;
    --color-accent:        #A0442A;
    --color-accent-warm:   #C4562E;
    --color-block-bg:      #EDE8DC;
    --color-block-hover:   #E6E0D2;

    /* ── TYPEFACES ──────────────────────────────────────────────────────── */
    --font-body: 'EB Garamond', Georgia, serif;
    --font-mono: 'Courier Prime', 'Courier New', monospace;

    /* ── TYPE SCALE (traditional point names) ───────────────────────────── */
    --pt-double-canon:        3.5rem;   /* 56px */
    --pt-canon:               2.75rem;  /* 44px */
    --pt-double-great-primer: 2rem;     /* 32px */
    --pt-double-pica:         1.5rem;   /* 24px */
    --pt-paragon:             1.25rem;  /* 20px */
    --pt-english:             1.125rem; /* 18px */
    --pt-pica:                1rem;     /* 16px */
    --pt-small-pica:          0.916rem; /* ~14.5px */
    --pt-long-primer:         0.833rem; /* ~13px */
    --pt-bourgeois:           0.75rem;  /* 12px */
    --pt-minion:              0.625rem; /* 10px */

    /* Aliases */
    --size-xs:   var(--pt-minion);              /* 10px */
    --size-sm:   var(--pt-bourgeois);           /* 12px */
    --size-base: var(--pt-english);             /* 18px */
    --size-md:   var(--pt-paragon);             /* 20px */
    --size-lg:   var(--pt-double-pica);         /* 24px */
    --size-xl:   var(--pt-double-great-primer); /* 32px */
    --size-2xl:  var(--pt-canon);               /* 44px */
    --size-3xl:  var(--pt-double-canon);        /* 56px */

    /* ── LEADING ────────────────────────────────────────────────────────── */
    --leading-tight:  1.2;
    --leading-read:   1.65;
    --leading-loose:  1.85;
    --leading-mono:   1.7;

    /* ── SPACING ────────────────────────────────────────────────────────── */
    --gutter: clamp(1rem, 2.5vmax, 1.5rem);
    --stack:  clamp(1.25ex, 2.5vmax, 1.75ex);
    --gap:    clamp(var(--gutter), 3rem, 48px);

    /* ── LAYOUT ─────────────────────────────────────────────────────────── */
    --measure:             62ch;
    --nav-width:           180px;
    --marginalia-width:    200px;
    --page-max-width:      1280px;
    --page-padding-inline: calc((100vi - min(var(--measure), 80vi)) / 2);

    /* ── PARAGRAPH INDENT ───────────────────────────────────────────────── */
    --paragraph-indent: calc(var(--gutter) / 1.25);

  }
}