@import url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css);
@import url(https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css);

*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --text-primary: #000000;
    --text-secondary: #666666;
    --border-color: #dddddd;
    --accent-color: #002dff;
    --accent-hover: #0025cc;
    --error-color: #dc3545;
    --success-color: #28a745;

    --font-main: "Pretendard Variable", sans-serif;
    --font-mono: "Fira Code", monospace;

    /* Token colors */
    --token-color-0-bg: #ffb6c14d;
    --token-color-0-border: #ff6987cc;

    --token-color-1-bg: #add8e64d;
    --token-color-1-border: #6495edcc;

    --token-color-2-bg: #90ee904d;
    --token-color-2-border: #3cb371cc;

    --token-color-3-bg: #ffffe04d;
    --token-color-3-border: #ffd700cc;

    --token-color-4-bg: #dda0dd4d;
    --token-color-4-border: #ba55d3cc;

    --token-color-5-bg: #ffdab94d;
    --token-color-5-border: #ff8c00cc;

    --token-color-6-bg: #b0e0e64d;
    --token-color-6-border: #48d1cccc;

    --token-color-7-bg: #f0e68c4d;
    --token-color-7-border: #daa520cc;

    --token-color-8-bg: #ffc0cb4d;
    --token-color-8-border: #ff1493cc;

    --token-color-9-bg: #98fb984d;
    --token-color-9-border: #228b22cc;

    --token-space-bg: #9ca3af1a;
    --token-space-border: #9ca3af66;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100dvh;
    font-family: var(--font-main);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

body {
    display: flex;
    flex-direction: column;
    overflow: auto;
}