/* =====================================================================
   Notion Chat — Base & reset
   ===================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--color-canvas-soft);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "lnum" 1, "locl" 1;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, figure {
    margin: 0;
}

a {
    color: var(--color-primary);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

ul, ol { padding: 0; list-style: none; }

img { max-width: 100%; display: block; }

button, input, textarea, select {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* ---- Typography utilities ---- */
.t-display-1 { font-size: var(--fs-display-1); line-height: var(--lh-display-1); letter-spacing: var(--ls-display-1); font-weight: 700; }
.t-display-2 { font-size: var(--fs-display-2); line-height: var(--lh-display-2); letter-spacing: var(--ls-display-2); font-weight: 700; }
.t-heading-1 { font-size: var(--fs-heading-1); line-height: var(--lh-heading-1); letter-spacing: var(--ls-heading-1); font-weight: 700; }
.t-heading-2 { font-size: var(--fs-heading-2); line-height: var(--lh-heading-2); letter-spacing: var(--ls-heading-2); font-weight: 700; }
.t-heading-3 { font-size: var(--fs-heading-3); line-height: var(--lh-heading-3); letter-spacing: var(--ls-heading-3); font-weight: 700; }
.t-title     { font-size: var(--fs-title);     line-height: var(--lh-title);     letter-spacing: var(--ls-title);     font-weight: 600; }
.t-body-md   { font-size: var(--fs-body-md);   line-height: var(--lh-body-md); }
.t-body-sm   { font-size: var(--fs-body-sm);   line-height: var(--lh-body-sm); }
.t-button    { font-size: var(--fs-button);    line-height: var(--lh-button);    font-weight: 500; }
.t-caption   { font-size: var(--fs-caption);   line-height: var(--lh-caption); }
.t-eyebrow   { font-size: var(--fs-eyebrow);   line-height: var(--lh-eyebrow);   letter-spacing: var(--ls-eyebrow); font-weight: 600; text-transform: uppercase; }

.text-muted   { color: var(--color-ink-muted); }
.text-faint   { color: var(--color-ink-faint); }
.text-charcoal{ color: var(--color-ink-secondary); }
.text-primary { color: var(--color-primary); }

/* ---- Layout helpers ---- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--space-lg);
}