/* ghostwriter tokens
   Everything you are likely to change lives here: faces, roles, pairings, colors, type scale, shape.
   Units are normal rem (1rem = 16px). Colors use light-dark(), which follows the device or the
   Design setting (the scheme-light / scheme-dark class on <html>). */

:root {
    color-scheme: light dark;

    /* Only used if Ghost has no accent color set: Ghost's own value (added after this stylesheet) takes over, and so does a tag's color. */
    --ghost-accent-color: #6b7280;

    /* ---- Font faces: one token per family. Add yours here after adding its @font-face in fonts.css ---- */
    --face-fraunces:    "Fraunces", Georgia, "Times New Roman", serif;
    --face-newsreader:  "Newsreader", Georgia, "Times New Roman", serif;
    --face-petrona:     "Petrona", Georgia, "Times New Roman", serif;
    --face-bona-nova:   "Bona Nova", Georgia, "Times New Roman", serif;
    --face-im-fell:     "IM Fell English", Georgia, "Times New Roman", serif;
    --face-young-serif: "Young Serif", Georgia, "Times New Roman", serif;
    --face-jost:        "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --face-maple-mono:  "Maple Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ---- Roles: what the theme actually uses ----
       title   = site name, post titles, list titles
       heading = headings inside posts
       body    = reading text
       ui      = nav, meta, buttons, labels
       mono    = code
       A pairing sets --pair-heading and --pair-body; title follows heading unless a layer sets it.
       Ghost Admin > Design > Typography can set custom fonts (--gh-font-*), which win over the pairing
       but not over a style: styles set --font-heading and --font-body directly. */
    --pair-heading: var(--face-jost);
    --pair-body:    var(--face-newsreader);

    --font-heading: var(--gh-font-heading, var(--pair-heading));
    --font-title:   var(--font-heading);
    --font-body:    var(--gh-font-body, var(--pair-body));
    --font-ui:      var(--font-body);       /* meta line, captions, labels inside the writing: serif by default, follows the body face */
    --font-chrome:  var(--face-jost);       /* footer, nav, buttons. Styles never change it, so the frame stays the same everywhere */
    --font-mono:    var(--face-maple-mono);

    /* ---- Type scale and weight ---- */
    --text-base: 1.125rem;                     /* Medium. Small and Large are set below */
    --body-scale: 1;                           /* nudge faces with a small x-height up or down */
    --leading-body: 1.65;
    --heading-tracking: -0.015em;
    --heading-leading: 1.15;
    --title-leading: 1.08;

    --heading-weight: 600;                     /* default for every heading below */
    --title-size: clamp(2rem, 0.75rem + 6.2vw, 5rem);   /* about 36px on a phone, 80px on a wide screen */
    --title-weight: var(--heading-weight);
    --list-title-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
    --h2-size: 1.65em;  --h2-weight: var(--heading-weight);
    --h3-size: 1.3em;   --h3-weight: var(--heading-weight);
    --h4-size: 1.1em;   --h4-weight: var(--heading-weight);

    --prose-weight: 400;
    --prose-align: left;                       /* left or justify */
    --prose-hyphens: manual;                   /* manual or auto */
    --strong-weight: 650;
    --chrome-weight: 400;                      /* weight of the frame (post details, footer, subscribe box, tags). Styles never change it */
    --chrome-link-weight: 600;                 /* links inside that frame */
    --link-weight: 600;                        /* links in running text are marked by weight, not underline */

    /* ---- Layout ---- */
    --measure: 40rem;                          /* one width for the header, the text, and everything under it, in every layer */
    --wide-extra: 8rem;                        /* how far wide cards extend past the column, each side */
    --site-width: 72rem;
    --page-gutter: clamp(1.25rem, 5vw, 2.5rem);
    --hero-ratio: 2 / 1;                       /* headers over an image (home, tag, post, page): the whole image is shown at this shape */
    --card-ratio: 2 / 1;                       /* featured cards. Make featured images this shape; social previews use about 1.91:1 */
    --header-top: 1.25rem;                     /* space above the post's author/date line */
    --header-gap: clamp(3.5rem, 9vw, 7rem);    /* space between the post header and the text */
    --meta-gap: clamp(2.25rem, 5vw, 3.5rem);     /* space between the author/date/time block and the title */

    /* ---- Shape ---- */
    --radius-button: 999px;
    --radius-box: 6px;                         /* boxes inside the writing (code, callouts). Styles may change it */
    --radius-chrome: 6px;                      /* subscribe box and the rest of the frame. Styles never change it */

    /* ---- Color ---- */
    --bg:      light-dark(#ffffff, #121212);
    --fg:      light-dark(#1a1a1a, #e9e7e2);
    --muted:   light-dark(#5c5c5c, #a29f98);
    --rule:    light-dark(rgb(0 0 0 / 0.12), rgb(255 255 255 / 0.15));
    --surface: light-dark(rgb(0 0 0 / 0.045), rgb(255 255 255 / 0.07));
    --accent-fill: var(--ghost-accent-color);
    --accent-fill-hover: var(--ghost-accent-color);
    --accent-on: #ffffff;
    --accent-on-hover: #ffffff;
    --accent-ink: var(--ghost-accent-color);   /* the accent as lines, underlines, focus rings and hover text; the palette below makes it readable */
}

/* The default palette is derived from the page's accent color, at fixed lightness so contrast never depends on the accent.
   Browsers without relative color syntax keep the neutral values above. */
@supports (color: oklch(from red l c h)) {
    :root {
        --bg: light-dark(oklch(from var(--ghost-accent-color) 0.962 min(c * 0.6, 0.034) h), oklch(from var(--ghost-accent-color) 0.205 min(c * 0.5, 0.032) h));
        --fg: light-dark(oklch(from var(--ghost-accent-color) 0.24 min(c * 0.3, 0.03) h), oklch(from var(--ghost-accent-color) 0.93 min(c * 0.2, 0.02) h));
        --muted: light-dark(oklch(from var(--ghost-accent-color) 0.47 min(c * 0.3, 0.04) h), oklch(from var(--ghost-accent-color) 0.72 min(c * 0.25, 0.03) h));
        --rule: light-dark(oklch(from var(--ghost-accent-color) 0.862 min(c * 0.6, 0.0357) h), oklch(from var(--ghost-accent-color) 0.335 min(c * 0.5, 0.0336) h));
        --surface: light-dark(oklch(from var(--ghost-accent-color) 0.917 min(c * 0.6, 0.0357) h), oklch(from var(--ghost-accent-color) 0.255 min(c * 0.5, 0.0336) h));
        --accent-ink: light-dark(oklch(from var(--ghost-accent-color) 0.5 min(c, 0.13) h), oklch(from var(--ghost-accent-color) 0.76 min(c, 0.13) h));

        /* Buttons use the accent itself. The label is black or white by true luminance (white below 0.179), the exact point where each reads equally well, so contrast never drops below about 4.6:1. Hover darkens the fill a little. */
        --accent-fill-hover: oklch(from var(--ghost-accent-color) calc(l - 0.07) c h);
        --accent-on: color(from var(--ghost-accent-color) xyz-d65 calc((0.179 - y) * 1000) calc((0.179 - y) * 1000) calc((0.179 - y) * 1000));
        --accent-on-hover: color(from var(--accent-fill-hover) xyz-d65 calc((0.179 - y) * 1000) calc((0.179 - y) * 1000) calc((0.179 - y) * 1000));
    }
}


:root.scheme-light { color-scheme: light; }
:root.scheme-dark  { color-scheme: dark; }

/* ---- Text size (Design setting) ---- */
:root.text-small { --text-base: 1rem; }
:root.text-large { --text-base: 1.25rem; }

/* ============================================================
   FONTS  The three Design settings "Header font", "Body font" and "Interface font" each add one class to <html>.
   Header font: titles and headings (weight and tracking suit each face).  Body font: reading text (size and leading suit each face).
   Interface font: navigation, buttons, forms and the post details block. Styles may still set their own faces.
   Static faces (IM Fell English, Young Serif) have a single weight; asking for bolder text makes the browser thicken the strokes.
   ============================================================ */

.head-bona-nova { --pair-heading: var(--face-bona-nova); --heading-weight: 700; --heading-tracking: 0; }
.head-fraunces { --pair-heading: var(--face-fraunces); --heading-weight: 600; --heading-tracking: -0.015em; }
.head-im-fell { --pair-heading: var(--face-im-fell); --heading-weight: 400; --heading-tracking: 0; }
.head-jost { --pair-heading: var(--face-jost); --heading-weight: 600; --heading-tracking: -0.02em; }
.head-maple-mono { --pair-heading: var(--face-maple-mono); --heading-weight: 700; --heading-tracking: 0; }
.head-newsreader { --pair-heading: var(--face-newsreader); --heading-weight: 500; --heading-tracking: -0.01em; }
.head-petrona { --pair-heading: var(--face-petrona); --heading-weight: 600; --heading-tracking: -0.01em; }
.head-young-serif { --pair-heading: var(--face-young-serif); --heading-weight: 400; --heading-tracking: -0.005em; }

.body-bona-nova {
    --pair-body: var(--face-bona-nova);
}

.body-fraunces {
    --pair-body: var(--face-fraunces);
}

.body-im-fell {
    --pair-body: var(--face-im-fell);
    --body-scale: 1.1;
    --leading-body: 1.6;
}

.body-jost {
    --pair-body: var(--face-jost);
    --body-scale: 0.95;
    --leading-body: 1.7;
}

.body-maple-mono {
    --pair-body: var(--face-maple-mono);
    --body-scale: 0.9;
    --leading-body: 1.6;
}

.body-newsreader {
    --pair-body: var(--face-newsreader);
}

.body-petrona {
    --pair-body: var(--face-petrona);
}

.body-young-serif {
    --pair-body: var(--face-young-serif);
}

.ui-bona-nova { --font-chrome: var(--face-bona-nova); }
.ui-fraunces { --font-chrome: var(--face-fraunces); }
.ui-im-fell { --font-chrome: var(--face-im-fell); }
.ui-jost { --font-chrome: var(--face-jost); }
.ui-maple-mono { --font-chrome: var(--face-maple-mono); }
.ui-newsreader { --font-chrome: var(--face-newsreader); }
.ui-petrona { --font-chrome: var(--face-petrona); }
.ui-young-serif { --font-chrome: var(--face-young-serif); }