@import './canvas.css';
@import './editor.css';
@import './card.css';
@import './panel.css';
@import './overlay/overlay.css';

:root {
    --tf-spacing: 1rem;
    --border-color: #e6e8ef;
    --shadow: 0 6px 18px rgba(0, 0, 0, .12);
    --font: 1rem monospace;

    --color-bg: #f4f5f9;
    --color-surface: #fff;
    --color-primary: #2a6df4;
    --color-primary-hover: #1e56ca;
    --color-text: #1a1d26;
    --color-text-secondary: #5a6a80;
    --color-text-muted: #8a94a6;
    --color-danger: #d93025;
    --color-danger-muted: rgba(217, 48, 37, 0.08);
}

body {
    margin: 0;
    background: var(--color-bg);
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fullscreen {
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    letter-spacing: -0.02em;
}