/* =====================================================================
   PRINTINGLIFE — DESIGN FOUNDATION
   Shared design tokens. Components and page styles consume these values
   instead of defining their own colors, typography and spacing rules.
   ===================================================================== */

:root {
    --pl-brand: #fe2e46;
    --pl-brand-dark: #e61e36;
    --pl-ink: #41496d;
    --pl-ink-soft: #5a6180;
    --pl-text: #1e293b;
    --pl-muted: #64748b;
    --pl-line: #e8eaf0;
    --pl-line-soft: #f1f3f7;
    --pl-bg: #ffffff;
    --pl-bg-soft: #f8fafc;
    --pl-bg-tint: #fff5f6;

    --pl-radius-sm: 6px;
    --pl-radius-md: 10px;
    --pl-radius-lg: 14px;
    --pl-radius-pill: 999px;

    --pl-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
    --pl-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 16px rgba(15, 23, 42, 0.06);
    --pl-shadow-pop: 0 8px 28px rgba(15, 23, 42, 0.12);

    --pl-header-top-h: 40px;
    --pl-header-main-h: 80px;
    --pl-mobile-header-main-h: 64px;
    --pl-mobile-header-tools-h: 58px;

    --pl-page-px: 4rem;
}

/* Typography utilities are assigned explicitly in EJS templates. */
.pl-verdana {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.pl-system {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.pl-georgia {
    font-family: Georgia, "Times New Roman", serif;
}

@media (max-width: 960px) {
    :root { --pl-page-px: 2rem; }
}

@media (max-width: 640px) {
    :root { --pl-page-px: 1rem; }
}