/* ======================================================================
   Ludmila Coelho — ludmilacoelho.com
   Nova personal brand system. Tokens + fonts + page styles.
   ====================================================================== */

/* ─── DM Sans — self-hosted variable font (prose & body copy) */
@font-face{font-family:'DM Sans';font-weight:300 500;font-style:normal;font-display:swap;src:url('../fonts/dmsans-latin.woff2') format('woff2');}

/* ─── 29LT Azer — display / body (glyf woff2, OTS-safe) ──── */
@font-face{font-family:'29LT Azer';font-weight:100;font-style:normal;font-display:swap;src:url('../fonts/29lt-azer-thin.woff2') format('woff2');}
@font-face{font-family:'29LT Azer';font-weight:200;font-style:normal;font-display:swap;src:url('../fonts/29lt-azer-extra-light.woff2') format('woff2');}
@font-face{font-family:'29LT Azer';font-weight:300;font-style:normal;font-display:swap;src:url('../fonts/29lt-azer-light.woff2') format('woff2');}
@font-face{font-family:'29LT Azer';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/29lt-azer-regular.woff2') format('woff2');}
@font-face{font-family:'29LT Azer';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/29lt-azer-medium.woff2') format('woff2');}
@font-face{font-family:'29LT Azer';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/29lt-azer-bold.woff2') format('woff2');}
@font-face{font-family:'29LT Azer';font-weight:900;font-style:normal;font-display:swap;src:url('../fonts/29lt-azer-black.woff2') format('woff2');}

/* ─── JetBrains Mono — mono labels ───────────────────────── */
@font-face{font-family:'JetBrains Mono';font-weight:400;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:500;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-weight:700;font-style:normal;font-display:swap;src:url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');}

/* ─── Nova Color System ──────────────────────────────────── */
:root{
  --neutral-0:#FAFAFD;--neutral-50:#F2F2F8;--neutral-100:#E4E4F0;--neutral-200:#C8C8DC;
  --neutral-300:#9E9EBE;--neutral-400:#7474A0;--neutral-500:#50507A;--neutral-600:#343457;
  --neutral-700:#252548;--neutral-800:#1A1A35;--neutral-900:#0F0F22;--neutral-950:#080812;
  --gold-400:#F5C842;--coral-400:#FF6B52;--teal-400:#1EC8B0;--sakura-400:#F472A8;
  --violet-400:#9B72F6;--azure-400:#4A9EF5;

  --font-display:'29LT Azer',system-ui,sans-serif;
  --font-body:'29LT Azer',system-ui,sans-serif;
  --font-prose:'DM Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code','Cascadia Code',ui-monospace,monospace;

  --border-subtle:var(--neutral-100);
  --border-base:var(--neutral-200);
  --glass-bg:rgba(255,255,255,0.60);
  --glass-blur:12px;
}

/* ─── Dark Mode — Space (the true self) ──────────────────── */
[data-theme="dark"]{
  --border-subtle:var(--neutral-800);
  --border-base:var(--neutral-700);
  --glass-bg:rgba(15,15,34,0.70);
}

/* ─── Base reset & page ──────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#080812;-webkit-font-smoothing:antialiased;font-family:var(--font-display);color:var(--neutral-50);min-height:100vh}
a{text-decoration:none;color:inherit}
button{font-family:inherit}
img{max-width:100%}
::placeholder{color:rgba(228,228,240,0.5)}
input:focus,textarea:focus{border-color:#FF6B52 !important;outline:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 2rem}

/* Keyboard focus ring (visible for keyboard users, not on mouse click) */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #FF6B52;outline-offset:3px;border-radius:6px}

/* Skip to content (visible only when focused) */
.skip-link{position:fixed;top:-60px;left:12px;z-index:200;padding:10px 18px;background:#FF6B52;color:#fff;border-radius:0 0 10px 10px;font-size:15px;font-weight:700;transition:top 120ms ease}
.skip-link:focus{top:0}

/* Section rhythm */
.section{padding:96px 0;border-top:1px solid var(--border-subtle)}
.eyebrow{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.h2{font-size:clamp(2.25rem,4.5vw,3rem);font-weight:900;letter-spacing:-0.025em;color:var(--neutral-50);line-height:1.05}
.lede{font-family:var(--font-prose);font-size:21px;color:var(--neutral-0);line-height:1.6;max-width:560px}

/* Animations */
@keyframes nbPulse{0%,100%{transform:scale(1);opacity:.65}50%{transform:scale(1.07);opacity:.85}}
@keyframes starTwinkle{0%,100%{opacity:var(--sa,.2)}50%{opacity:var(--sb,.9)}}
@keyframes starDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  [data-star-layer],[data-star]{animation:none !important}
  [data-animate]{opacity:1 !important;transform:none !important}
}

/* Reveal-on-scroll */
[data-animate]{will-change:opacity,transform}
[data-animate].reveal-hidden{opacity:0;transform:translateY(28px)}
[data-animate].reveal-in{opacity:1;transform:translateY(0);transition:opacity .65s ease-out,transform .65s ease-out}

/* Scroll rows */
[data-scroll-row]{scrollbar-width:thin;scrollbar-color:rgba(228,228,240,.25) transparent}
[data-scroll-row]::-webkit-scrollbar{height:8px}
[data-scroll-row]::-webkit-scrollbar-track{background:transparent}
[data-scroll-row]::-webkit-scrollbar-thumb{background:rgba(228,228,240,.18);border-radius:4px}

.row-btn{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;padding-top:3px;cursor:pointer;border:1.5px solid rgba(228,228,240,0.3);color:#E4E4F0;transition:all 100ms ease;background:transparent}
.row-btn:hover{border-color:rgba(228,228,240,.55);color:#fff}

/* Skill chips (about) */
.chip{padding:6px 13px;border-radius:8px;font-size:16px;display:inline-flex;align-items:center;justify-content:center;line-height:1;background:rgba(255,255,255,.06);color:var(--neutral-0);border:1px solid rgba(255,255,255,.1)}

/* ── Optical centering ───────────────────────────────────
   29LT Azer renders high inside its line box, so text in
   pill/button shapes reads as sitting above centre. We keep
   containers symmetrically padded (so dots/icons centre
   correctly) and nudge only the TEXT down via --azer-nudge. */
:root{--azer-nudge:2px}

/* Hero badge (Product Manager · New York, NY) */
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,107,82,.1);border:1px solid rgba(255,107,82,.25);border-radius:9999px;padding:8px 14px;margin-bottom:28px}
.hero-badge-dot{width:6px;height:6px;background:#FF6B52;border-radius:50%;display:block;flex-shrink:0}
.hero-badge-text{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#FF9982;line-height:1;display:block;transform:translateY(var(--azer-nudge))}

/* Hero interest tags */
.tag{padding:6px 14px;border-radius:9999px;font-size:16px;font-family:var(--font-prose);display:inline-flex;align-items:center;gap:7px;border:1px solid;line-height:1.2}

/* Buttons (text optically centred, icons/dots true-centred) */
/* Text-only buttons: shift the whole label down by --azer-nudge via
   asymmetric padding (height stays identical, text lands optically centred). */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;font-size:17px;font-weight:700;line-height:1;padding:calc(15px + var(--azer-nudge)) 30px calc(15px - var(--azer-nudge));transition:filter 100ms ease,transform 100ms ease,border-color 100ms ease,color 100ms ease,background 100ms ease;font-family:var(--font-display);text-align:center}
.btn-primary{background:#FF6B52;color:#fff;border:1.5px solid transparent}
.btn-primary:hover{filter:brightness(.88);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--neutral-100);border:1.5px solid rgba(228,228,240,.2);font-weight:500;padding:calc(15px + var(--azer-nudge)) 24px calc(15px - var(--azer-nudge))}
.btn-ghost:hover{border-color:rgba(228,228,240,.4);color:var(--neutral-50)}
.btn-gold{background:rgba(245,200,66,.12);color:#F5C842;border:1px solid rgba(245,200,66,.25);font-weight:600}
.btn-gold:hover{background:rgba(245,200,66,.2)}
.btn-sm{flex:1;font-size:16px;padding:calc(11px + var(--azer-nudge)) 12px calc(11px - var(--azer-nudge))}
.btn-block{width:100%;padding:calc(15px + var(--azer-nudge)) 15px calc(15px - var(--azer-nudge));border:none;cursor:pointer}

/* Clickable rows in the about card */
.about-link{color:var(--neutral-100);border-bottom:1px solid transparent;transition:color 100ms ease,border-color 100ms ease;word-break:break-word}
.about-link:hover{color:#FF9982;border-bottom-color:rgba(255,153,130,.5)}

/* Language switch */
.lang-switch{display:inline-flex;align-items:center;border:1px solid var(--border-base);border-radius:9999px;overflow:hidden;flex-shrink:0}
.lang-btn{padding:6px 11px;background:transparent;border:none;color:var(--neutral-100);font-size:13px;font-weight:700;letter-spacing:.06em;cursor:pointer;line-height:1;transition:background 100ms ease,color 100ms ease}
.lang-btn:hover{color:var(--neutral-50);background:rgba(255,255,255,.06)}
.lang-btn[aria-pressed="true"]{background:#FF6B52;color:#fff}

/* Footer social icons */
.foot-ic{width:36px;height:36px;border-radius:8px;background:var(--neutral-800);border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:var(--neutral-100);transition:color 100ms ease,border-color 100ms ease}
.foot-ic:hover{color:var(--neutral-50);border-color:var(--border-base)}

/* About card rows */
.about-row{display:flex;gap:12px;align-items:flex-start;font-family:var(--font-prose);font-size:17px;color:var(--neutral-100)}
.about-ic{width:20px;display:flex;justify-content:center;flex-shrink:0;opacity:.75;margin-top:2px}

/* Contact links */
.contact-link{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--neutral-700);border:1px solid var(--border-subtle);border-radius:16px;transition:border-color 100ms ease,transform 100ms ease}
.contact-link:hover{border-color:var(--border-base);transform:translateX(2px)}
.contact-ic{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.contact-label{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--neutral-100);margin-bottom:2px}
.contact-val{display:block;font-size:18px;font-weight:600;color:var(--neutral-50)}

/* Contact form inputs */
.cf-input{width:100%;min-width:0;padding:12px 14px;background:var(--neutral-600);border:1.5px solid rgba(255,255,255,.1);border-radius:8px;font-size:17px;color:var(--neutral-50);font-family:var(--font-prose)}

/* Footer links */
.foot-link{font-size:16px;color:var(--neutral-100);transition:color 100ms ease}
.foot-link:hover{color:var(--neutral-0)}

/* Coming-soon sections */
.coming-soon{margin-top:40px;padding:48px 40px;border:1px dashed rgba(228,228,240,.18);border-radius:24px;background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cs-pill{display:inline-flex;align-items:center;gap:9px;padding:9px 18px;border-radius:9999px;font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;color:var(--cs);background:color-mix(in srgb,var(--cs) 12%,transparent);border:1px solid color-mix(in srgb,var(--cs) 30%,transparent)}
.cs-dot{width:7px;height:7px;border-radius:50%;background:var(--cs);flex-shrink:0;display:block;animation:nbPulse 2.4s ease-in-out infinite}
.cs-label{display:block;line-height:1;transform:translateY(var(--azer-nudge))}
.cs-note{font-family:var(--font-prose);font-size:18px;color:var(--neutral-100);line-height:1.65;max-width:540px}

/* Nav */
.nav-right{display:flex;align-items:center;gap:28px}
.nav-menu{display:flex;gap:28px;align-items:center}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:calc(11px + var(--azer-nudge)) 22px calc(11px - var(--azer-nudge));background:#FF6B52;color:#fff;border-radius:12px;font-size:18px;font-weight:700;letter-spacing:.01em;line-height:1;transition:filter 100ms ease}
.nav-cta:hover{filter:brightness(.88)}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:none;background:transparent;color:var(--neutral-50);cursor:pointer;border-radius:10px}
.nav-toggle:hover{background:rgba(255,255,255,.06)}

/* Active nav link */
[data-nav-link]{font-size:20px;font-weight:500;line-height:1;display:inline-flex;align-items:center;transition:color 100ms ease;color:#E4E4F0}
[data-nav-link].active{color:#FAFAFD;text-decoration:underline;text-decoration-color:#FF6B52;text-underline-offset:7px;text-decoration-thickness:2px}

@media (max-width:980px){
  [data-grid="about"],[data-grid="experience"],[data-grid="contact"]{grid-template-columns:1fr !important;gap:48px !important}
  [data-grid="projects"]{grid-template-columns:1fr !important}
  [data-exp-sidebar]{position:static !important}
  [data-about-card]{width:100%;max-width:440px;margin:0 auto}
}
@media (max-width:760px){
  .wrap{padding:0 1.25rem}
  .nav-toggle{display:flex}
  .nav-menu{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(15,15,34,.97);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));
    border-bottom:1px solid var(--border-subtle);padding:8px 0;
    max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .25s ease,opacity .2s ease,visibility .2s}
  .nav-menu.open{max-height:360px;opacity:1;visibility:visible}
  .nav-menu [data-nav-link]{font-size:18px;padding:15px 1.25rem}
  .nav-menu .nav-cta{margin:10px 1.25rem 8px;justify-content:center;padding:14px 22px}
  [data-post-card],[data-feed-card]{width:calc(100vw - 4rem) !important}
  [data-scroll-row="books"] > div{width:calc(100vw - 4rem) !important}
}