/* ══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY SYSTEM — one scale for the whole signed-in app
   Loaded last in resources/views/user/layout.blade.php.

   WHY THE sizes ARE DIVIDED BY --vzoom
   The dashboard renders inside `html { zoom: .9 }` (assets/shared_assets/
   zoom.css), so a 14px rule paints at 12.6px — which is what made the UI read
   as "too small" even though the CSS said 14. Every token below is stated at
   the size it should PAINT and divided by the zoom in force, so 14.5px is
   14.5px on the dashboard (zoom .9) and on the chat page (zoom 1, which opts
   out in chat.blade.php). Change a number here and it is a visual change, not
   a coordinate-space one.

   HOW TO USE IT
   Reach for a token, never a raw px: --ty-body for prose and controls,
   --ty-meta for timestamps/captions, --ty-h1..h4 for headings. Colour comes
   from --ty-ink (primary), --ty-ink-strong (headings), --ty-ink-2 (secondary)
   and --ty-ink-muted (least important) — all four flip with the theme, so a
   component never needs its own dark-mode colour rule.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    --ty-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --ty-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

    /* The zoom in force. zoom.css sets .9 for the dashboard; the chat page
       resets it to 1. Falls back to 1 anywhere the variable is missing. */
    --ty-zoom: var(--vzoom, 1);

    /* Scale — the value is what the reader actually sees. */
    --ty-body:    calc(14.5px / var(--ty-zoom));
    --ty-body-sm: calc(13.5px / var(--ty-zoom));
    --ty-label:   calc(13px   / var(--ty-zoom));
    --ty-meta:    calc(12.5px / var(--ty-zoom));
    --ty-btn:     calc(13.5px / var(--ty-zoom));
    --ty-code:    calc(13px   / var(--ty-zoom));
    --ty-h1:      calc(20px   / var(--ty-zoom));
    --ty-h2:      calc(18px   / var(--ty-zoom));
    --ty-h3:      calc(16px   / var(--ty-zoom));
    --ty-h4:      calc(15px   / var(--ty-zoom));

    /* Line height: prose breathes, headings sit tight. */
    --ty-lh: 1.6;
    --ty-lh-snug: 1.45;
    --ty-lh-heading: 1.3;

    /* Weights — hierarchy is carried by weight and colour, not by shouting. */
    --ty-w-body: 400;
    --ty-w-medium: 500;
    --ty-w-semi: 600;

    /* Rhythm */
    --ty-gap-p:  calc(12px / var(--ty-zoom));
    --ty-gap-li: calc(7px  / var(--ty-zoom));
    --ty-gap-h:  calc(22px / var(--ty-zoom));

    /* Ink — light theme */
    --ty-ink: #1f2328;
    --ty-ink-strong: #0f1216;
    --ty-ink-2: #5a626d;
    --ty-ink-muted: #858d98;
    --ty-rule: rgba(15, 18, 22, .10);
    --ty-code-bg: rgba(15, 18, 22, .05);
}

/* Ink — dark theme. Deliberately short of pure white: #F3F4F6 for headings,
   #E5E7EB for body, and two greys below it for supporting text. */
[data-background-color="dark"],
html[data-background-color="dark"] body {
    --ty-ink: #E5E7EB;
    --ty-ink-strong: #F3F4F6;
    --ty-ink-2: #A1A1AA;
    --ty-ink-muted: #71717A;
    --ty-rule: rgba(243, 244, 246, .10);
    --ty-code-bg: rgba(243, 244, 246, .07);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body {
    font-family: var(--ty-font);
    font-size: var(--ty-body);
    font-weight: var(--ty-w-body);
    line-height: var(--ty-lh);
    color: var(--ty-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Headings ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.page-title, .card-title, .section-title {
    font-family: var(--ty-font);
    font-weight: var(--ty-w-semi);
    line-height: var(--ty-lh-heading);
    color: var(--ty-ink-strong);
    letter-spacing: -0.01em;
}
h1, .page-title { font-size: var(--ty-h1); }
h2             { font-size: var(--ty-h2); }
h3, .card-title, .section-title { font-size: var(--ty-h3); }
h4             { font-size: var(--ty-h4); }
h5             { font-size: var(--ty-label); }
h6             { font-size: var(--ty-meta); color: var(--ty-ink-2); letter-spacing: 0.01em; }

/* Space above a heading, less below it — the heading belongs to what follows. */
h1, h2, h3, h4, h5, h6 { margin-top: var(--ty-gap-h); margin-bottom: calc(var(--ty-gap-p) * .7); }
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child { margin-top: 0; }

/* ── Prose ─────────────────────────────────────────────────────────────── */
p:not([class*="vai"]) { margin: 0 0 var(--ty-gap-p); line-height: var(--ty-lh); }
p:last-child { margin-bottom: 0; }

ul, ol { padding-left: calc(20px / var(--ty-zoom)); margin: 0 0 var(--ty-gap-p); }
li { line-height: var(--ty-lh); }
li + li { margin-top: var(--ty-gap-li); }
li > ul, li > ol { margin-top: var(--ty-gap-li); margin-bottom: 0; }
/* Navigations and menus are lists too — they keep their own rhythm. */
nav ul, nav ol, .nav li + li, .navbar li + li, .dropdown-menu li + li,
.pagination li + li, .breadcrumb li + li { margin-top: 0; }
nav ul, nav ol { padding-left: 0; }

/* ── Supporting text ───────────────────────────────────────────────────── */
/* Everything from here down skips `vai`-classed elements: the chat surface
   sizes its own controls, and a base size landing on an unstyled chat button
   was enough to wrap the composer's mode pills onto a second row. */
small:not([class*="vai"]), .small:not([class*="vai"]), .text-muted:not([class*="vai"]),
.card-category, .form-text, .help-block, figcaption {
    font-size: var(--ty-meta);
    line-height: var(--ty-lh-snug);
    color: var(--ty-ink-2);
}
.text-muted, .form-text, .help-block { color: var(--ty-ink-2); }

label:not([class*="vai"]), .form-label, .control-label {
    font-size: var(--ty-label);
    font-weight: var(--ty-w-medium);
    line-height: var(--ty-lh-snug);
    color: var(--ty-ink-2);
}

/* ── Controls ──────────────────────────────────────────────────────────── */
.btn:not([class*="vai"]), button:not([class*="vai"]),
[type="button"]:not([class*="vai"]), [type="submit"]:not([class*="vai"]),
[type="reset"]:not([class*="vai"]) {
    font-family: var(--ty-font);
    font-size: var(--ty-btn);
    font-weight: var(--ty-w-medium);
    line-height: var(--ty-lh-snug);
    letter-spacing: 0;
}
input:not([class*="vai"]), select:not([class*="vai"]),
textarea:not([class*="vai"]), .form-control:not([class*="vai"]) {
    font-family: var(--ty-font);
    font-size: var(--ty-body);
    line-height: var(--ty-lh-snug);
}
::placeholder { color: var(--ty-ink-muted); }

/* ── Tables ────────────────────────────────────────────────────────────── */
table:not([class*="vai"]) { font-size: var(--ty-body-sm); }
th:not([class*="vai"]) {
    font-size: var(--ty-meta);
    font-weight: var(--ty-w-semi);
    line-height: var(--ty-lh-snug);
    color: var(--ty-ink-2);
    letter-spacing: 0.01em;
}
td:not([class*="vai"]) { line-height: var(--ty-lh-snug); color: var(--ty-ink); }

/* ── Code and technical output — always distinct from prose ────────────── */
code, kbd, samp, pre, .code {
    font-family: var(--ty-mono);
    font-size: var(--ty-code);
    font-variant-ligatures: none;
}
:not(pre) > code {
    background: var(--ty-code-bg);
    border-radius: calc(5px / var(--ty-zoom));
    padding: 0.12em 0.38em;
    color: var(--ty-ink-strong);
}
pre { line-height: 1.55; }

/* ── Links — the brand accent already in use, nothing new ──────────────── */
a { text-decoration-thickness: from-font; text-underline-offset: 0.18em; }

/* ── Small screens ─────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    :root {
        --ty-h1: calc(19px / var(--ty-zoom));
        --ty-h2: calc(17px / var(--ty-zoom));
        --ty-gap-h: calc(18px / var(--ty-zoom));
    }
    /* Phones already render the shell at 100%; the body size stays put so
       lines do not get shorter than about 45 characters. */
}

/* ══════════════════════════════════════════════════════════════════════════
   THE SCALE, ENFORCED ON THE APP SHELL

   The base rules above only reach elements no other stylesheet has an opinion
   about — and across this app most pages ship their own px (a 26px title
   here, a 9.5px badge there, `small` at 80% from Bootstrap). These rules put
   those back on the scale inside `.main-panel` and the sidebar, which is the
   signed-in chrome every page renders into.

   Scoped deliberately:
   · `.main-panel` / `.wix-sidebar` only — the marketing site and the framed
     marketplace keep their own type.
   · `:not([class*="vai"])` everywhere — the chat surface owns its reading
     typography (the unified block in vai-chat.css) and must not be touched.
   ══════════════════════════════════════════════════════════════════════════ */

.main-panel :is(h1, [class*="page-title"]):not([class*="vai"]) {
    font-size: var(--ty-h1) !important;
    font-weight: var(--ty-w-semi) !important;
    line-height: var(--ty-lh-heading) !important;
    color: var(--ty-ink-strong) !important;
}
.main-panel h2:not([class*="vai"]) {
    font-size: var(--ty-h2) !important;
    font-weight: var(--ty-w-semi) !important;
    line-height: var(--ty-lh-heading) !important;
}
.main-panel :is(h3, .card-title, [class*="section-title"]):not([class*="vai"]) {
    font-size: var(--ty-h3) !important;
    font-weight: var(--ty-w-semi) !important;
    line-height: var(--ty-lh-heading) !important;
}
.main-panel h4:not([class*="vai"]) {
    font-size: var(--ty-h4) !important;
    font-weight: var(--ty-w-semi) !important;
}
.main-panel :is(h5, h6):not([class*="vai"]) {
    font-size: var(--ty-label) !important;
    font-weight: var(--ty-w-semi) !important;
    letter-spacing: 0.01em !important;
}

/* Supporting text: one size for captions, hints and timestamps, and a colour
   that says "secondary" instead of a lighter weight of the same white. */
.main-panel :is(small, .small, .text-muted, .card-category, .form-text, .help-block,
                figcaption, .breadcrumb, .pagination):not([class*="vai"]) {
    font-size: var(--ty-meta) !important;
    line-height: var(--ty-lh-snug) !important;
}
.main-panel :is(.text-muted, .card-category, .form-text, .help-block, figcaption):not([class*="vai"]) {
    color: var(--ty-ink-2) !important;
}

/* Body copy and lists. Kept at the scale rather than each page's own guess,
   with the line-height that makes long passages readable. */
.main-panel :is(p, li, dd, dt, .form-control, input, select, textarea):not([class*="vai"]) {
    font-size: var(--ty-body);
    line-height: var(--ty-lh);
}
.main-panel :is(td, .table td):not([class*="vai"]) { font-size: var(--ty-body-sm); }
.main-panel :is(th, .table th):not([class*="vai"]) { font-size: var(--ty-meta); color: var(--ty-ink-2); }

/* Buttons and labels sit just under body size, medium weight — legible
   without competing with the content they act on. */
.main-panel :is(.btn, button, [type="submit"], [type="button"]):not([class*="vai"]) {
    font-size: var(--ty-btn) !important;
    font-weight: var(--ty-w-medium) !important;
    letter-spacing: 0 !important;
}
.main-panel :is(label, .form-label, .control-label):not([class*="vai"]) {
    font-size: var(--ty-label) !important;
    font-weight: var(--ty-w-medium) !important;
    color: var(--ty-ink-2) !important;
}

/* The page footer is metadata, not content. */
.main-panel :is(footer, .footer, [class*="copyright"]):not([class*="vai"]),
.main-panel :is(footer, .footer) :is(p, div, span):not([class*="vai"]) {
    font-size: var(--ty-meta) !important;
    font-weight: var(--ty-w-body) !important;
    color: var(--ty-ink-2) !important;
}

/* Nothing in the shell drops below 12px: the app QR badge and the sidebar's
   own captions were rendering at 9–11px, which is where "dense and tiring"
   starts. */
.wix-sidebar :is(small, .small, [class*="badge"] small) { font-size: var(--ty-meta) !important; }
.wix-appqr__badge small { font-size: var(--ty-meta) !important; line-height: var(--ty-lh-snug) !important; }

/* The chat shell keeps a 14px inherited base. Its composer, mode pills and
   rails are laid out against that number, and half a pixel of inherited
   growth was enough to wrap the pill row onto a second line. Reply prose is
   untouched either way — it sets its own size in vai-chat.css. */
.vai { font-size: 14px; }