:root {
    --color-base: var(--t-base, #141518);

    --color-deep: color-mix(in srgb, var(--t-base, #141518) 92%, #000);

    --color-panel: var(--t-panel, #1d1f23);
    --color-field: var(--t-sunk, #17191c);

    --color-raise: color-mix(in srgb, var(--t-panel, #1d1f23) 92%, rgb(var(--t-veil-rgb, 255 255 255)));
    --color-alt: color-mix(in srgb, var(--t-base, #141518) 94%, #000);
    --color-card: var(--t-panel, #1d1f23);
    --color-sunk: var(--t-sunk, #17191c);

    --color-line: rgb(var(--t-veil-rgb, 255 255 255) / 0.12);
    --color-line-soft: rgb(var(--t-veil-rgb, 255 255 255) / 0.07);
    --color-line-tile: rgb(var(--t-veil-rgb, 255 255 255) / 0.12);

    --color-line-head: rgb(var(--t-veil-rgb, 255 255 255) / 0.22);

    --color-brand: var(--t-accent, #e0a526);
    --color-brand-glow: var(--t-accent-soft, #f3d48a);

    --color-gold: var(--t-money, #4cc9f0);
    --color-gold-alt: var(--t-money-soft, #b5ecfb);

    --color-danger: #d23b30;
    --color-danger-hover: #b12f26;
    --color-danger-text: color-mix(in srgb, #d23b30 64%, var(--t-ink, #f1f2f3));
    --color-up: #2f8f45;
    --color-up-text: color-mix(in srgb, #2f8f45 58%, var(--t-ink, #f1f2f3));
    --color-down: #d23b30;
    --color-down-text: color-mix(in srgb, #d23b30 58%, var(--t-ink, #f1f2f3));
    --color-win: #6d4bb8;

    --color-ink: var(--t-ink, #f1f2f3);

    --color-ink-strong: color-mix(in srgb, var(--t-ink, #f1f2f3) 84%, rgb(var(--t-veil-rgb, 255 255 255)));
    --color-ink-soft: color-mix(in srgb, var(--t-ink, #f1f2f3) 80%, var(--t-ink-muted, #a3a8ae));
    --color-ink-nav: var(--t-ink-muted, #a3a8ae);
    --color-ink-label: var(--t-ink-muted, #a3a8ae);
    --color-ink-muted: color-mix(in srgb, var(--t-ink-muted, #a3a8ae) 82%, var(--t-ink, #f1f2f3));
    --color-ink-team: var(--t-ink-muted, #a3a8ae);

    --font-sans: "Pretendard", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
    --font-numeric: "Rajdhani", "Pretendard", "Noto Sans KR", sans-serif;
    --font-display: "Rajdhani", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

:root {
    --ui-btn-radius: 6px;
    --ui-btn-h-sm: 36px;
    --ui-btn-h-md: 44px;
    --ui-btn-h-lg: 54px;

    --ui-btn-primary-bg: var(--color-brand);
    --ui-btn-primary-ink: var(--t-accent-ink, #17120a);
    --ui-btn-primary-bg-hover: color-mix(in srgb, var(--t-accent, #e0a526) 86%, #000);
    --ui-btn-primary-line: transparent;

    --ui-btn-accent-bg: var(--color-brand);
    --ui-btn-accent-ink: var(--t-accent-ink, #17120a);
    --ui-btn-accent-bg-hover: color-mix(in srgb, var(--t-accent, #e0a526) 86%, #000);
    --ui-btn-accent-line: transparent;

    --ui-btn-outline-bg: transparent;
    --ui-btn-outline-ink: var(--color-ink);
    --ui-btn-outline-bg-hover: rgb(var(--t-accent-rgb, 224 165 38) / 0.08);
    --ui-btn-outline-ink-hover: var(--color-brand);
    --ui-btn-outline-line: var(--color-line);

    --ui-btn-quiet-bg: var(--color-raise);
    --ui-btn-quiet-ink: var(--color-ink-nav);
    --ui-btn-quiet-bg-hover: color-mix(in srgb, var(--t-panel, #1d1f23) 84%, rgb(var(--t-veil-rgb, 255 255 255)));
    --ui-btn-quiet-ink-hover: var(--color-ink);
    --ui-btn-quiet-line: transparent;
    --ui-btn-quiet-line-hover: var(--color-line);

    --ui-btn-gold-bg: transparent;
    --ui-btn-gold-ink: var(--t-money, #4cc9f0);
    --ui-btn-gold-bg-hover: color-mix(in srgb, var(--t-panel, #1d1f23) 92%, rgb(var(--t-veil-rgb, 255 255 255)));
    --ui-btn-gold-line: var(--color-line);

    --ui-btn-danger-bg: var(--color-danger);
    --ui-btn-danger-ink: #ffffff;
    --ui-btn-danger-bg-hover: var(--color-danger-hover);
    --ui-btn-danger-line: transparent;

    --ui-alert-ok-bg: rgba(47, 143, 69, 0.08);
    --ui-alert-ok-ink: color-mix(in srgb, #2f8f45 60%, var(--t-ink, #f1f2f3));
    --ui-alert-ok-line: rgba(47, 143, 69, 0.55);

    --ui-alert-bad-bg: rgba(210, 59, 48, 0.08);
    --ui-alert-bad-ink: color-mix(in srgb, #d23b30 60%, var(--t-ink, #f1f2f3));
    --ui-alert-bad-line: rgba(210, 59, 48, 0.55);

    --ui-alert-info-bg: rgb(var(--t-accent-rgb, 224 165 38) / 0.08);
    --ui-alert-info-ink: var(--color-ink);
    --ui-alert-info-line: rgb(var(--t-accent-rgb, 224 165 38) / 0.55);

    --ui-alert-warn-bg: rgba(180, 130, 30, 0.10);
    --ui-alert-warn-ink: color-mix(in srgb, #a8801f 58%, var(--t-ink, #f1f2f3));
    --ui-alert-warn-line: rgba(180, 130, 30, 0.55);
}