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

/* Leticia Silva Design System Oficial v2 */
:root,
html[data-theme="light"] {
  --ls-navy: #0D1A34;
  --ls-offwhite: #F4F3F1;
  --ls-lilac: #9487E9;
  --ls-lilac-soft: #B0A9F1;
  --ls-muted: #5B6474;
  --ls-ice: #F8FAFC;
  --ls-surface: #FFFFFF;
  --ls-border: #D9E0E7;
  --ls-page: #EEF1F5;
  --ls-ink: #0D1A34;
  --ls-text: #344055;
  --ls-shadow: 0 18px 50px rgba(13, 26, 52, .07);
  --ls-radius-xs: 8px;
  --ls-radius-sm: 12px;
  --ls-radius-md: 16px;
  --ls-radius-lg: 24px;
  --ls-radius-pill: 999px;

  --theme-bg-start: #F8FAFC !important;
  --theme-bg-mid: #EEF1F5 !important;
  --theme-bg-end: #D9E0E7 !important;
  --theme-surface: rgba(255, 255, 255, .88) !important;
  --theme-surface-strong: #FFFFFF !important;
  --theme-surface-muted: #F8FAFC !important;
  --theme-text: #0D1A34 !important;
  --theme-text-soft: #344055 !important;
  --theme-muted: #5B6474 !important;
  --theme-border: #D9E0E7 !important;
  --theme-border-strong: rgba(13, 26, 52, .18) !important;
  --theme-accent: #9487E9 !important;
  --theme-accent-2: #B0A9F1 !important;
  --theme-contrast: #F4F3F1 !important;
  --theme-shadow: 0 18px 50px rgba(13, 26, 52, .07) !important;
  --theme-shadow-soft: 0 12px 34px rgba(13, 26, 52, .055) !important;

  --bg: #EEF1F5 !important;
  --bg-soft: #F8FAFC !important;
  --surface: rgba(255, 255, 255, .88) !important;
  --surface-solid: #FFFFFF !important;
  --surface-muted: #F8FAFC !important;
  --text: #0D1A34 !important;
  --text-soft: #344055 !important;
  --muted: #5B6474 !important;
  --border: #D9E0E7 !important;
  --border-strong: rgba(13, 26, 52, .18) !important;
  --primary: #0D1A34 !important;
  --primary-dark: #0D1A34 !important;
  --primary-soft: rgba(148, 135, 233, .14) !important;
  --accent: #9487E9 !important;
  --accent-soft: rgba(176, 169, 241, .18) !important;
  --shadow: var(--ls-shadow) !important;
  --shadow-soft: 0 12px 34px rgba(13, 26, 52, .055) !important;
}

html[data-theme="dark"] {
  --ls-page: #091426;
  --ls-surface: #101F3A;
  --ls-ice: #142542;
  --ls-border: #2B3A53;
  --ls-ink: #F4F3F1;
  --ls-text: #C7CFDA;
  --ls-shadow: 0 18px 50px rgba(0, 0, 0, .22);

  --theme-bg-start: #091426 !important;
  --theme-bg-mid: #101F3A !important;
  --theme-bg-end: #142542 !important;
  --theme-surface: rgba(16, 31, 58, .92) !important;
  --theme-surface-strong: #101F3A !important;
  --theme-surface-muted: #142542 !important;
  --theme-text: #F4F3F1 !important;
  --theme-text-soft: #C7CFDA !important;
  --theme-muted: #A9B5C5 !important;
  --theme-border: #2B3A53 !important;
  --theme-border-strong: #3B4B65 !important;
  --theme-accent: #9487E9 !important;
  --theme-accent-2: #B0A9F1 !important;
  --theme-contrast: #0D1A34 !important;
  --theme-shadow: 0 18px 50px rgba(0, 0, 0, .22) !important;
  --theme-shadow-soft: 0 12px 34px rgba(0, 0, 0, .16) !important;

  --bg: #091426 !important;
  --bg-soft: #142542 !important;
  --surface: rgba(16, 31, 58, .92) !important;
  --surface-solid: #101F3A !important;
  --surface-muted: #142542 !important;
  --text: #F4F3F1 !important;
  --text-soft: #C7CFDA !important;
  --muted: #A9B5C5 !important;
  --border: #2B3A53 !important;
  --border-strong: #3B4B65 !important;
  --primary: #F4F3F1 !important;
  --primary-dark: #F4F3F1 !important;
  --primary-soft: rgba(148, 135, 233, .18) !important;
  --accent: #9487E9 !important;
  --accent-soft: rgba(176, 169, 241, .16) !important;
}

html,
html[data-theme="light"] {
  background: #FFFFFF !important;
  overscroll-behavior-y: none;
}

html[data-theme="dark"] {
  background: #091426 !important;
}

html body {
  background: var(--ls-page) !important;
  color: var(--ls-ink) !important;
  font-family: Inter, Arial, sans-serif !important;
  overscroll-behavior-y: none;
}

html body::before {
  background-image: none !important;
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .section-title,
html body .page-title,
html body .hero-title,
html body .home-hero-v2__title,
html body .home-hero-v2__positioning,
html body .home-method__header h2,
html body .home-method__item h3,
html body .home-contact-cta__title,
html body .projects-showcase__title,
html body .cpx-title,
html body .cpx-skill-title,
html body .about-title,
html body .about-title *,
html body .contact-title,
html body .contact-title *,
html body .brand,
html body .nav-links,
html body .btn,
html body button {
  font-family: Manrope, Arial, sans-serif !important;
}

html body p,
html body li,
html body label,
html body input,
html body textarea,
html body select,
html body table,
html body th,
html body td,
html body .section-description,
html body .page-description,
html body .hero-description,
html body .home-hero-v2__description,
html body .home-method__intro,
html body .home-contact-cta__description {
  font-family: Inter, Arial, sans-serif !important;
}

html body blockquote,
html body .editorial,
html body .editorial-copy,
html body .quote-panel p,
html body .contact-title em,
html body .cpx-title em,
html body .about-title em {
  font-family: Manrope, Arial, sans-serif !important;
  font-style: normal !important;
}

html body code,
html body pre,
html body kbd,
html body samp,
html body .technical-hud,
html body .home-hero-v2__code,
html body .home-hero-v2__profile-label,
html body .home-hero-v2__domain span,
html body .home-tech-ribbon__item,
html body .home-method__number,
html body .timeline-meta,
html body .tech-list {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace !important;
}

/* Marca */
html body .brand-mark {
  color: transparent !important;
  font-size: 0 !important;
  background: #0D1A34 url('../assets/logo-mark.svg') center / cover no-repeat !important;
  border-radius: 14px !important;
  box-shadow: var(--ls-shadow) !important;
}

/* Navegacao */
html[data-theme="light"] body .header,
html[data-theme="light"] body .header.is-scrolled {
  background: #FFFFFF !important;
  border-bottom: 1px solid #D9E0E7 !important;
  box-shadow: 0 8px 24px rgba(13, 26, 52, .035) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="dark"] body .header,
html[data-theme="dark"] body .header.is-scrolled {
  background: #101F3A !important;
  border-bottom: 1px solid #2B3A53 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html body .nav-links {
  background: color-mix(in srgb, var(--ls-surface) 86%, transparent) !important;
  border-color: var(--ls-border) !important;
}

html body .nav-links a {
  color: var(--ls-text) !important;
}

html body .nav-links a:hover,
html body .nav-links a.is-active,
html body .nav-links a.active {
  color: var(--ls-navy) !important;
  background: rgba(176, 169, 241, .16) !important;
}

html[data-theme="dark"] body .nav-links a:hover,
html[data-theme="dark"] body .nav-links a.is-active,
html[data-theme="dark"] body .nav-links a.active {
  color: var(--ls-offwhite) !important;
  background: rgba(148, 135, 233, .18) !important;
}

html body .theme-toggle,
html body .menu-toggle {
  border-color: var(--ls-border) !important;
  background: var(--ls-surface) !important;
  color: var(--ls-ink) !important;
}

/* Kicker e acentos */
html body .section-kicker,
html body .hero-eyebrow,
html body .about-label,
html body .cpx-group,
html body .project-tag,
html body .portfolio-cat {
  color: var(--ls-navy) !important;
  background: rgba(176, 169, 241, .13) !important;
  border-color: rgba(148, 135, 233, .28) !important;
}

html[data-theme="dark"] body .section-kicker,
html[data-theme="dark"] body .hero-eyebrow,
html[data-theme="dark"] body .about-label,
html[data-theme="dark"] body .cpx-group,
html[data-theme="dark"] body .project-tag,
html[data-theme="dark"] body .portfolio-cat {
  color: var(--ls-offwhite) !important;
  background: rgba(148, 135, 233, .14) !important;
  border-color: rgba(176, 169, 241, .28) !important;
}

html body .section-kicker::before,
html body .pill::before,
html body .clean-list li::before,
html body .goals-list li::before,
html body .goals-clean-list li::before,
html body .marquee-item::before,
html body .service-mark::after {
  background: var(--ls-lilac) !important;
  box-shadow: 0 0 0 5px rgba(148, 135, 233, .12) !important;
}

/* Botoes */
html body .btn,
html body .admin-button {
  border-radius: var(--ls-radius-sm) !important;
}

html body .btn-primary,
html body .gallery-btn.is-active,
html body .filter-btn.is-active,
html body .tab.active,
html body .showcase-filter.is-active {
  background: var(--ls-navy) !important;
  border-color: var(--ls-navy) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 26px rgba(13, 26, 52, .14) !important;
}

html body .btn-primary:hover,
html body .filter-btn:hover,
html body .showcase-filter:hover {
  background: #182746 !important;
  border-color: #182746 !important;
}

html body .btn-secondary,
html body .btn-ghost,
html body .gallery-btn,
html body .filter-btn,
html body .showcase-filter,
html body .tab {
  background: var(--ls-surface) !important;
  color: var(--ls-ink) !important;
  border-color: var(--ls-border) !important;
}

html body .btn:focus-visible,
html body button:focus-visible,
html body a:focus-visible {
  outline: 3px solid rgba(148, 135, 233, .32) !important;
  outline-offset: 3px !important;
}

/* Cards e superficies */
html body .card,
html body .content-card,
html body .project-card,
html body .skill-card,
html body .timeline-card,
html body .contact-card,
html body .cert-card,
html body .profile-card,
html body .metric-card,
html body .mini-card,
html body .contact-item,
html body .experience-metric-card,
html body .project-gallery-item,
html body .modal-panel,
html body .detail-card,
html body .about-side,
html body .about-objective,
html body .about-edu,
html body .cpx-card,
html body .cpx-level-card,
html body .contact-message-card,
html body .resume-main,
html body .resume-sidebar {
  border-radius: var(--ls-radius-lg) !important;
  border-color: var(--ls-border) !important;
  background: var(--ls-surface) !important;
  box-shadow: var(--ls-shadow) !important;
  color: var(--ls-ink) !important;
}

html[data-theme="dark"] body .card,
html[data-theme="dark"] body .content-card,
html[data-theme="dark"] body .project-card,
html[data-theme="dark"] body .skill-card,
html[data-theme="dark"] body .timeline-card,
html[data-theme="dark"] body .contact-card,
html[data-theme="dark"] body .cert-card,
html[data-theme="dark"] body .profile-card,
html[data-theme="dark"] body .metric-card,
html[data-theme="dark"] body .mini-card,
html[data-theme="dark"] body .contact-item,
html[data-theme="dark"] body .experience-metric-card,
html[data-theme="dark"] body .project-gallery-item,
html[data-theme="dark"] body .modal-panel,
html[data-theme="dark"] body .detail-card,
html[data-theme="dark"] body .about-side,
html[data-theme="dark"] body .about-objective,
html[data-theme="dark"] body .about-edu,
html[data-theme="dark"] body .cpx-card,
html[data-theme="dark"] body .cpx-level-card,
html[data-theme="dark"] body .contact-message-card,
html[data-theme="dark"] body .resume-main,
html[data-theme="dark"] body .resume-sidebar {
  border-color: var(--ls-border) !important;
  background: var(--ls-surface) !important;
  color: var(--ls-ink) !important;
}

html body .about-side--dark,
html body .profile-frame,
html body .quote-panel,
html body .cta,
html body .site-footer-cta,
html body .cta-full-section,
html body .projects-showcase__cta {
  background: var(--ls-navy) !important;
  color: var(--ls-offwhite) !important;
  border-color: transparent !important;
}

/* Chips */
html body .chip,
html body .tech-list span,
html body .hero-sector-tags span,
html body .home-tech-ribbon__item,
html body .timeline-status,
html body .timeline-meta span,
html body .pill {
  border-radius: var(--ls-radius-pill) !important;
  border-color: var(--ls-border) !important;
}

/* Formularios */
html body input,
html body textarea,
html body select,
html body .field input,
html body .field textarea,
html body .field select {
  border-radius: var(--ls-radius-sm) !important;
  border-color: var(--ls-border) !important;
  background: var(--ls-surface) !important;
  color: var(--ls-ink) !important;
}

html body input:focus,
html body textarea:focus,
html body select:focus,
html body .field input:focus,
html body .field textarea:focus,
html body .field select:focus {
  outline: none !important;
  border-color: var(--ls-lilac) !important;
  box-shadow: 0 0 0 3px rgba(148, 135, 233, .20) !important;
}

/* Home */
html body .home-hero-v2,
html body .home-method,
html body .home-contact-cta,
html body .featured-portfolio,
html body .projects-showcase,
html body .projects-showcase__hero,
html body .about-showcase,
html body .competencies-showcase,
html body .contact-showcase,
html body .resume-page {
  background-color: transparent !important;
  background-image: none !important;
}

html body .home-hero-v2__domain,
html body .home-hero-v2__profile-label {
  background: var(--ls-surface) !important;
  border-color: var(--ls-border) !important;
  color: var(--ls-ink) !important;
  box-shadow: var(--ls-shadow) !important;
}

html body .home-hero-v2__orbit {
  border-color: rgba(148, 135, 233, .20) !important;
}

html body .home-tech-ribbon {
  border-color: var(--ls-border) !important;
  background: color-mix(in srgb, var(--ls-surface) 78%, transparent) !important;
}

html body .featured-filters--custom .filter-btn.is-active {
  background: var(--ls-navy) !important;
  border-color: var(--ls-navy) !important;
  color: #FFFFFF !important;
}

/* Pagina Sobre */
html body .about-bridge {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 28px !important;
}

html body .about-connector {
  display: none !important;
}

html body .about-connector span,
html body .about-connector span::before,
html body .about-connector span::after {
  display: none !important;
  content: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body .about-goals li::before {
  background: var(--ls-lilac) !important;
}

@media (max-width: 900px) {
  html body .about-bridge {
    grid-template-columns: 1fr !important;
  }
}

/* Footer */
html body .footer {
  border-color: var(--ls-border) !important;
  background: color-mix(in srgb, var(--ls-surface) 72%, transparent) !important;
  color: var(--ls-text) !important;
}

/* Admin CMS */
body.admin-body {
  --a-bg: #EEF1F5;
  --a-surface: #FFFFFF;
  --a-surface-2: #F8FAFC;
  --a-text: #0D1A34;
  --a-soft: #5B6474;
  --a-border: #D9E0E7;
  --a-border-2: #C9D0D6;
  --a-dark: #0D1A34;
  --a-accent: #9487E9;
  --a-accent-2: #B0A9F1;
  --a-shadow: 0 18px 50px rgba(13, 26, 52, .07);
  background: #EEF1F5 !important;
  color: #0D1A34 !important;
  font-family: Inter, Arial, sans-serif !important;
}

.admin-body h1,
.admin-body h2,
.admin-body h3,
.admin-body h4,
.admin-body strong,
.admin-body button,
.admin-body .admin-brand {
  font-family: Manrope, Arial, sans-serif !important;
}

.admin-body .admin-brand > span {
  color: transparent !important;
  font-size: 0 !important;
  background: #0D1A34 url('../assets/logo-mark.svg') center / cover no-repeat !important;
  border-radius: 14px !important;
  box-shadow: var(--ls-shadow) !important;
}

.admin-body .admin-login__card,
.admin-body .admin-sidebar,
.admin-body .admin-panel,
.admin-body .admin-stats article,
.admin-body .admin-editor__panel,
.admin-body .admin-editor__head,
.admin-body .admin-tabs,
.admin-body .admin-editor__footer,
.admin-body .admin-media-item,
.admin-body .admin-mockup-row,
.admin-body .admin-file-card {
  background: #FFFFFF !important;
  border-color: #D9E0E7 !important;
  box-shadow: var(--ls-shadow) !important;
}

.admin-body .admin-kicker,
.admin-body .admin-nav button span,
.admin-body .admin-link-button,
.admin-body .admin-featured {
  color: #9487E9 !important;
}

.admin-body .admin-nav button:hover,
.admin-body .admin-nav button.is-active,
.admin-body .admin-tabs button.is-active {
  background: rgba(176, 169, 241, .16) !important;
  color: #0D1A34 !important;
}

.admin-body .admin-nav button.is-active {
  box-shadow: inset 3px 0 0 #9487E9 !important;
}

.admin-body .admin-button--primary {
  background: #0D1A34 !important;
  border-color: #0D1A34 !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 26px rgba(13, 26, 52, .14) !important;
}

.admin-body .admin-button--ghost,
.admin-body .admin-upload-button,
.admin-body .admin-row-actions button {
  background: #FFFFFF !important;
  border-color: #D9E0E7 !important;
  color: #344055 !important;
}

.admin-body input,
.admin-body textarea,
.admin-body select {
  background: #FFFFFF !important;
  border-color: #D9E0E7 !important;
  color: #0D1A34 !important;
  border-radius: 12px !important;
}

.admin-body input:focus,
.admin-body textarea:focus,
.admin-body select:focus {
  border-color: #9487E9 !important;
  box-shadow: 0 0 0 3px rgba(148, 135, 233, .20) !important;
}

.admin-body .admin-design-preview {
  background: #0D1A34 !important;
  color: #F4F3F1 !important;
}