/* ==========================================================================
   MarMat — style własne uzupełniające Tailwind
   ========================================================================== */

/* --- Motyw: zmienne kolorów (kanały RGB, by działały przezroczystości Tailwind) ---
   :root      = tryb ciemny (domyślny)
   html.light = tryb jasny
   Żółć (marka) pozostaje akcentem w obu trybach; w trybie jasnym tekst-akcent
   jest przyciemniony do czytelnego złota. */
:root {
    --bg-rgb:           10 10 11;
    --panel-rgb:        20 20 23;
    --edge-rgb:         38 38 43;
    --text-rgb:         212 212 216;
    --heading-rgb:      255 255 255;
    --mute-rgb:         161 161 170;
    --accent-rgb:       255 212 0;
    --accent-hover-rgb: 230 191 0;
    --accent-text-rgb:  255 212 0;
    --on-accent-rgb:    10 10 11;

    --input-bg-rgb:     20 20 23;
    --grid-line: rgba(255, 212, 0, 0.05);
    --stripe-dark: #0a0a0b;
    color-scheme: dark;
}

html.light {
    --bg-rgb:           255 255 255;
    --panel-rgb:        245 245 244;
    --edge-rgb:         228 228 231;
    --text-rgb:         63 63 70;
    --heading-rgb:      17 17 17;
    --mute-rgb:         107 114 128;
    --accent-rgb:       255 212 0;
    --accent-hover-rgb: 234 179 8;
    --accent-text-rgb:  161 98 7;
    --on-accent-rgb:    10 10 11;

    --input-bg-rgb:     255 255 255;
    --grid-line: rgba(17, 17, 17, 0.05);
    --stripe-dark: #111111;
    color-scheme: light;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem; /* uwzględnia stały nagłówek przy kotwicach */
}

body {
    -webkit-font-smoothing: antialiased;
}

/* Płynne przejście przy przełączaniu motywu (włączane chwilowo przez JS) */
.theme-transition,
.theme-transition * {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}

/* --- Przełącznik motywu: która ikona jest widoczna ----------------------- */
.icon-sun  { display: block; }
.icon-moon { display: none; }
html.light .icon-sun  { display: none; }
html.light .icon-moon { display: block; }

/* --- Tło: siatka jak z rysunku technicznego ------------------------------ */
.blueprint-grid {
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 48px 48px;
}

/* --- Pas ostrzegawczy (motyw elektryczny/BHP) ---------------------------- */
.hazard-stripe {
    background-image: repeating-linear-gradient(
        45deg,
        rgb(var(--accent-rgb)),
        rgb(var(--accent-rgb)) 12px,
        var(--stripe-dark) 12px,
        var(--stripe-dark) 24px
    );
}

/* --- Etykiety sekcji ----------------------------------------------------- */
.section-label {
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgb(var(--accent-text-rgb));
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}
.section-label::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    background: rgb(var(--accent-rgb));
}

/* --- Pola formularza ----------------------------------------------------- */
.form-label {
    display: block;
    font-family: "IBM Plex Mono", monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgb(var(--mute-rgb));
    margin-bottom: 0.4rem;
}
.form-input {
    width: 100%;
    background: rgb(var(--input-bg-rgb));
    border: 1px solid rgb(var(--edge-rgb));
    border-radius: 2px;
    padding: 0.7rem 0.9rem;
    color: rgb(var(--heading-rgb));
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input::placeholder {
    color: rgb(var(--mute-rgb));
    opacity: 0.7;
}
.form-input:focus {
    outline: none;
    border-color: rgb(var(--accent-rgb));
    box-shadow: 0 0 0 3px rgba(255, 212, 0, 0.18);
}
/* Pole oznaczone przez JS jako błędne */
.form-input.is-invalid {
    border-color: #f87171;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.15);
}

/* --- Komunikaty statusu formularza --------------------------------------- */
.status-ok {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
    border: 1px solid rgba(34, 197, 94, 0.35);
}
.status-error {
    background: rgba(248, 113, 113, 0.1);
    color: #dc2626;
    border: 1px solid rgba(248, 113, 113, 0.35);
}

/* --- Animacja wejścia (staggered reveal) --------------------------------- */
.reveal {
    opacity: 0;
    transform: translateY(24px);
    animation: reveal-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes reveal-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animacja sekcji wyzwalana scrollem (przez IntersectionObserver) */
.fade-section {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-section.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Szacunek dla preferencji ograniczenia ruchu */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal, .fade-section {
        animation: none;
        transition: none;
        opacity: 1;
        transform: none;
    }
}