@font-face {
    font-family: 'Eyeleven Inter';
    src: url('../fonts/Inter-Brand.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Eyeleven Sora';
    src: url('../fonts/Sora-Brand.woff2') format('woff2');
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
}

:root {
    --eyeleven-ion: #52d6f4;
    --eyeleven-deep-ion: #087f9d;
    --eyeleven-carbon: #17181b;
    --eyeleven-graphite: #272c33;
    --eyeleven-platinum: #e1e3e6;
    --eyeleven-titanium: #a6a9ad;
    --font-family-sans-serif: 'Eyeleven Inter', Arial, sans-serif;
}

body[data-theme-style='dark'] {
    --body-bg: #000;
    --body-color: #fff;
    --white: #17181b;
    --black: #fff;
    --primary: #52d6f4;
    --primary-100: #0c2730;
    --primary-600: #52d6f4;
    --primary-800: #a9e9f8;
    --gray-50: #0c0d0f;
    --gray-100: #17181b;
    --gray-200: #272c33;
    --gray-600: #a6a9ad;
    --gray-700: #c7cacf;
    --gray-800: #e1e3e6;
    --gray-900: #fff;
    --input-border-color: #272c33;
    --input-color: #fff;
    color: #fff;
    background: #000;
}

body[data-theme-style='light'] {
    --body-bg: #fff;
    --body-color: #000;
    --white: #fff;
    --black: #000;
    --primary: #087f9d;
    --primary-100: #e9f7fa;
    --primary-600: #087f9d;
    --primary-800: #075b71;
    --gray-50: #f7f8f9;
    --gray-100: #e1e3e6;
    --gray-200: #d5d9dd;
    --gray-600: #59616a;
    --gray-700: #3d444c;
    --gray-800: #272c33;
    --gray-900: #000;
    --input-border-color: #d5d9dd;
    --input-color: #000;
    color: #000;
    background: #fff;
}

body, button, input, select, textarea {
    font-family: 'Eyeleven Inter', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, .navbar-brand, .footer-heading {
    font-family: 'Eyeleven Sora', 'Eyeleven Inter', Arial, sans-serif;
    letter-spacing: -0.01em;
}

a { color: var(--primary); }
a:hover { color: var(--primary-800); }

.navbar-main, .app-footer, .card, .dropdown-menu, .modal-content {
    background-color: var(--white) !important;
    border-color: var(--gray-200) !important;
}

.navbar-main { box-shadow: none; }
.navbar-main .nav-link { color: var(--gray-800) !important; }
.navbar-main .nav-link:hover { color: var(--primary) !important; }

.eyetools-brand { gap: .75rem; color: var(--body-color) !important; font-weight: 700; }
.eyetools-brand-mark { display: block; width: 32px; height: 32px; object-fit: contain; }
body[data-theme-style='light'] .eyetools-brand-mark { filter: invert(1); }

.btn-primary {
    color: #000 !important;
    background: var(--eyeleven-ion) !important;
    border-color: var(--eyeleven-ion) !important;
}
.btn-primary:hover, .btn-primary:focus { background: #a9e9f8 !important; border-color: #a9e9f8 !important; }
body[data-theme-style='light'] .btn-primary {
    color: #fff !important;
    background: var(--eyeleven-deep-ion) !important;
    border-color: var(--eyeleven-deep-ion) !important;
}

.form-control {
    color: var(--body-color);
    background: var(--white);
    border-color: var(--input-border-color);
}
.form-control:focus {
    color: var(--body-color);
    background: var(--white);
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(82, 214, 244, .2);
}

.index-background, body[data-theme-style='dark'] .index-background {
    background: radial-gradient(circle at 50% 0, rgba(82, 214, 244, .12), transparent 46%), var(--body-bg);
}
.index-header { color: var(--body-color); font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.08; }
.index-subheader { color: var(--gray-600); font-size: 1.18rem; line-height: 1.65; }
.index-button { border-radius: .6rem; }

body[data-theme-style='dark'] .bg-primary-100 { background: #0c2730 !important; }
body[data-theme-style='light'] .bg-primary-100 { background: #e9f7fa !important; }
.eyetools-value-card { border: 1px solid var(--gray-200) !important; }
.eyetools-value-card .card-body { padding: 2rem; }
.eyetools-value-number { color: var(--primary); font: 600 .8rem 'Eyeleven Inter', Arial, sans-serif; letter-spacing: .12em; }

[data-category] { background: var(--eyeleven-carbon) !important; border-color: var(--eyeleven-graphite) !important; }
[data-category] .tool-icon, [data-tool-id] .tool-icon { background: #0c2730 !important; }
[data-category] .tool-icon i, [data-tool-id] .tool-icon i { color: var(--eyeleven-ion) !important; }
[data-category] .tool-icon svg, [data-tool-id] .tool-icon svg { color: var(--eyeleven-ion) !important; }
[data-category] .tool-icon svg path, [data-tool-id] .tool-icon svg path { fill: currentColor !important; }
[data-tool-id] .card { transition: transform 200ms cubic-bezier(.16,.8,.2,1), border-color 200ms cubic-bezier(.16,.8,.2,1); }
[data-tool-id] .card:hover { transform: translateY(-2px); border-color: var(--primary) !important; }

.index-faq .card { border-bottom: 1px solid var(--gray-200) !important; }
.index-faq button { color: var(--body-color) !important; }
.index-faq button:focus-visible, a:focus-visible, .btn:focus-visible, .form-control:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-tool-id] .card { transition: none; }
    [data-tool-id] .card:hover { transform: none; }
}