/* ── TOKENS ────────────────────────────────────────────── */
/* Brand palette: #28221f #853300 #f3eac0 #814b38 #d18852 #1d3f69 #bad0d4 #3c2726 #f6f0d7 */
:root {
  --bg:          #28221f;
  --bg-card:     #3c2726;
  --bg-card-h:   #4e3130;
  --border:      rgba(209,136,82,.18);
  --text:        #f6f0d7;
  --text-muted:  #bad0d4;
  --accent:      #d18852;
  --accent-h:    #f3eac0;
  --accent-glow: rgba(209,136,82,.22);
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --shadow-card: 0 4px 24px rgba(0,0,0,.45);
  --transition:  .2s cubic-bezier(.4,0,.2,1);
  --max-w:       480px;
  --font:        'Inter', system-ui, sans-serif;
}

[data-theme="light"] {
  --bg:          #f6f0d7;
  --bg-card:     #ffffff;
  --bg-card-h:   #f3eac0;
  --border:      rgba(40,34,31,.12);
  --text:        #28221f;
  --text-muted:  #814b38;
  --accent:      #853300;
  --accent-h:    #d18852;
  --accent-glow: rgba(133,51,0,.18);
  --shadow-card: 0 4px 24px rgba(40,34,31,.1);
}

/* ── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family:      var(--font);
  background-color: var(--bg);
  color:            var(--text);
  line-height:      1.6;
  min-height:       100dvh;
  transition:       background-color var(--transition), color var(--transition);
}

img { display: block; max-width: 100%; }
a  { color: inherit; text-decoration: none; }
h1, h2, h3 { line-height: 1.25; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }

/* ── LAYOUT ────────────────────────────────────────────── */
.container {
  width:   100%;
  max-width: var(--max-w);
  margin:  0 auto;
  padding: 0 1.25rem 5rem;
}

/* ── PROFILE / HERO ────────────────────────────────────── */
.profile {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  text-align:      center;
  padding:         3rem 1.25rem 2rem;
  max-width:       var(--max-w);
  margin:          0 auto;
}

.avatar-wrap {
  position: relative;
  width:    96px;
  height:   96px;
  margin-bottom: 1rem;
}

.avatar {
  width:         96px;
  height:        96px;
  border-radius: 50%;
  object-fit:    cover;
  border:        3px solid var(--accent);
  box-shadow:    0 0 0 6px var(--accent-glow);
  transition:    box-shadow var(--transition);
}

.avatar:hover { box-shadow: 0 0 0 10px var(--accent-glow); }

.status-dot {
  position:         absolute;
  bottom:           4px;
  right:            4px;
  width:            14px;
  height:           14px;
  background:       #22c55e;
  border-radius:    50%;
  border:           3px solid var(--bg);
  box-shadow:       0 0 8px rgba(34,197,94,.6);
}

.profile-name {
  font-size:   1.6rem;
  font-weight: 700;
  letter-spacing: -.5px;
  margin-bottom: .4rem;
  background: linear-gradient(135deg, var(--accent-h) 20%, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-theme="light"] .profile-name {
  background: linear-gradient(135deg, #28221f 20%, var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
}

.profile-bio {
  font-size:   .9rem;
  color:       var(--text-muted);
  max-width:   32ch;
  margin-bottom: 1.75rem;
}

/* ── SOCIALS ───────────────────────────────────────────── */
.socials {
  display:   flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:       .6rem;
}

.social-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      var(--bg-card);
  border:          1px solid var(--border);
  color:           var(--text-muted);
  transition:      background var(--transition), color var(--transition),
                   transform var(--transition), box-shadow var(--transition);
}

.social-btn svg { width: 18px; height: 18px; }

.social-btn:hover,
.social-btn:focus-visible {
  background:  var(--accent);
  color:       #fff;
  transform:   translateY(-3px);
  box-shadow:  0 8px 20px var(--accent-glow);
  outline:     none;
}

/* Platform-specific accent colours on hover */
.social-btn[data-platform="youtube"]:hover  { background: #ff0000; box-shadow: 0 8px 20px rgba(255,0,0,.3); }
.social-btn[data-platform="facebook"]:hover { background: #1877f2; box-shadow: 0 8px 20px rgba(24,119,242,.35); }
.social-btn[data-platform="instagram"]:hover {
  background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);
  box-shadow: 0 8px 20px rgba(220,39,67,.3);
}

/* ── SECTION ───────────────────────────────────────────── */
.section { margin-bottom: 2.5rem; }

.section-title {
  font-size:     .75rem;
  font-weight:   600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color:         var(--text-muted);
  margin-bottom: .875rem;
}

/* ── LINK CARDS ────────────────────────────────────────── */
.links-list {
  display:        flex;
  flex-direction: column;
  gap:            .6rem;
}

.link-card {
  display:         flex;
  align-items:     center;
  gap:             .875rem;
  padding:         .875rem 1rem;
  background:      var(--bg-card);
  border:          1px solid var(--border);
  border-radius:   var(--radius-md);
  color:           var(--text);
  box-shadow:      var(--shadow-card);
  transition:      background var(--transition), transform var(--transition),
                   box-shadow var(--transition), border-color var(--transition);
  will-change:     transform;
}

.link-card:hover,
.link-card:focus-visible {
  background:    var(--bg-card-h);
  border-color:  var(--accent);
  transform:     translateX(4px);
  box-shadow:    var(--shadow-card), 0 0 0 1px var(--accent);
  outline:       none;
}

.link-card__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  width:           36px;
  height:          36px;
  font-size:       1.35rem;
  background:      var(--accent-glow);
  border-radius:   var(--radius-sm);
}

.link-card__icon img {
  width:         24px;
  height:        24px;
  object-fit:    contain;
  border-radius: 4px;
}

.link-card__icon svg {
  width:  20px;
  height: 20px;
  color:  var(--text-muted);
}

.link-card__text {
  flex:    1;
  display: flex;
  flex-direction: column;
  gap:     .1rem;
}

.link-card__text strong { font-size: .95rem; font-weight: 600; }
.link-card__text small  { font-size: .78rem; color: var(--text-muted); }

.link-card__arrow {
  width:      16px;
  height:     16px;
  flex-shrink: 0;
  color:      var(--text-muted);
  transition: transform var(--transition), color var(--transition);
}

.link-card:hover .link-card__arrow,
.link-card:focus-visible .link-card__arrow {
  transform: translateX(3px);
  color:     var(--accent);
}

/* ── FOOTER ────────────────────────────────────────────── */
.footer {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.25rem 1.5rem;
  max-width:       var(--max-w);
  margin:          0 auto;
  font-size:       .78rem;
  color:           var(--text-muted);
}

.theme-toggle {
  width:         38px;
  height:        38px;
  border-radius: 50%;
  background:    var(--bg-card);
  border:        1px solid var(--border);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     1.1rem;
  transition:    background var(--transition), transform var(--transition);
}

.theme-toggle:hover { background: var(--bg-card-h); transform: rotate(20deg); }

/* ── ENTRY ANIMATIONS ─────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.profile {
  animation: fadeUp .5s ease both;
}

.section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease, transform .5s ease;
}

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

/* ── FOCUS-VISIBLE ──────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius:  4px;
}

/* ── SCROLLBAR (webkit) ─────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }