/*
 * Angelia additions to the Heluca Design System (heluca site theme).
 *
 * base_heluca.html loads this after Themis's tokens, daisyUI 5 and the
 * theme.css bridge. It holds only what those lack for a public website:
 * the page gutter (.heluca-band), long-form reading (.prose), the card
 * surface, tonal gradient bands and muted text. Semantic variables only, never a hex value, so per-site
 * tokens flow through.
 *
 * Every rule sits in the utilities layer behind :where(), so it has zero
 * specificity: any Tailwind or daisyUI class an author adds still wins.
 */

@layer utilities {
    /* The page gutter: one responsive side padding, on Tailwind's sm, lg
       and 2xl breakpoints (px-4 sm:px-8 lg:px-12 2xl:px-16). The navbar,
       the footer and every section carry it, so their edges line up at
       every width. Bands span the viewport; only running text (.prose)
       keeps a measure. */
    :root { --heluca-gutter: 1rem; }

    @media (min-width: 40rem) { :root { --heluca-gutter: 2rem; } }
    @media (min-width: 64rem) { :root { --heluca-gutter: 3rem; } }
    @media (min-width: 96rem) { :root { --heluca-gutter: 4rem; } }

    :where(.heluca-band) { padding-inline: var(--heluca-gutter); }

    /* Long-form reading: Literata at prose size, with the vertical rhythm
       Tailwind's preflight strips from headings, lists and quotes. */
    :where(.prose) {
        max-width: 720px;
        font-family: var(--font-prose);
        font-size: var(--text-prose);
        line-height: var(--lh-prose);
        color: var(--t-text);
    }

    :where(.prose) :where(p, ul, ol, blockquote, pre, figure, table) {
        margin-top: 0;
        margin-bottom: 1.25em;
    }

    :where(.prose) :where(h1, h2, h3) {
        font-family: var(--font-display);
        font-weight: var(--wt-display);
        line-height: var(--lh-heading);
        margin-top: 1.6em;
        margin-bottom: 0.6em;
    }

    :where(.prose) :where(h1) { font-size: var(--text-display-l); }
    :where(.prose) :where(h2) { font-size: var(--text-heading); }
    :where(.prose) :where(h3) { font-size: var(--text-h2); }

    :where(.prose) :where(h4, h5, h6) {
        font-family: var(--font-sans);
        font-size: var(--text-title);
        font-weight: var(--wt-title);
        margin-top: 1.6em;
        margin-bottom: 0.5em;
    }

    :where(.prose) > :where(:first-child) { margin-top: 0; }

    :where(.prose) :where(a) {
        color: var(--color-primary);
        text-decoration: underline;
        text-underline-offset: 0.2em;
    }

    :where(.prose) :where(ul) { list-style: disc; padding-left: 1.5em; }
    :where(.prose) :where(ol) { list-style: decimal; padding-left: 1.5em; }
    :where(.prose) :where(li) { margin-bottom: 0.4em; }

    :where(.prose) :where(blockquote) {
        border-left: 3px solid var(--color-primary);
        padding-left: 1em;
        color: var(--t-text-muted);
        font-style: italic;
    }

    :where(.prose) :where(code) {
        font-size: 0.85em;
        background: var(--t-surface);
        border-radius: var(--radius-input);
        padding: 0.1em 0.35em;
    }

    :where(.prose) :where(pre) {
        font-size: var(--text-mono);
        line-height: var(--lh-mono);
        background: var(--t-surface);
        border: 1px solid var(--t-hairline);
        border-radius: var(--radius-tile);
        padding: var(--space-4);
        overflow-x: auto;
    }

    :where(.prose) :where(pre code) { background: none; padding: 0; font-size: inherit; }

    :where(.prose) :where(img, video) {
        max-width: 100%;
        height: auto;
        border-radius: var(--radius-tile);
    }

    :where(.prose) :where(figcaption) {
        font-family: var(--font-sans);
        font-size: var(--text-caption);
        color: var(--t-text-muted);
        margin-top: var(--space-2);
    }

    :where(.prose) :where(hr) {
        border-color: var(--t-divider);
        margin: 2.5em 0;
    }

    :where(.prose) :where(th, td) {
        border-bottom: 1px solid var(--t-divider);
        padding: var(--space-2) var(--space-3);
        text-align: left;
    }

    :where(.prose) :where(th) {
        font-family: var(--font-sans);
        font-size: var(--text-label);
        font-weight: var(--wt-label);
    }

    /* The DS card: surface fill + 1px hairline, radius 18. Pair with
       daisyUI's .card (<div class="card heluca-surface">). */
    :where(.heluca-surface) {
        background-color: var(--surface-card);
        border: 1px solid var(--t-hairline);
        border-radius: var(--radius-card);
    }

    :where(.heluca-surface-raised) {
        background-color: var(--t-surface-raised);
        border: 1px solid var(--t-hairline);
        border-radius: var(--radius-card);
    }

    /* Tonal gradients, within one hue only: never primary into secondary.
       The primary band reads the daisyUI slots, so a per-site palette
       carries it; the secondary band uses the DS blue pair. */
    :where(.heluca-grad-primary) {
        background-image: linear-gradient(135deg, var(--color-accent), var(--color-primary));
        color: var(--color-primary-content);
    }

    :where(.heluca-grad-secondary) {
        background-image: var(--grad-blue);
        color: var(--color-secondary-content);
    }

    /* Theme-aware amber wash for a selected or featured surface. */
    :where(.heluca-grad-glow) {
        background-image: var(--grad-glow);
    }

    /* The torch glow shadow: active or featured elements only. */
    :where(.heluca-glow-shadow) {
        box-shadow: var(--glow);
    }

    :where(.text-muted) { color: var(--t-text-muted); }
    :where(.text-faint) { color: var(--t-text-faint); }

    /* Phosphor glyphs sit on the text baseline beside a label. */
    :where(.ph, .ph-fill) { vertical-align: -0.125em; }
}

/* A brand with a separate dark-theme logo: base_heluca.html renders both and
   shows the one for the current theme. Outside the utilities layer on
   purpose: these classes are the template's own, never an author's, and
   must beat preflight's img { display: block } whatever the layer order. */
[data-theme='dark'] .heluca-logo-light,
[data-theme='light'] .heluca-logo-dark {
    display: none;
}