/* =========================================================
   prociTec UI – společný vizuální základ platformy
   ========================================================= */

:root {
    --procitec-primary: #397fbd;
    --procitec-primary-hover: #2f6fa8;
    --procitec-primary-soft: #eaf3fb;

    --procitec-text: #1f3344;
    --procitec-text-secondary: #607382;
    --procitec-text-muted: #82919c;

    --procitec-background: #eef3f7;
    --procitec-background-top: #f8fafc;
    --procitec-surface: #ffffff;
    --procitec-surface-secondary: #f7f9fb;

    --procitec-border: #d7e0e7;
    --procitec-border-strong: #c5d1da;

    --procitec-success: #2d8a57;
    --procitec-warning: #a46a20;
    --procitec-danger: #b74646;

    --procitec-radius-small: 8px;
    --procitec-radius: 12px;
    --procitec-radius-large: 18px;

    --procitec-shadow-small:
        0 3px 10px rgba(30, 48, 63, .07);

    --procitec-shadow:
        0 12px 35px rgba(30, 48, 63, .11);

    --procitec-shadow-large:
        0 22px 55px rgba(30, 48, 63, .15);

    --procitec-transition:
        160ms ease;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    min-height: 100%;
    margin: 0;
    font-family:
        Inter,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
    color: var(--procitec-text);
    background: var(--procitec-background);
}

a {
    color: inherit;
}

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

.procitec-page {
    min-height: 100vh;
    background:
        radial-gradient(
            circle at top,
            var(--procitec-background-top) 0,
            var(--procitec-background) 48%,
            #e6edf2 100%
        );
}

.procitec-container {
    width: min(100% - 40px, 1180px);
    margin: 0 auto;
}

.procitec-surface {
    border: 1px solid var(--procitec-border);
    border-radius: var(--procitec-radius-large);
    background: var(--procitec-surface);
    box-shadow: var(--procitec-shadow);
}

.procitec-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 22px;
    border: 1px solid transparent;
    border-radius: var(--procitec-radius-small);
    background: var(--procitec-primary);
    color: #ffffff;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition:
        background var(--procitec-transition),
        border-color var(--procitec-transition),
        transform var(--procitec-transition);
}

.procitec-button:hover,
.procitec-button:focus-visible {
    background: var(--procitec-primary-hover);
    transform: translateY(-1px);
}

.procitec-button-secondary {
    border-color: var(--procitec-border-strong);
    background: var(--procitec-surface);
    color: var(--procitec-text);
}

.procitec-button-secondary:hover,
.procitec-button-secondary:focus-visible {
    border-color: var(--procitec-primary);
    background: var(--procitec-primary-soft);
    color: var(--procitec-primary-hover);
}

@media (max-width: 600px) {
    .procitec-container {
        width: min(100% - 24px, 1180px);
    }
}