/*
 * Typography system for the whole website (public pages, dashboards, admin, CRM, forms, tables, cards).
 * Every stylesheet uses these tokens instead of its own font sizes, so a change here updates the whole site.
 *
 * Scale: 12 · 13 · 14 · 16 · 18 · 21 · 30 · 34 px
 *   --fs-base  14px  paragraphs, descriptions, inputs, placeholders, buttons, navigation, table cells
 *   --fs-label 13px  form labels, table headers
 *   --fs-h1 / --fs-h2 / --fs-h3  page title, section heading, sub-section heading (same on every page)
 */
:root {
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    --fs-xs: 12px;        /* badges, chips, tiny meta */
    --fs-sm: 13px;        /* secondary text, hints, captions */
    --fs-base: 14px;      /* body, paragraphs, descriptions */
    --fs-md: 16px;        /* card titles, h4 */
    --fs-h3: 18px;
    --fs-h2: 21px;
    --fs-h1: 30px;
    --fs-display: 34px;   /* large figures (stat numbers, prices) */

    --fs-body: var(--fs-base);
    --fs-label: var(--fs-sm);
    --fs-input: var(--fs-base);
    --fs-button: var(--fs-base);
    --fs-nav: var(--fs-base);
    --fs-table: var(--fs-base);
    --fs-th: var(--fs-sm);

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    --lh-tight: 1.2;
    --lh-heading: 1.3;
    --lh-body: 1.6;

    --ls-tight: -0.01em;  /* headings and large figures */
}

@media (max-width: 720px) {
    :root {
        --fs-h1: 24px;
        --fs-h2: 19px;
        --fs-h3: 17px;
        --fs-display: 28px;
    }
}

/* Public website (frontend): section headings (H2) are 30px, same as the page title. Dashboards keep 21px. */
.site-public { --fs-h2: 30px; }
@media (max-width: 720px) {
    .site-public { --fs-h2: 24px; }
}

/* Element defaults. Component styles may change colour and spacing, but sizes come from the tokens above. */
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4, h5, h6 { font-size: var(--fs-md); }
p, li, dd, blockquote, figcaption { font-size: var(--fs-base); }
small { font-size: var(--fs-sm); }
label, legend { font-size: var(--fs-label); font-weight: var(--fw-semibold); }
input, select, textarea, button { font-family: inherit; font-size: var(--fs-input); line-height: var(--lh-body); }
::placeholder { font-size: var(--fs-input); }
th { font-size: var(--fs-th); }
td { font-size: var(--fs-table); }
code, kbd, pre, samp { font-size: var(--fs-sm); }