/*
 * Temporary structural layer before Tailwind integration.
 * Keeps the layout predictable and removes inline base styles,
 * but does not define the final visual system.
 */

:root {
    --app-max-width: 1280px;
    --app-sidebar-width: 260px;
    --app-border: #d7d7d7;
    --app-text: #222222;
    --app-text-muted: #666666;
    --app-surface: #ffffff;
    --app-surface-muted: #f5f5f5;
    --app-sidebar-bg: #2f3d4f;
    --app-sidebar-text: #ffffff;
    --app-sidebar-muted: rgba(255, 255, 255, 0.68);
    --app-link: #0b5ed7;
    --app-link-hover: #084298;
}

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

html {
    font-size: 16px;
}

body {
    margin: 0;
    color: var(--app-text);
    font-family: Arial, Helvetica, sans-serif;
    background: #f3f4f6;
}

img {
    max-width: 100%;
}

a {
    color: var(--app-link);
    text-decoration: none;
}

a:hover {
    color: var(--app-link-hover);
    text-decoration: underline;
}

button,
input,
select,
textarea {
    font: inherit;
}