/**
 * VW Klubas — shared design tokens
 * Customize the palette here; components inherit via CSS variables.
 */
:root {
    --font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

    /* Brand */
    --color-brand: #0f7d80;
    --color-brand-light: #37c9cc;
    --color-brand-muted: #e9fbfb;
    --color-brand-dark: #102728;
    --color-accent: #d10000;
    --color-accent-hover: #b90000;

    /* Surfaces */
    --color-bg: #f4f7f7;
    --color-bg-gradient: linear-gradient(165deg, #f8fbfb 0%, #e8f4f4 100%);
    --color-surface: #ffffff;
    --color-surface-raised: #fbffff;
    --color-border: rgba(35, 116, 117, 0.18);
    --color-border-strong: #b7dfe0;

    /* Text */
    --color-text: #122829;
    --color-text-muted: #4f6b6d;
    --color-text-subtle: #6b8587;
    --color-heading: #0d1f20;

    /* Semantic */
    --color-success: #1e7e45;
    --color-success-bg: #e8f5ec;
    --color-success-border: #b8dfc8;
    --color-warning: #856404;
    --color-warning-bg: #fff8e6;
    --color-warning-border: #f0dfa8;
    --color-danger: #b42318;
    --color-danger-bg: #fdecea;
    --color-danger-border: #f5c6cb;

    /* Soft UI — calm card buttons (admin) */
    --color-soft-success: #4a8f6a;
    --color-soft-success-bg: #eef6f1;
    --color-soft-success-border: #c5ddd0;
    --color-soft-danger: #9e6b66;
    --color-soft-danger-bg: #f8f0ef;
    --color-soft-danger-border: #e2cecc;
    --color-soft-neutral: #6a7879;
    --color-soft-neutral-bg: #f3f5f5;
    --color-soft-neutral-border: #d5dede;
    --color-soft-vote: #8a9696;
    --color-soft-vote-bg: #f0f3f3;
    --color-soft-vote-border: #d0d8d8;
    --color-info: #0c5460;
    --color-info-bg: #e8f6f8;
    --color-info-border: #b8e0e8;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-full: 999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px rgba(12, 37, 38, 0.08);
    --shadow-md: 0 8px 24px rgba(12, 37, 38, 0.1);
    --shadow-lg: 0 16px 40px rgba(12, 37, 38, 0.14);

    /* Motion */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration: 0.2s;

    /* Touch */
    --touch-min: 44px;
    --focus-ring: 0 0 0 3px rgba(55, 201, 204, 0.28);
}

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

html {
    min-width: 320px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

:focus-visible {
    outline: 2px solid var(--color-brand-light);
    outline-offset: 2px;
}

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