@font-face {
    font-family: 'Montserrat';
    src: url('/fonts/Montserrat-Variable.woff2') format('woff2-variations'),
         url('/fonts/Montserrat-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --tb-font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --tb-color-ink: #1f1f1f;
    --tb-color-ink-soft: #404040;
    --tb-color-muted: #737373;
    --tb-color-disabled: #a3a3a3;
    --tb-color-line: #e8e8e8;
    --tb-color-line-strong: #d4d4d4;
    --tb-color-canvas: #fafafa;
    --tb-color-canvas-warm: #f8fbfa;
    --tb-color-surface: #ffffff;
    --tb-color-surface-soft: #f4f4f4;

    --tb-color-primary: #55c3b6;
    --tb-color-primary-dark: #2c8f7c;
    --tb-color-primary-deep: #1c7a6e;
    --tb-color-primary-soft: #d4f5ee;
    --tb-color-primary-faint: rgba(85, 195, 182, 0.12);

    --tb-color-shell: #252a29;
    --tb-color-shell-deep: #111514;
    --tb-color-shell-muted: rgba(232, 241, 240, 0.7);

    --tb-color-success: #2f9e64;
    --tb-color-warning: #c0842a;
    --tb-color-error: #dc4e4e;
    --tb-color-info: #4ba99c;

    --tb-radius-xs: 8px;
    --tb-radius-sm: 12px;
    --tb-radius-md: 18px;
    --tb-radius-lg: 28px;
    --tb-radius-xl: 40px;
    --tb-radius-pill: 999px;

    --tb-shadow-surface: 0 18px 55px -34px rgba(17, 21, 20, 0.28);
    --tb-shadow-raised: 0 22px 70px -42px rgba(17, 21, 20, 0.32);
    --tb-shadow-teal: 0 12px 42px rgba(85, 195, 182, 0.22);

    --tb-shell-expanded: 296px;
    --tb-shell-mini: 84px;
    --tb-content-max: 1600px;

    --tb-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}