@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* ── VÁLTOZÓK ─────────────────────────────────────────────────── */
:root {
    /* Birte Electric alap színek */
    --be-navy:         #0B1F3A;
    --be-navy-dark:    #060f1d;
    --be-red:          #C8102E;
    --be-red-hover:    #A50D26;
    --be-gold:         #E8A020;

    /* Eredeti kalkulátor kék - megtartva másodlagos szerepben */
    --primary:         #4361ee;
    --primary-light:   #4895ef;
    --primary-gradient: linear-gradient(135deg, #4361ee 0%, #3a56d4 100%);

    /* Státusz színek */
    --success:         #2ecc71;
    --warning:         #f39c12;
    --danger:          #e74c3c;
    --info:            #3498db;

    /* Semleges */
    --dark:            #1a2332;
    --gray:            #64748b;
    --gray-light:      #e2e8f0;
    --light:           #f8fafc;
    --white:           #ffffff;

    /* Árnyékok - JAVÍTVA: shadow-sm hiányzott az eredetiből! */
    --shadow-sm:       0 2px 8px rgba(0,0,0,0.06);
    --shadow:          0 8px 24px rgba(0,0,0,0.09);
    --shadow-lg:       0 16px 40px rgba(0,0,0,0.13);
    --shadow-primary:  0 4px 16px rgba(67,97,238,0.2);
    --shadow-red:      0 4px 16px rgba(200,16,46,0.25);

    /* Geometria */
    --radius:          14px;
    --radius-sm:       8px;
    --radius-lg:       20px;
    --transition:      all 0.25s cubic-bezier(0.4, 0, 0.2, 1);

    /* Tipográfia */
    --font-main:       'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-title:      'Oswald', sans-serif;
}

/* ── RESET ────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

html { scroll-behavior: smooth; }

body {
    font-family:      var(--font-main);
    background:       linear-gradient(135deg, #f0f4f8 0%, #e2eaf4 100%);
    color:            var(--dark);
    min-height:       100vh;
    line-height:      1.6;
    font-size:        16px;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

button { cursor: pointer; font-family: var(--font-main); }
input, select, textarea { font-family: var(--font-main); }

/* ── TIPOGRÁFIA ───────────────────────────────────────────────── */
h1 { font-size: clamp(24px, 4vw, 36px); font-weight: 800; line-height: 1.2; }
h2 { font-size: clamp(20px, 3vw, 28px); font-weight: 700; line-height: 1.3; }
h3 { font-size: clamp(17px, 2.5vw, 22px); font-weight: 700; line-height: 1.4; }
h4 { font-size: 18px; font-weight: 600; }
p  { font-size: 16px; line-height: 1.7; color: var(--gray); }

/* ── UTILITY ──────────────────────────────────────────────────── */
.text-muted  { color: var(--gray); font-size: 14px; }
.text-danger { color: var(--danger); }
.text-success{ color: var(--success); }
.hidden      { display: none !important; }

/* ── ANIMÁCIÓK ────────────────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%   { box-shadow: 0 4px 15px rgba(67,97,238,0.3); }
    50%  { box-shadow: 0 4px 22px rgba(67,97,238,0.55); }
    100% { box-shadow: 0 4px 15px rgba(67,97,238,0.3); }
}