/* ============================================================
   TefIP Docs — Extra CSS
   Visual identity from tefip/specs/index.html
   ============================================================ */

/* 1. Font import — Syne (DM Sans loaded by Material via font.text) */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&display=swap');

/* 2. Brand tokens */
:root {
  --tefip-orange:      #F04E23;
  --tefip-orange-dim:  #C03C18;
  --tefip-orange-glow: rgba(240, 78, 35, 0.15);
  --tefip-radius:      14px;
  --tefip-transition:  .22s ease;
}

/* 3. Custom primary color (required when primary: custom) */
[data-md-color-primary="custom"] {
  --md-primary-fg-color:        #F04E23;
  --md-primary-fg-color--light: rgba(240, 78, 35, 0.1);
  --md-primary-fg-color--dark:  #C03C18;
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

[data-md-color-accent="custom"] {
  --md-accent-fg-color:              #F04E23;
  --md-accent-fg-color--transparent: rgba(240, 78, 35, 0.1);
  --md-accent-bg-color:              #ffffff;
}

/* 4. Dark scheme overrides (deeper blacks than Material's default slate) */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:           #0D0D0D;
  --md-default-fg-color:           #EDEAE6;
  --md-default-fg-color--light:    rgba(237, 234, 230, 0.54);
  --md-default-fg-color--lighter:  rgba(237, 234, 230, 0.32);
  --md-default-fg-color--lightest: rgba(237, 234, 230, 0.12);
  --md-code-bg-color:              #161616;
  --md-code-fg-color:              #EDEAE6;
  --md-typeset-a-color:            #F04E23;
}

/* 5. Light scheme overrides (warm off-white, matches index.html) */
[data-md-color-scheme="default"] {
  --md-default-bg-color: #F9F7F5;
  --md-code-bg-color:    #F2EFEC;
  --md-typeset-a-color:  #F04E23;
}

/* 6. Orange radial glow (fixed, top-center, matches index.html .bg-glow) */
body::before {
  content: "";
  position: fixed;
  top: -20vh;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--tefip-orange-glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

[data-md-color-scheme="default"] body::before {
  opacity: 0.6;
}

/* 7. Dark noise texture — removed (too harsh on screen) */

/* 8. Glassmorphism header */
.md-header {
  background: rgba(13, 13, 13, 0.8) !important;
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

[data-md-color-scheme="default"] .md-header {
  background: rgba(249, 247, 245, 0.92) !important;
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  /* text must be dark — Material uses --md-primary-bg-color as header text color */
  --md-primary-bg-color:        #1A1714;
  --md-primary-bg-color--light: rgba(26, 23, 20, 0.54);
}

/* 9. Typography — Syne for headings */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-header__title,
.md-nav__title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.md-typeset h1 {
  font-weight: 800;
}

/* 10. Link / accent colors (orange links throughout) */
.md-typeset a {
  color: var(--tefip-orange);
}

.md-typeset a:hover {
  color: var(--tefip-orange-dim);
}

/* 11. Admonition warning → orange (matches brand, used for Auth warnings) */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-color: var(--tefip-orange);
}

.md-typeset .warning > .admonition-title::before,
.md-typeset .warning > summary::before {
  background-color: var(--tefip-orange);
}

/* 12. Code blocks */
.md-typeset code {
  border-radius: 6px;
}

/* 13. Grid cards — força texto laranja em modo escuro (links somem no slate) */
.md-typeset .grid.cards li a strong,
.md-typeset .grid.cards li a:hover strong {
  color: var(--tefip-orange);
}

/* 14. Scroll-reveal utility class (JS will toggle .reveal.visible) */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}