/* =================================================================
 * Proof — front-end & editor stylesheet
 *
 * Source-of-truth tokens come from theme.json and surface as
 *   --wp--preset--color--*
 *   --wp--preset--font-size--*
 *   --wp--preset--spacing--*
 *   --wp--preset--font-family--*
 *   --wp--custom--line-height--*
 *   --wp--custom--letter-spacing--*
 *
 * Rule: this file does NOT define hex colors or rem font sizes
 * outside the SVG noise data URL. Everything resolves to a token.
 * Dark mode is a single :root override below.
 * ================================================================= */

:root {
    /* Two insets:
         --mark-inset  : where the registration frame sits — a small, even
                         margin around the page so the frame breathes from
                         every edge (including the scrollbar gutter on the right)
         --anchor-inset: where header/footer/content padding starts (wider) */
    --mark-inset:   clamp(10px, 1.2vw, 14px);
    --anchor-inset: clamp(20px, 3vw, 32px);

    /* Layout columns (mirrors theme.json layout) */
    --col-content: 680px;
    --col-wide:    860px;

    /* Vertical rhythm */
    --rhythm:      1.85;
    --baseline:    0.85rem;

    /* Letter-spacing aliases (also exposed via theme.json custom) */
    --ls-tight:    var(--wp--custom--letter-spacing--tight,   -0.01em);
    --ls-normal:   var(--wp--custom--letter-spacing--normal,   0.01em);
    --ls-wide:     var(--wp--custom--letter-spacing--wide,     0.06em);
    --ls-display:  var(--wp--custom--letter-spacing--display,  0.02em);

    /* Mono stack (used for metadata, nav numbers, code) */
    --font-mono: "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
}

/* =================================================================
 * 1. Dark mode — single override of the 9 color tokens.
 *    Cascades through every component automatically.
 * ================================================================= */
@media (prefers-color-scheme: dark) {
    :root {
        --wp--preset--color--bg:             #15140f;
        --wp--preset--color--bg-elev:        #1c1b16;
        --wp--preset--color--text-primary:   #e8e2d2;
        --wp--preset--color--text-secondary: #a8a193;
        --wp--preset--color--text-muted:     #766f60;
        --wp--preset--color--line:           #2e2b22;
        --wp--preset--color--mark:           #4a463b;
        --wp--preset--color--accent:         #d8a87a;
        --wp--preset--color--accent-strong:  #f0c89a;
    }
}

/* =================================================================
 * 1b. Unify rule colors — derive line + mark from text-primary so
 *     all dividers, hairlines, masthead rules, comment borders, and
 *     registration crosses share ONE ink family at different
 *     opacities, not three unrelated palettes coexisting on the page.
 *
 *     Before: --line was its own warm tan (#dcd5c8) and
 *             --text-primary was warm dark (#1f1d1a). A 1px hairline
 *             next to a 3px masthead rule looked like two different
 *             colors — because they WERE.
 *     After:  both rules sit on a transparent slice of text-primary,
 *             so they feel like the same ink stroked thinner vs
 *             heavier. Mode-flip is automatic because text-primary
 *             itself flips. Authors can still write tokens by name
 *             — only the resolved color changes.
 *
 *     Tier:    0%  ─ paper (bg)
 *              16% ─ line  (hairline, divider)
 *              32% ─ mark  (registration cross, midweight)
 *              100%─ text-primary (heavy publication rule, body type)
 * ================================================================= */
:root {
    --wp--preset--color--line: color-mix(in srgb, var(--wp--preset--color--text-primary) 16%, transparent);
    --wp--preset--color--mark: color-mix(in srgb, var(--wp--preset--color--text-primary) 32%, transparent);
}
@media (prefers-color-scheme: dark) {
    :root {
        --wp--preset--color--line: color-mix(in srgb, var(--wp--preset--color--text-primary) 18%, transparent);
        --wp--preset--color--mark: color-mix(in srgb, var(--wp--preset--color--text-primary) 36%, transparent);
    }
}