:root {
    --tt-slate: #2f3c46;
    --tt-birch: #8cb428;
    --tt-pine: #1e5032;
    --tt-barberry: #bebe1e;
    --tt-copper: #945f46;
}

@font-face {
    font-family: "Avenir";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("/fonts/AvenirLTStdLight.woff2") format("woff2");
}

@font-face {
    font-family: "Avenir";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/AvenirLTStdBook.woff2") format("woff2");
}

@font-face {
    font-family: "Avenir";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/fonts/AvenirLTStdRoman.woff2") format("woff2");
}

@font-face {
    font-family: "Avenir";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/fonts/AvenirLTStdBlack.woff2") format("woff2");
}

:root {
    --tt-font-ui: "Avenir", "Avenir Next", "Segoe UI", system-ui, -apple-system,
        BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
        "Apple Color Emoji", "Segoe UI Emoji";
    --tt-font-mono: "Cascadia Code", "Fira Code", "SF Mono", ui-monospace, Consolas,
        "Courier New", monospace;

    --tt-text-xs: 0.72rem;
    --tt-text-sm: 0.82rem;
    --tt-text-md: 0.9rem;
    --tt-text-lg: 1rem;
    --tt-text-xl: 1.25rem;
    --tt-text-2xl: 1.6rem;
    --tt-text-display: clamp(1.9rem, 4vw, 2.6rem);

    --tt-radius-sm: 0.5rem;
    --tt-radius-md: 0.75rem;
    --tt-radius-lg: 1rem;
    --tt-radius-xl: 1.5rem;

    --tt-space-1: 0.25rem;
    --tt-space-2: 0.5rem;
    --tt-space-3: 0.75rem;
    --tt-space-4: 1rem;
    --tt-space-6: 1.5rem;
    --tt-space-8: 2rem;

    --tt-max-w: 48rem;
}

:root,
:root[data-appearance="light"] {
    color-scheme: light;

    --tt-surface: #ffffff;
    --tt-surface-1: #f6f8f7;
    --tt-surface-2: #eceff0;
    --tt-surface-3: #e1e6e6;

    --tt-border: rgba(47, 60, 70, 0.12);
    --tt-border-strong: rgba(47, 60, 70, 0.24);

    --tt-text: #2f3c46;
    --tt-text-mute: #5f6c74;
    --tt-text-faint: #8b979d;

    --tt-accent: #8cb428;
    --tt-accent-hover: #7ca31f;
    --tt-accent-text: #5c7a17;
    --tt-accent-soft: rgba(140, 180, 40, 0.14);
    --tt-on-accent: #16210a;

    --tt-success: #1e5032;
    --tt-warning: #bebe1e;
    --tt-danger: #945f46;

    --tt-bubble: #eceff0;
    --tt-code-bg: #eceff0;
    --tt-pre-bg: #f1f4f4;
    --tt-shadow: 0 4px 18px rgba(47, 60, 70, 0.10);
    --tt-shadow-lg: 0 24px 60px rgba(47, 60, 70, 0.18);

    --tt-focus: var(--tt-accent-text);
}

:root[data-appearance="dark"] {
    color-scheme: dark;

    --tt-surface: #12181c;
    --tt-surface-1: #1c2429;
    --tt-surface-2: #262f36;
    --tt-surface-3: #313c44;

    --tt-border: rgba(231, 235, 234, 0.10);
    --tt-border-strong: rgba(231, 235, 234, 0.20);

    --tt-text: #e7ebea;
    --tt-text-mute: #9aa6ab;
    --tt-text-faint: #6f7c82;

    --tt-accent: #8cb428;
    --tt-accent-hover: #9cc436;
    --tt-accent-text: #8cb428;
    --tt-accent-soft: rgba(140, 180, 40, 0.16);
    --tt-on-accent: #16210a;

    --tt-success: #5f9e77;
    --tt-warning: #bebe1e;
    --tt-danger: #c08968;

    --tt-bubble: #262f36;
    --tt-code-bg: rgba(231, 235, 234, 0.09);
    --tt-pre-bg: rgba(0, 0, 0, 0.32);
    --tt-shadow: 0 4px 18px rgba(0, 0, 0, 0.40);
    --tt-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

    --tt-focus: var(--tt-accent-text);
}

:root {
    --tt-cap-nudge: 0.11em;
}

html.tt-appearance-transition,
html.tt-appearance-transition *,
html.tt-appearance-transition *::before,
html.tt-appearance-transition *::after {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease,
        fill 0.18s ease, stroke 0.18s ease !important;
    transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
    html.tt-appearance-transition,
    html.tt-appearance-transition *,
    html.tt-appearance-transition *::before,
    html.tt-appearance-transition *::after {
        transition: none !important;
    }
}

html,
body {
    background-color: var(--tt-surface);
    color: var(--tt-text);
    font-family: var(--tt-font-ui);
}

:focus-visible {
    outline: 2px solid var(--tt-focus);
    outline-offset: 2px;
    border-radius: var(--tt-radius-sm);
}

.icon-only {
    border: none;
    background: transparent;
    color: var(--tt-text);
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--tt-radius-md);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .12s ease;
}

.icon-only:hover {
    background: var(--tt-surface-2);
}

.icon-only .ic {
    width: 1.25rem;
    height: 1.25rem;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:root,
:root[data-appearance="light"],
:root[data-appearance="dark"] {
    --rz-font-family: var(--tt-font-ui);
    --rz-text-font-family: var(--tt-font-ui);
    --bs-font-sans-serif: var(--tt-font-ui);
    --bs-body-font-family: var(--tt-font-ui);

    --rz-primary: var(--tt-slate);
    --rz-primary-light: color-mix(in srgb, var(--tt-slate) 70%, var(--tt-surface));
    --rz-primary-lighter: color-mix(in srgb, var(--tt-slate) 12%, var(--tt-surface));
    --rz-primary-dark: color-mix(in srgb, var(--tt-slate) 85%, #000);
    --rz-primary-darker: color-mix(in srgb, var(--tt-slate) 70%, #000);
    --rz-on-primary: #ffffff;
    --rz-on-primary-lighter: color-mix(in srgb, var(--tt-slate) 85%, transparent);

    --rz-secondary: var(--tt-birch);
    --rz-secondary-light: color-mix(in srgb, var(--tt-birch) 70%, var(--tt-surface));
    --rz-secondary-lighter: color-mix(in srgb, var(--tt-birch) 18%, var(--tt-surface));
    --rz-secondary-dark: color-mix(in srgb, var(--tt-birch) 85%, #000);
    --rz-secondary-darker: color-mix(in srgb, var(--tt-birch) 70%, #000);
    --rz-on-secondary: var(--tt-on-accent);

    --rz-success: var(--tt-success);
    --rz-success-light: color-mix(in srgb, var(--tt-success) 70%, var(--tt-surface));
    --rz-success-lighter: color-mix(in srgb, var(--tt-success) 14%, var(--tt-surface));
    --rz-success-dark: color-mix(in srgb, var(--tt-success) 85%, #000);
    --rz-success-darker: color-mix(in srgb, var(--tt-success) 70%, #000);

    --rz-warning: var(--tt-warning);
    --rz-warning-light: color-mix(in srgb, var(--tt-warning) 70%, var(--tt-surface));
    --rz-warning-lighter: color-mix(in srgb, var(--tt-warning) 14%, var(--tt-surface));
    --rz-warning-dark: color-mix(in srgb, var(--tt-warning) 85%, #000);
    --rz-warning-darker: color-mix(in srgb, var(--tt-warning) 70%, #000);

    --rz-danger: var(--tt-danger);
    --rz-danger-light: color-mix(in srgb, var(--tt-danger) 70%, var(--tt-surface));
    --rz-danger-lighter: color-mix(in srgb, var(--tt-danger) 14%, var(--tt-surface));
    --rz-danger-dark: color-mix(in srgb, var(--tt-danger) 85%, #000);
    --rz-danger-darker: color-mix(in srgb, var(--tt-danger) 70%, #000);

    --rz-link-color: var(--tt-accent-text);

    --rz-sidebar-background-color: var(--tt-surface-1);
    --rz-sidebar-border-inline-end: 1px solid var(--tt-border);
    --rz-panel-menu-item-background-color: var(--tt-surface-1);
    --rz-panel-menu-item-2nd-level-background-color: var(--tt-surface-1);
    --rz-panel-menu-item-hover-background-color: var(--tt-surface-2);
    --rz-panel-menu-item-2nd-level-hover-background-color: var(--tt-surface-2);
    --rz-panel-menu-item-active-background-color: var(--tt-surface-2);
    --rz-panel-menu-item-2nd-level-active-background-color: var(--tt-surface-3);
    --rz-panel-menu-item-color: var(--tt-text);
    --rz-panel-menu-item-active-color: var(--tt-text);
    --rz-panel-menu-item-border: 1px solid var(--tt-border);
    --rz-panel-menu-item-hover-color: var(--tt-text);
    --rz-panel-menu-item-active-indicator: var(--tt-accent);
    --rz-group-header-background-color: var(--tt-surface);

    --rz-menu-top-item-background-color: var(--tt-surface);
    --rz-menu-top-item-hover-background-color: var(--tt-surface-2);
    --rz-menu-top-item-color: var(--tt-text);
    --rz-menu-top-item-icon-color: var(--tt-text);
    --rz-menu-top-item-hover-color: var(--tt-text);
    --rz-menu-top-item-icon-hover-color: var(--tt-text);

    --rz-border-normal: var(--rz-border-width) solid var(--tt-border-strong);
    --rz-header-shadow: unset;

    --rz-sidebar-toggle-padding: 0.89rem;
    --rz-input-placeholder-color: var(--tt-text-mute);
    --rz-input-font-size: 0.8rem;
    --rz-form-field-margin-block: 0;
}