@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: local("JetBrainsMono Nerd Font Mono"),
         local("JetBrainsMono Nerd Font"),
         local("JetBrainsMono NFM"),
         local("JetBrainsMono NF"),
         local("JetBrains Mono"),
         url("../fonts/JetBrainsMono.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrainsMono Nerd Font Mono";
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: local("JetBrainsMono Nerd Font Mono"),
         local("JetBrainsMono Nerd Font"),
         local("JetBrainsMono NFM"),
         local("JetBrainsMono NF"),
         local("JetBrains Mono"),
         url("../fonts/JetBrainsMono.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/PlusJakartaSans-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/PlusJakartaSans-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/PlusJakartaSans-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/PlusJakartaSans-Bold.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/PlusJakartaSans-Bold.woff2") format("woff2");
}

:root {
    --hab-font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --hab-font-mono: "JetBrainsMono Nerd Font Mono", "JetBrainsMono Nerd Font", "JetBrainsMono NF", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Cascadia Code", "Segoe UI Mono", monospace;
    --bs-body-font-family: var(--hab-font-sans);
    --bs-font-sans-serif: var(--hab-font-sans);
    --bs-font-monospace: var(--hab-font-mono);
    --hab-text-xs: 0.68rem;
    --hab-text-sm: 0.775rem;
    --hab-text-base: 0.875rem;
    --hab-leading-tight: 1.2;
    --hab-leading-normal: 1.45;
    --hab-tracking-tight: -0.02em;
    --hab-tracking-wide: 0.04em;
}

html,
body {
    font-family: var(--hab-font-sans);
    font-size: 16px;
    line-height: var(--hab-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-optical-sizing: auto;
    font-variant-ligatures: common-ligatures;
    -webkit-text-size-adjust: 100%;
}

.mud-typography,
.mud-input,
.mud-input-control,
.mud-button,
.mud-table,
.mud-select,
.mud-list,
.mud-chip {
    font-family: var(--hab-font-sans);
    font-optical-sizing: auto;
}

h1 {
    font-size: clamp(1.5rem, 4vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: var(--hab-tracking-tight);
    font-weight: 800;
}

h2 {
    font-size: 1.15rem;
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-weight: 700;
}

.mud-typography-h6 {
    letter-spacing: -0.015em;
}

/* Monospace and tabular numeric utility classes */
.font-mono,
.hab-font-mono,
.text-mono,
.numeric-mono {
    font-family: var(--hab-font-mono) !important;
    font-feature-settings: "tnum" 1, "zero" 1;
}

.tabular-nums {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

code,
kbd,
samp,
pre,
var {
    font-family: var(--hab-font-mono);
    font-feature-settings: "tnum" 1, "zero" 1;
}

/* Orphan prevention and wrapping optimization */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/* FocusOnNavigate moves focus to the page heading after navigation.
   Headings are not interactive, so drop the default focus ring. */
h1:focus-visible,
h1:focus {
    outline: none;
}

p, .auth-form-hint, .edit-daily-label-body, .habit-tag-picker__empty {
    text-wrap: pretty;
}