/* Explore Sofar - shared design tokens.
   Every other stylesheet in this plugin reads from here.
   Change a font or colour once, and it changes on the landing page,
   the cart drawer, checkout, the account area and the order screen. */

:root {
    /* Typography. The serif carries headings and prices, the sans carries UI. */
    --esf-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", Georgia, serif;
    --esf-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    /* Type scale */
    --esf-fs-eyebrow: 11px;
    --esf-ls-eyebrow: 0.16em;
    --esf-fs-ui: 12px;
    --esf-ls-ui: 0.16em;
    --esf-fs-body: 15px;

    /* Palette */
    --esf-ink: #1c1a17;
    --esf-body: #3a3733;
    --esf-muted: #857f77;
    --esf-line: #e2ddd5;
    --esf-paper: #ffffff;
    --esf-shell: #f7f5f1;
    --esf-shell-hover: #f1eee8;
    --esf-accent: #1c1a17;

    /* Media ratios. Photography is 2:3, guide pages are the PDF page ratio. */
    --esf-ratio-photo: 2 / 3;
    --esf-ratio-page: 877 / 1563;
}

/* Legacy aliases so older markup keeps resolving to the same values. */
:root {
    --esf-c-ink: var(--esf-ink);
    --esf-c-body: var(--esf-body);
    --esf-c-muted: var(--esf-muted);
    --esf-c-line: var(--esf-line);
    --esf-c-paper: var(--esf-paper);
    --esf-c-shell: var(--esf-shell);
    --esf-c-serif: var(--esf-serif);
    --esf-c-sans: var(--esf-sans);
}